CSS Drop down menu problem

[mlindenbach]

Hello,

I have built a drop down menu so that on hover the menu items drop down. The problem is that some are dropping down vertically and some are horizontal. I want them to all drop down vertically. I can’t figure out what the issue is. When I preview the code in my designer window it is all arranged vertically but when I hover in the browser some are horizontal and some are vertical.

Here is my CSS code:

#custom_roll{
margin: 0;
padding: 0;
line-height: 30px;
list-style: none;
line-height: 1;
}

#custom_roll  a {
display: block;
}
	

#custom_roll ul{
margin: 0;
padding: 0 0 0 10;
line-height: 30px;


}
#custom_roll ul li{
display:inline;
position: relative;
list-style:none;
float:left;
margin:5px 21px 0 0;
padding:0 0 0 0;
text-align:left;
color:#ffffff;
vertical-align:middle;

}

#custom_roll ul li a{
text-align: center;
text-decoration: none;
color:white;
font-family:Verdana, arial;
font-size: 13px;

}
#custom_roll ul li a:hover {
color:#CCCCCC;
}
#custom_roll ul ul{
left: -999em; 
position: absolute;
display: block;
padding: 0 0 0 0;
background:#E8E8E8;
}
	
#custom_roll li li a{

font-family:Verdana, arial;
font-size: 11px;
color: black;
width: 150px;
text-align: left; 
margin: 0 0 0 5px;
display:block;

}

#custom_roll ul li ul li a:hover {
color:black;
font-weight: bold;
}

Here is my HTML code:

<div class="custom_nav" style="background-image: url('../WebPictures/nav_back.jpg'); height: 282px; width: 927px;">
<div id="custom_roll">

<ul>
<li><a title= " " href="default.aspx">Home</a></li>
<li><a  title=" " href="webPages/Operations.aspx">Operations</a></li>
<li><a title=" "  href="webPages/Sales.aspx">Sales </a></li>
<li><a title="" href="webPages/AccountingAdmin.aspx"> Accounting &amp; 
Administration</a></li>
<li><a title="" href="webPages/Human Resources.aspx"> Human Resources</a>
<ul>
	<li><a href="Manager_AFE.aspx">AFE Site</a></li>
	<li><a href="Manager_BusinessDevelopment.aspx">Business Development</a></li>
	<li><a href="Managers_HR.aspx">Human Resources</a></li>
	<li><a href="Managers_Metrics.aspx">Metrics</a></li>
	</ul>

</li>
<li><a  title="" href="webPages/Safety.aspx">Safety</a></li>
<li><a title="" href="webPages/Transportation.aspx">Transportation</a></li>
<li><a title="" href="webPages/Managers.aspx"> Managers</a>
	<ul>
	<li><a href="Manager_AFE.aspx">AFE Site</a></li>
	<li><a href="Manager_BusinessDevelopment.aspx">Business Development</a></li>
	<li><a href="Managers_HR.aspx">Human Resources</a></li>
	<li><a href="Managers_Metrics.aspx">Metrics</a></li>
	</ul>
</li>
</ul>

</div>
</div>

Here is my head script:

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("custom_roll").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

Please help - I have wasted TOOOOO much time trying to figure out where I have gone wrong!

[teedoff]

Deleted

[teedoff]

href="webPages/Human_Resources.aspx">

URL's cannont contain empty spaces. Not sure this will resolve your issue, but good to rule that error out.

[mlindenbach]

Thanks for the suggestion - unfortunatley this did not reslove the issue. Any other suggestions?

[mlindenbach]

Hello Again!

I figured it out. On my custom_roll tag for the second level UL I fixed the width and padding of my menu options forcing each line item to drop down to a new line:

#custom_roll ul ul{
	left: -999em; 
	position: absolute;
	display: block;
	background:#E8E8E8;
	width:120px;
	padding:4px;	
	text-decoration:none;
	border:thin #BEBEBE solid;
	}

I don't know why I haven't tried that yet but I wanted to follow up if anyone else was having a similar issue.

Thanks!

Melissa