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

我的下拉菜单有问题。我认为问题来自溢出：隐藏；。我看不到下拉菜单的子菜单。我使用1KB的网格

当我从.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>

div id=“header”>









您将在这里找到一些有趣的信息

首先，您所犯的一些小错误

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>

//您忘记关闭您的li，

最后，我不知道您的意图是什么，但我觉得您可能使用了错误的article元素。（有关文章的更多信息，请参见

）

现在我们来谈谈实际问题。
您对
.row
和
.container
都有
overflow:hidden
，这有助于清除浮动，但也会隐藏掉在row和container之外的任何内容。
不可否认，这是清除浮点数的更好方法之一，但是您也可以使用clear div（clear{clear:both；}

并在每行末尾添加

，而不是隐藏溢出），或者使用更为粗糙的clearfix方法