Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Drop down menu problem

    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:

    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 &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:

    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>
    Please help - I have wasted TOOOOO much time trying to figure out where I have gone wrong!

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Deleted
    Last edited by teedoff; 08-22-2011 at 06:54 PM. Reason: double post
    Teed

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Teed

  • #4
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the suggestion - unfortunatley this did not reslove the issue. Any other suggestions?

  • #5
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    #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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •