1KB Grid - 드롭 다운 메뉴가 표시되지 않습니다.

Question

드롭 다운 메뉴에 문제가 있습니다. 문제는 오버플로에서 유래했다고 생각합니다. 드롭 다운의 하위 메뉴가 표시되지 않습니다. 1KB Grid를 사용합니다.

.container 클래스에서 overflow : hidden을 삭제하면 전체 드롭 다운은 아니지만 조금만 볼 수 있습니다.

나는 그것을 고칠 수있는 정보에 대해 기쁘게 생각합니다.

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 코드 :

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

당신이 무엇에 몇 가지 사소한 실수가 우선. 당신의 HTML에서 또한

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 

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

는

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

해야하며, 마지막으로 당신이하려는 모르겠어요,하지만 난 당신이 문서를 사용하고있는 느낌을 얻을 요소가 잘못되었습니다. (가지고 계신대로 <article><article></article></article>). 기사가 자체에 서 있어야합니다. 기사에 대한 자세한 내용은

실제 문제를 확인하십시오. 은 .row 및 .container으로 표시되지만 플로트를 지우는 데 도움이되지만 행과 컨테이너 바깥에있는 내용은 숨기도합니다. 플로팅을 제거하는 더 좋은 방법 중 하나는 확실 할 수는 없지만 명확한 div를 사용하여 수행 할 수 있습니다 (.clear{clear:both;} 및 오버플로 숨김 대신 각 행의 끝에 <div class="clear"></div> 추가). 또는 더 많은 해킹 clearfix 메서드 http://css-tricks.com/snippets/css/clear-fix/