SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help needed with CSS drop down menu

    Hi guys,

    I'm trying to build a drop down menu for my site but, despite seeing a few tutorials and examples, I've had no luck yet!

    I'm pretty sure my HTML is correct...

    Code:
    	<ul id="nav">
    	<li><a href="#">Menu 1</a></li>
    	<li><a href="#">Menu 2</a></li>
    	<li><a href="#">Menu 3</a>
                <ul>
                    <li><a href="#">Drop Down 1</a></li>
                    <li><a href="#">Drop Down 2</a></li>
                    <li><a href="#">Drop Down 3</a></li>
                    <li><a href="#">Drop Down 4</a></li>
                </ul>
            </li>
    	<li><a href="#">Menu 4</a></li>
    	<li><a href="#">Menu 5</a></li>
    	</ul>
    My CSS looks like this at the moment...

    Code:
    ul#nav {width:920px; height:35px; list-style:none; padding:0; margin:0; background:url(navBg.jpg) repeat-x; font-family:'OpenSansRegular'; font-size:11px; font-weight:700; text-transform:uppercase; -moz-box-shadow:0px 0px 10px #1c1c1c; -webkit-box-shadow:0px 0px 10px #1c1c1c; box-shadow:0px 0px 10px #1c1c1c; z-index:999;}
    ul#nav li a:hover, #nav li a:active {background:url(navOn.jpg) repeat-x; text-decoration:none;}
    ul#nav li a {border-right:1px solid #000; color:#E0E2E7; display:inline-block; float:left; margin:0; padding:10px 19px; width:auto; text-decoration:none;}
    
    * html #nav li {display:inline; float:left; }  /* for IE 6 */
    * + html #nav li {display:inline; float:left; }  /* for IE 7 */
    
    
    ul#nav li ul {left:-9999px; position:absolute; list-style:none;}
    ul#nav li:hover ul {left:0; position:absolute;}
    
    ul#nav li ul li {}
    ul#nav li ul li a {width:250px; background-color:#FFF; color:#000; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-transform:none;}
    ul#nav li ul li a:hover {background-color:#028efd;}
    I'm really struggling with this. Does anyone know how I can get Menu 3 to display the four drop down items beneath it - not the same width as the Menu 3 button but just inline with it.

    Thank you very much and I hope to hear from you.

    SM

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    basically you arent floating your sub LIs.. of course that leads to a few other issues...

    the corrected code would be as follows:
    Code:
    	#nav {width:920px;   list-style:none; padding: 0 ; margin:0 ; background:url(navBg.jpg) repeat-x; font-family:'OpenSansRegular'; font-size:11px; font-weight:700; text-transform:uppercase; -moz-box-shadow:0px 0px 10px #1c1c1c; -webkit-box-shadow:0px 0px 10px #1c1c1c; box-shadow:0px 0px 10px #1c1c1c; z-index:999;  position: relative; display: inline-block; width:100%}
    	
    #nav li a:hover, #nav li a:active {background:url(navOn.jpg) repeat-x;}
    
    #nav li a {border-right:1px solid #000; color:#E0E2E7; display:block; margin:0; padding:10px 19px;  text-decoration:none;}
    
    * html #nav li {display:inline; float:left; }  /* for IE 6 */
    * + html #nav li {display:inline; float:left; }  /* for IE 7 */
    
    
    #nav li{}
    #nav ul {left:-9999em;   margin:0; padding:0; position: absolute;  border-bottom:1px solid #000; border-left:1px solid #000; margin-left:-1px;}
    #nav li:hover ul {left:auto; }
    
    #nav li{float:left; }
    #nav li  li a { background-color:#FFF; color:#000; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-transform:none;}
    #nav li  li a:hover {background-color:#028efd; }
    hope that helps

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's fantastic, thank you so much!!

    I've put it all together and everything works perfectly, pretty much.

    On the drop down there is a small (like 1px or so) gap between the list items and the border of the ul. I tried deleting margin-left:-1px from '#nav ul' but to no avail.

    Do you by any chance know what may be causing it? I was thinking the default whitespace you sometimes get between <li>'s...?

    Thank you again, great help and much appreciated

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, scrap that!! Sorry, I was being an idiot, I fixed it!

    All works perfectly, thank you so much!


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
  •