Vertikales Menü mit Untermenü CSS-Ausrichtung

Habe ich ein vertikales Menü und benötigen ein Untermenü, um pop-out. Ich habe alles außer mein sub-Menü nicht ausrichten, wo es sollte horizontal. Anstelle, es springt gegen die header div oben. Jede Hilfe würde geschätzt werden.

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);
      }

InformationsquelleAutor deecemobile | 2013-07-30

0

sub-Menü positioniert werden soll absolut. Und für die Positionierung korrekt funktioniert, müssen Sie die position der übergeordneten li relativ, so wirkt es als Referenz für die absolut positionierten Kind.

Die minimale css-Code würde dann wie folgt Aussehen:
```
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%;
}
```
und ein Turnschuh: http://jsfiddle.net/Bp48q/

Beachten Sie, dass dieser code wird Ihnen erlauben, zu halten Schachtelung-sub-Menü ' s (das wäre eine ux Alptraum, aber das ist eine andere Geschichte) und sollte immer funktionieren.
- nav ul li position war der Schlüssel. danke
InformationsquelleAutor Pevara
0

Sollten Sie position: relative; zu den übergeordneten <li>.

InformationsquelleAutor Adam W
0

ändern ul li ul zu position: relative; eher als position: absolute;

Dies sollte den trick tun
- relative position hält das sub-Menü in den Fluss, und deshalb schiebt Sie die anderen Inhalte Weg (Blick auf die wichtigsten Elemente unter dem aktiven sub-Menü in Ihrer fiddle), das ist sehr seltsam und wahrscheinlich auch nicht gewünscht. Ich denke das sub-Menü ' s sollten immer so positioniert werden absolute heben Sie Sie aus dem Fluss und verhindern, dass Sie von der Beeinflussung der rest des Inhalts.
InformationsquelleAutor samrap

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.