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:
Here is my HTML code:
Here is my head script:
Please help - I have wasted TOOOOO much time trying to figure out where I have gone wrong!
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:
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:
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 & 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>
Code:
<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>
Comment