Question

我的下拉菜单出了问题。我认为麻烦来自溢出：隐藏;我没有看到下拉菜单的子菜单。我使用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>

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，这有助于清除浮点数，它还可以隐藏任何落在行和容器之外的内容。不可否认，这是清除浮动的更好方法之一，但是你也可以使用clear div来做（.clear{clear:both;}并在每行的末尾添加<div class="clear"></div>，而不是隐藏溢出），或者更糟糕的clearfix方法http://css-tricks.com/snippets/css/clear-fix/

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

1 个答案: