【发布时间】：2014-09-29 06:35:03
【问题描述】：
我的网站上有一个导航栏。导航栏是content exceed a desired limit，我希望其余内容显示在overflow-y 中。
但问题在于将鼠标悬停在内容下方，它会显示内容（必须是由于修复了最小高度）。
这是代码和FIDDLE
<div id="centernav">
<div id="dropnav">
<ul>
<li id="main">
<a href="#">Menu Item 1</a>
</li>
<li id="main">
<a href="#">Menu Item 2</a>
<ul id="subnav">
<li><a href="#">sub menu item 1</a></li>
<li><a href="#">sub menu item 2</a></li>
<li><a href="#">sub menu item 3</a></li>
<li><a href="#">sub menu item 4</a></li>
</ul>
</li>
<li id="main" style="overflow-y:auto; overflow-x:hidden; min-height:300px;>
<a href="#">Menu Item 3</a>
<ul id="subnav">
<li><a href="#">sub menu item 1</a></li>
<li><a href="#">sub menu item 2</a></li>
<li><a href="#">sub menu item 3</a></li>
<li><a href="#">sub menu item 2</a></li>
<li><a href="#">sub menu item 2</a></li>
<li><a href="#">sub menu item 2</a></li>
<li><a href="#">sub menu item 2</a></li>
<li><a href="#">sub menu item 2</a></li>
<li><a href="#">sub menu item 2</a></li>
<li><a href="#">sub menu item 2</a></li>
<li><a href="#">sub menu item 2</a></li><li>\
<a href="#">sub menu item 2</a></li>
<li><a href="#">sub menu item 2</a></li>
<li><a href="#">sub menu item 4</a></li>
</ul>
</li>
<li id="main">
<a href="#">Menu Item 4</a>
<ul id="subnav">
<li><a href="#">sub menu item 1</a></li>
<li><a href="#">sub menu item 2</a></li>
<li><a href="#">sub menu item 3</a></li>
<li><a href="#">sub menu item 4</a></li>
</ul>
</li>
</ul>
</div>
</div>
CSS
/* Derived from http://www.devinrolsen.com/pure-css-horizontal-menu/ */
#pagebody {
position: inherit !important;
width: 100%;
}
/* DO NOT EDIT */
#pagebody-inner {
position: inherit !important;
width: 100%;
}
/* DO NOT EDIT */
#alpha, #beta, #gamma, #delta {
display: inline;
/* DO NOT EDIT */
position: inherit !important;
/* DO NOT EDIT */
float: left;
/* DO NOT EDIT */
min-height: 1px;
/* DO NOT EDIT */
}
#centernav {
width: 900px;
/* if you want your nav centered, set this to the width of your container, if you don't want it centered, change this number to 100% */
margin-left: auto;
margin-right: auto;
}
#dropnav {
height:25px;
background:#999;
}
/* Changes the height and bg color of the main menu */
#dropnav ul {
margin:0px;
padding:0px;
}
#dropnav ul li {
display:inline;
float:left;
list-style:none;
margin-left:15px;
position:relative;
height:25px;
width: 150px;
}
/* only edit the last 2 items - sets the width of the main menu */
#dropnav li a {
color:#FFF;
text-decoration:none;
}
/* Changes the link color of items on the main menu */
#dropnav li a:hover {
color:#900;
text-decoration:none;
}
/* Changes the hover color of items on the main menu */
#dropnav li ul {
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
z-index: 99;
top:25px;
background-color:#CCC;
}
/* Only edit the last 2 items - set the top margin and background color of the submenus */
#dropnav li:hover ul {
display:block;
width:150px;
}
/* sets the width of the submenus */
#dropnav li li {
list-style:none;
display:list-item;
}
/* DO NOT EDIT */
#dropnav li li a {
color:#000;
text-decoration:none;
}
/* Changes the link color of items in the submenu */
#dropnav li li a:hover {
color:#900;
text-decoration:none;
}
/* Changes the hover color of items in the submenu */
li#main {
padding-top: 2px;
}
/* Sets the padding of items in the main menu */
请为此建议任何可扩展的解决方案，并尽可能删除默认滚动。
谢谢
【问题讨论】：
-
请在问题中包含您的代码。
-
当您尝试提交您的问题时，您收到一条关于向 jsfiddle 提供链接的消息是有原因的...您需要提供代码！
-
我在我的网站中使用 sass。刚刚在 Jsfiddle 中使用 css 和 html 进行了快照。