PDA

View Full Version : CSS Drop down menu problem



mlindenbach
Aug 22nd, 2011, 06:04 PM
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
Aug 22nd, 2011, 07:52 PM
Deleted

teedoff
Aug 22nd, 2011, 07:54 PM
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
Aug 22nd, 2011, 08:02 PM
Thanks for the suggestion - unfortunatley this did not reslove the issue. Any other suggestions?

mlindenbach
Aug 22nd, 2011, 08:20 PM
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