5 Replies Latest reply: Nov 21, 2012 8:06 AM by Spindrift RSS

    Help needed with CSS drop down menu

    Spindrift

      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