1

I have a vertical menu and need a submenu to pop out. I've got everything working except my sub menu doesn't align where it should horizontally. Instead, it jumps up against the header div above. Any help would be appreciated.

HTML

<div class="leftcontainer">
<ul>
  <li><a class="current" href="index.html">Home</a></li>
  <li><a href="#">History</a></li>
</ul>
<div class="spacer"></div>
<ul>
<li><a href="#">Packaging</a>
    <ul>
        <li><a href="#">Item</a></li>
       <li><a href="#">Item</a></li> 
       <li><a href="#">Item</a></li>  
   </ul>
 </li>  
<li><a href="#">Transportation</a>
        <ul>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li> 
        <li><a href="#">Item</a></li>  
   </ul>
</li>
<li><a href="#">Warehousing</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Real Estate</a></li>
<li><a href="#">Contact Us</a></li>

</ul>

CSS

.container {
          width: 960px;
          height:740px;
          margin-top: 0px;
          margin-right: auto;
          margin-bottom: 0px;
          margin-left: auto;
          padding-bottom: 10px;
          position: relative;
          overflow: auto;
          box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.15);
      }

      body {
          font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
          background-image: url(../img/body-bg);
          background-repeat: repeat-x;
      }

      .leftcontainer {
          float: left;
          width: 160px;
          height: 650px;
          display: inline-block;
          background-image: url(../img/nav-div-bg.png);
          background-repeat: repeat-y;
          margin-bottom: 0px;
          clear: both;
          position: absolute;
          z-index: 999;
      }

      ul li {
          text-decoration: none;
          list-style-type: none;
          margin-left: -40px;
          text-align: left;
          display: block;
      }

      ul {
          margin-top:0px;
          margin-bottom: 0px;
          list-style-type: none;
      }

      ul li a:link {
          text-decoration: none;
          list-style-type: none;
          color: #FFF;
          display: block;
          padding-top: 20px;
          padding-bottom: 20px;
          padding-left: 20px;
          font-size: 16px;
      }

      ul li a:hover {
          text-decoration: none;
          list-style-type: none;
          color: #FFF;
          padding-left: 20px;
          display: block;
          padding-top: 20px;
          padding-bottom: 20px;
          background-image: url(../img/nav-bg.png);
          background-repeat: no-repeat;
          background-position: left center;
          box-shadow: -30px 0px 9px 0px rgba(0,0,0,0.15);
      }

      .container ul li a:visited {
          text-decoration: none;
          list-style-type: none;
          color: #FFF;
          padding-left: 20px;
          display: block;
          padding-top: 20px;
          padding-bottom: 20px;
      }

      ul li ul {
          position: absolute;
          display: none;
          background: #5f6975;
          border-radius: 0px;
          padding-top: 0;
          padding-right: 0;
          padding-bottom: 0;
          padding-left: 0;
      }

      ul li:hover ul {
          display: inline-block;
          z-index: -1;
          left: 172px;
          top: 0px; 
      }

      ul ul li {
          background: #5f6975;
          float: none; 
          padding-left: 0px;
          border-top: 1px solid #6b727c;
          border-bottom: 1px solid #575f6a;
      }

      ul ul li a:link{
          padding: 10px 0px 10px 30px;
          color: #fff;
          width: 130px;
      } 

      ul ul li a:hover {
          background: #4b545f;
          box-shadow: none;
      }

      .current{
          text-decoration: none;
          list-style-type: none;
          color: #FFF;
          padding-left: 20px;
          display: block;
          padding-top: 20px;
          padding-bottom: 20px;
          background-image: url(../img/nav-bg.png);
          background-repeat: no-repeat;
          background-position: left center;
          box-shadow: -30px 0px 9px 0px rgba(0,0,0,0.15);
      }
Aishvarya Jaiswal
  • 1,793
  • 6
  • 34
  • 72
deecemobile
  • 113
  • 1
  • 6

3 Answers3

0

You should add position: relative; to the parent <li>.

Adam W
  • 73
  • 2
  • 7
0

change ul li ul to position: relative; rather than position: absolute;

This should do the trick

samrap
  • 5,595
  • 5
  • 31
  • 56
  • position relative keeps the sub menu's in the flow, and therefore pushes the other content away (look at the main items beneath the active sub menu in your fiddle), which is very strange and probably not desired. I think sub menu's should always be positioned absolute to lift them out of the flow and prevent them from influencing the rest of the content. – Pevara Jul 30 '13 at 21:33
0

sub menu's should be positioned absolute. And for the positioning to work correct, you would need to position the parent li relative, so it acts as a reference for the absolute positioned child.

The minimum css would look something like this:

nav ul {
    float: left;
}
nav ul ul {
    display: none;
}
nav ul li {
    position: relative;
}
nav ul li:hover > ul {
    position: absolute;
    display: block;
    top: 0;
    left: 100%;
}

and a fiddle: http://jsfiddle.net/Bp48q/

Note that this code will allow you to keep nesting sub menu's (which would be a ux nightmare, but that's a different story) and should keep working fine.

Pevara
  • 14,242
  • 1
  • 34
  • 47