1KB網格 - 下拉菜單未顯示

我遇到了下拉菜單的問題。我認爲麻煩來自溢出：隱藏;我沒有看到下拉菜單的子菜單。我使用1KB網格。1KB網格 - 下拉菜單未顯示

當我刪除溢出：從.container類隱藏，我可以看到一些下拉，但不是整個。

我很高興看到一個信息，我可以修復它。

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>

來源

2012-03-25 designforweb

第一關中有你有哪幾個小錯誤。

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

也是你的HTML

  <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>）。一篇文章應該能夠站在它自己的http://html5doctor.com/the-article-element/以獲取更多關於文章的內容

現在來解決實際問題。對於.row和.container，您都有overflow:hidden，這有助於清除浮動內容，還可以隱藏掉落在行和容器外的任何內容。不可否認，這是清除浮動的更好方法之一，但是您也可以使用清晰的div來執行此操作（在每行末尾添加.clear{clear:both;}並添加<div class="clear"></div>，而不是隱藏的溢出），或者更奇怪的clearfix方法http://css-tricks.com/snippets/css/clear-fix/

來源

2012-03-25 12:46:33

1KB網格 - 下拉菜單未顯示

回答

相關問題