Skip navigation
Currently Being Moderated

Help needed with CSS drop down menu

Nov 20, 2012 9:09 AM

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:230px; background-color:#efefef; color:#2e2e2e; font-family:Arial, Helvetica, sans-serif; font-size:10px; font-weight:normal; border-bottom:solid 1px #FFF; padding:7px; margin:0;}
ul#nav li ul li a:hover {background-color:#028efd; background-image:none; color:#FFF;}

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

 
Replies
  • Currently Being Moderated
    Nov 20, 2012 11:14 AM   in reply to Spindrift

    Instead of struggling, get a menu system that works.

        

        Pop-Menu  Magic2 by PVII (DW extension purchase)

        http://www.projectseven.com/products/menusystems/pmm2/index.htm

     

        jQuery Superfish

        http://users.tpg.com.au/j_birch/plugins/superfish/

     

        jQuery Mega Menus 
        http://www.javascriptkit.com/script/script2/jkmegamenu.shtml

     

        CSS3 Dropdown Menus

        http://www.red-team-design.com/css3-dropdown-menu

     

        10 Responsive Menus

        http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and -tutorials/

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 20, 2012 12:43 PM   in reply to Spindrift

    Try this. It's been adapted from a menu I previously made on another site.

     

    #menu {width:920px; height:35px; padding:0; margin:0; background:url(navBg.jpg) repeat-x; -moz-box-shadow:0px 0px 10px #1c1c1c; -webkit-box-shadow:0px 0px 10px #1c1c1c; box-shadow:0px 0px 10px #1c1c1c;}
    ul#nav a {font: 700 11px 'OpenSansRegular', arial, helvetica, sans-serif; text-transform:uppercase; margin:0; padding:5px 15px; line-height:25px; color: #666; text-decoration: none; display:block; list-style: none;}
    ul#nav a:hover, ul#nav a.active {color: #999; background:url(navOn.jpg) repeat-x; text-decoration:none;}
    ul#nav {position: relative; margin: 0; padding: 0;}
    ul#nav ul {display: none;}
    * html #nav li {display:block; float:left; }  /* for IE 6 */
    * + html #nav li {display:block; float:left; }  /* for IE 7 */
    ul#nav li, ul#nav li li {position: relative; float: left; list-style: none; border-right:1px solid #000;}
    ul#nav li:hover ul {position: absolute; top: 35px; left: -1px; display:block; padding: 0; margin: 0;}
    ul#nav li li {width:230px; background-color:#efefef; color:#000;  font: normal 10px 'OpenSansRegular', arial, helvetica, sans-serif; border-bottom:solid 1px #FFF; border-right:none; border-left:1px solid #000; padding:0 5px;}
    ul#nav li li:hover, ul#nav li li a:hover {background-color:#028efd; color:#FFF;}
    

     

     

    <body>
    <div id="menu">
    <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>
        </div>
    </body>
    
    
     
    |
    Mark as:
  • Currently Being Moderated
    Nov 20, 2012 8:23 PM   in reply to Spindrift
     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Nov 21, 2012 12:29 AM   in reply to Spindrift
     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points