Two quick questions about a menu

1) I want my sub-menu to display vertically. However, they are scrolling horizontally. I can't figure it out.

2) Another thing I can't figure out is how to have the menu maintain a colour if the user is on a specific page. I've been messing around with the pseudo-classes but to no avail.

Any help would be appreciated

The website is http://www.tirzah.ie/concrete5/index.php and the problem is located under the "About Us" section of the menu.


#header {
float:left;
margin-top:290px;
width:730px;
height:160px;
display:block;
}

.nav-header {
border:0;
font-size:17px;
font-weight:700;
width:710px;
margin:12px 0 23px;
padding:0;
}

.nav-header ul {
height:35px;
list-style:none;
margin:0;
padding:0;
}

.nav-header li {
float:left;
padding:0;
}

.nav-header li a {
color:#f1f1f1;
display:block;
font-weight:800;
line-height:35px;
text-align:center;
text-decoration:none;
margin:0;
padding:0 20px;
}

.nav-header li a:hover,.menu ul li:hover a {
color:#05bafc;
text-decoration:none;
background:#fff;
}

.nav-header li ul {
background:none;
display:none;
height:auto;
border:0;
position:absolute;
z-index:200;
margin:0;
padding:0;
}

.nav-header li:hover ul {
display:block;
}

.nav-header li:hover li a {
background:#C2C2C2;
}

.nav-header li ul a {
display:block;
height:35px;
font-size:13px;
font-style:normal;
text-align:left;
margin:0;
padding:0 20px;
color:#05bafc;
}

.nav-header li ul a:hover,.menu li ul li:hover a {
border:0;
color:#05bafc;
text-decoration:none;
}

.nav-header p {
clear:left;
}



<div class="nav-header">
<ul>
<li><a href="http://www.tirzah.ie/concrete5" target="_self" >Home</a>
</li>
<li><a href="http://www.tirzah.ie/concrete5/index.php/about/" target="_self" >About Us</a>
<ul>
<li><a href="http://www.tirzah.ie/concrete5/index.php/about/trafficking/" target="_self">Human Trafficking</a></li>
<li><a href="http://www.tirzah.ie/concrete5/index.php/about/contact-us/" target="_self">Contact Us</a></li>
</ul>
</li>
<li><a href="http://www.tirzah.ie/concrete5/index.php/news/" target="_self" >News</a>
</li>
<li><a href="http://www.tirzah.ie/concrete5/index.php/get/" target="_self" >Get Involved</a>
</li>
<li><a href="http://www.tirzah.ie/concrete5/index.php/services/" target="_self" >Services</a>

</li>
<li><a href="http://www.tirzah.ie/concrete5/index.php/links/" target="_self" >Links &amp; Resources</a>
</li>
</ul>
</div>

1. take the float: left; out


.nav-header li {
float:left;
padding:0;
}


2. you have to add them manually or with javascript

for instance, make a "selected" class in which you change manually on each page


<ul>
<li class="selected"></li>
<li></li>
</ul>


then on the other page you would switch the li class.

If I take the float out they bunch together.

I've played around and .nav-header ul li ul li{clear:both;} seems to work.

Would you be able to expand on point two? Are you suggesting that I give all the menu <li> one class and then set the background of this?

so something like .selected{background:red;}

I'm still not seeing how that would work. (I don't yet know javascript so that's out for the moment)

you have home.html
you have a contact us.html
one nav bar for both


.selected { background-color: blue; }


for home.html

<ul class="nav">
<li class="selected"><a href="/">Home</a></li>
<li><a href="#">contact us</a></li>
</ul>


for contactus.html

<ul class="nav">
<li><a href="/">Home</a></li>
<li class="selected">contact us</a></li>
</ul>


if your using <?php include ?> on your nav bar, then you'll need javascript.
if your using php modes on your nav bar, then you'll need javascript

The site is built using PHP - something I know very little about. I'm guessing that I would then need javascript? If so this might be for down the line!