1KB Grid - Dropdown-Menü nicht gezeigt

Question

Ich habe ein Problem mit einem Dropdown-Menü. Ich denke, die Probleme kommen aus dem Überlauf: versteckt ;. Ich sehe das Untermenü des Dropdown-Menüs nicht. Ich benutze das 1KB Grid.

Wenn ich den Überlauf löschen: ausgeblendet von der Klasse .container, kann ich ein bisschen vom Dropdown aber nicht das ganze sehen.

Ich freue mich über eine Info, wie ich es beheben konnte.

grid.css:

.grid_1   {width: 70px;} 
.grid_2   {width: 160px;} 
.grid_3   {width: 250px;} 
.grid_4   {width: 340px;} 
.grid_5   {width: 430px;} 
.grid_6   {width: 520px;} 
.grid_7   {width: 610px;} 
.grid_8   {width: 700px;} 
.grid_9   {width: 790px;} 
.grid_10  {width: 880px;} 
.grid_11  {width: 970px;} 
.grid_12  {width: 1060px;} 

.container  {margin: 0 10px 0 10px; overflow: hidden; float: left; display: inline;} 
.row   {width: 1080px; margin: 0 auto; overflow: hidden; } 
.row .row  {margin: 0 -10px 0 -10px; width: auto; display: inline-block;} 

menu.css

nav         {float:right; margin-top:45px; position:relative; z-index:99; font-size:14px 1.4rem; text-transform:uppercase;} 

nav .rex-navi1      {list-style:none; margin:0; padding:0; float:right;} 

nav .rex-navi1 li     {float:left; margin-left:10px; background:#FF9;} 
nav .rex-navi1 li:hover    {background:#3F6;} 
nav .rex-navi1 li a     {display:block; text-decoration:none; color:#fff; padding:6px 15px; height:20px; line-height:20px;} 
nav .rex-navi1 li:hover a   {color:#383738;} 
nav .rex-navi1 a.rex-current, 
nav .rex-navi1 a.rex-active   {background:#FC9; color:#383738;} 

nav .rex-navi2      {position: relative; z-index:100px;} 

nav li:hover .rex-navi2    {visibility:visible;} 
nav li .rex-navi2     {visibility: hidden; position:absolute; font-size:11px; font-weight:normal; list-style:none; margin:0; padding:0; background:#FFF;}         

nav .rex-navi2 li     {background:#fff; clear:left; display:block; min-width:200px;}  
nav .rex-navi2 li a     {color:#383738; padding:5px 15px; } 
nav .rex-navi2 li a:hover   {font-weight:bold; color:#DC002E;} 
nav .rex-navi2 a.rex-current  {font-weight:bold;} 

HTML-Code:

div id="header">   
      <header class="row"> 
        <section class="container grid_4"> 
         <a href="/" alt="master bench logo"><img src="files/logo_header.png"/></a> 
        </section> 
        <nav class="container grid_8"> 
         <ul class="rex-navi1"> 
          <li class="rex-article-2 rex-normal"><a href="">xy</a></li> 
          <li class="rex-article-8 rex-current"><a class="rex-current" href="">xy</a></li> 
          <li class="rex-article-4 rex-normal"><a href="">xy</a> 
           <ul class="rex-navi2"> 
            <li class="rex-article-13 rex-normal"><a href="">xy</a></li> 
            <li class="rex-article-12 rex-normal"><a href="">xy</a></li> 
           </ul> 
         </ul> 
        </nav> 
      </header> 
    </div><div id="main"> 
      <article class="row"> 
       <article class="container grid_12"> 
        here you will find some interesting information<br/> 
       </article> 
      </article>   

     </div> 
    </div> 

Answer 1

zunächst einmal gibt es ein paar kleine Fehler in dem, was Sie haben.

nav .rex-navi2 {position: relative; z-index:100px;} // z-index doesn't need px 
nav {float:right; margin-top:45px; position:relative; z-index:99; font-size:14px 1.4rem; text-transform:uppercase;} // 1.4rem should be 1.4em 

auch in Ihrem HTML

  <li class="rex-article-12 rex-normal"><a href="">xy</a></li> 
     </ul> 
</ul> 

sollte

  <li class="rex-article-12 rex-normal"><a href="">xy</a></li> 
     </ul> 
    </li> // you forgot to close out your li, 
</ul> 

sein und schließlich weiß ich nicht, was Sie beabsichtigen, aber ich habe das Gefühl, dass Sie vielleicht den Artikel verwenden Element falsch. (wie Sie haben <article><article></article></article>). Ein Artikel sollte in der Lage sein, auf sich selbst zu stehen http://html5doctor.com/the-article-element/ für mehr über Artikel

Jetzt um das eigentliche Problem zu bekommen. Sie haben overflow:hidden sowohl für die .row und .container, während dies hilft, die Schwimmer zu löschen, es dient auch zum Verbergen von Inhalten, die außerhalb der Zeile und Container fallen würde. Unbestreitbar ist das eine der besseren Methoden, um floats zu löschen, aber Sie könnten auch ein clear div verwenden (.clear{clear:both;} und fügen Sie <div class="clear"></div> am Ende jeder Zeile, anstatt den Überlauf versteckt), oder die noch mehr Hacky Clearfix-Methode http://css-tricks.com/snippets/css/clear-fix/