Question

因此，我正在处理我正在处理的网站的导航问题。我希望导航有一个设定的高度，但我也希望下拉菜单。在过去的9个小时里，我已经尝试过所有这些工作，但是没有用。

我需要导航不要像这里显示的那样换行： http://jsfiddle.net/88fYK/482/

CSS：

.top_nav {
    background-image: url('images/navbg.gif');white-space:nowrap;
    height:32px;
    }

.top_nav #menu{
height:32px;
    overflow:hidden;
}
.top_nav #menu ul{
float:left;
padding:0;
margin:0;
line-height:30px;

}
.top_nav #menu li{
position:relative;
float:left;
list-style:none;
background:rgba(0,0,0,1);
border-radius:5px;
}
.top_nav #menu ul li ul{
position:absolute;
display:none;
padding:0;
margin:0;
top:30px;
white-space:nowrap;
}
.top_nav #menu ul li a{
text-align:center;
font:"Arial Black", Arial;
font-size:24px;
color:rgba(255,255,255,9);
width:150px;
height:30px;
display:block;
text-decoration:none;

}
.top_nav #menu ul li:hover{
background-color:rgba(128,128,128,1);
text-decoration:none;
}
.top_nav #menu ul li:hover ul{
display:block;
z-index:1;
}
.top_nav #menu ul li:hover ul li a{
background:rgba(0,0,0,9);
z-index:1;
border-bottom:1px solid rgba(160,160,164,1);
opacity:0.9;
text-decoration:none;
border-radius:5px;
}
.top_nav #menu ul li ul li:hover{
background:rgba(128,128,128,1);
opacity:0.8;
text-decoration:underline;
}

HTML：

<div class="top_nav">
<div id="menu">

<ul>
<li><a href="#">Home</a></li> 
<li><a href="#">Video</a>    <!--This is in main menu-->
<ul> 
<li><a href="#">Technology</a></li>    <!--This is in drop downmenu-->
<li><a href="#">Tutorial</a></li>     <!--This is in drop downmenu-->
</ul>
</li>
<li><a href="#">link</a><ul> 
<li><a href="#">sub</a></li>    <!--This is in drop downmenu-->
<li><a href="#">sub</a></li>     <!--This is in drop downmenu-->
</ul></li> 
<li><a href="#">link</a><ul> 
<li><a href="#">sub</a></li>    <!--This is in drop downmenu-->
<li><a href="#">sub</a></li>     <!--This is in drop downmenu-->
</ul></li> 
<li><a href="#">link</a></li> 
<li><a href="#">link</a></li> 
<li><a href="#">link</a></li> 
<li><a href="#">link</a></li> 
<li><a href="#">link</a></li> 
<li><a href="#">link</a></li> 
<li><a href="#">link</a></li> 

</ul></div></div>

但我需要下拉菜单才能像这里显示的那样工作： http://jsfiddle.net/88fYK/484/ （与删除'溢出：隐藏;'相同）

主要的主要问题是：导航包装（我不能这样）或者下拉菜单不起作用（我需要它们）

我需要以某种方式“忽略”任何会导致导航换行的链接。我已经尝试了每一个浮动，位置，清除那里，我似乎无法得到任何工作。

非常感谢任何帮助。

Answer 1

所以，我所做的只是添加了

.top_nav #menu>ul>li {
    display: inline-block;
}

并移除了几个花车。

演示：http://jsfiddle.net/xaqzvevf/

PS：CSS声明会选择父级为li的所有ul个元素，其父级为#menu。

导航要么被溢出剪切：隐藏或包装没有它

1 个答案: