SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast stephenTMS's Avatar
    Join Date
    Jun 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Navigation List items displaying inline

    Ok, I am trying to make a drop down menu in JQuery and I have hit a roadblock. I have been trying for hours to work this out myself but i'm coming up with nothing, I searched for solutions but could not find any.

    Ok, so the problem is that my dropdown items are displaying horizontally instead of vertically, here is the code:

    HTML Code:
    <nav class="ribbon">
    	<ul>
    		<li class="dropdown">
    			<a href="#" class="nav"><h1>Home</h1></a>
    				<ul>
    					<li><a href="#"><h2>Page 1</h2></a></li>
    				</ul>
    				</li>
    						<li>
    							<a href="#" class="nav"><h1>About</h1></a>
    						</li>
    						<li class="dropdown">
    							<a href="#" class="nav"><h1>Recipes</h1></a>
    							<ul>
    								<li><a href="#"><h2>Page 1</h2></a></li>
    								<li><a href="#"><h2>Page 1</h2></a></li>
    								<li><a href="#"><h2>Page 1</h2></a></li>
    								<li><a href="#"><h2>Page 1</h2></a></li>
    							</ul>
    						</li>
    						<li>
    							<a href="#" class="nav"><h1>Contact</h1></a>
    						</li>
    					</ul>
    				</nav>
    Code:
    section#main section#ribbon nav.ribbon ul {
        height: 40px;
    }
    
    section#main section#ribbon nav.ribbon ul li {
        height: 40px;
        float: left;
        text-align: center;
    }
    
    section#main section#ribbon nav.ribbon ul li.dropdown {
        overflow: hidden;
    }
    
    section#main section#ribbon nav.ribbon a.nav, section#main section#ribbon nav.ribbon ul li a.nav:visited {
        color: #d3c682;
        text-decoration: none;
        
    }
    
    section#main section#ribbon nav.ribbon ul li a.nav:hover {
        color: #ffffff;
    }
    
    section#main nav.ribbon ul li a.nav h1 {
        font-size: 1.878em;
        font-weight: normal;
        display: inline;
        line-height: 1.4em;
    }
    
    section#main nav.ribbon ul li.dropdown ul {
        height: 250px;
    }
    section#main nav.ribbon ul li.dropdown ul li {
        background-color: #000000;
    }
    
    section#main nav.ribbon ul li.dropdown ul li a.sub-nav {
    
    }
    Code:
    $(document).ready(function(){
    
        //when mouse rolls over
        $('nav.ribbon ul li.dropdown').mouseover(function(){
            $(this).stop().animate({'height':'250px'}, 500, 'swing');
        });
        
        //when mouse is removed
        $('nav.ribbon ul li.dropdown').mouseout(function(){
            $(this).stop().animate({'height':'40px'}, 500, 'swing');
        });
    });
    I hope someone can help, thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    This is a CSS issue. You need to set the LIs in the sub ULs to float: none. It would be easier to help with a live link.


Bookmarks

Posting Permissions

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