html - 1KB 网格 - 未显示下拉菜单

Question

下拉菜单有问题。我认为麻烦来自overflow:hidden;。我没有看到下拉菜单的子菜单。我使用 1KB 网格。

当我从 .container 类中删除 overflow:hidden 时，我可以看到一些下拉菜单，但看不到整个下拉菜单。

我很高兴收到有关如何修复它的信息。

网格.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;}

菜单.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

首先，您所拥有的有一些小错误。

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></article> )。一篇文章应该能够独立存在http://html5doctor.com/the-article-element/有关文章的更多信息

现在进入实际问题。你有 overflow:hidden对于 .row和 .container虽然这有助于清除 float ，但它也可以隐藏任何落在行和容器之外的内容。不可否认，这是清除 float 的更好方法之一，但是您也可以使用清除 div 来执行此操作( .clear{clear:both;} 并在每行末尾添加 <div class="clear"></div>，而不是 overflow hidden )，甚至更多hacky clearfix 方法 http://css-tricks.com/snippets/css/clear-fix/