Html 导航栏超出内容限制，溢出y显示

我的网站上有一个导航栏。其中导航

内容超过了所需的限制，我希望其余内容以overflow-y显示

但问题在于将鼠标悬停在内容下方，它会显示内容（必须是由于固定了最小高度）

这是代码和

    <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>

请为此建议任何可缩放的解决方案，如果可能，请删除默认滚动条

谢谢
您的代码不是很好，因为您将4个li标记声明为id='main'，这些应该是一个类，因为id在页面上是唯一的

如果您只想从菜单3中删除滚动条，则需要添加
'溢出：可见；'到您的联机脚本

不过，我也会将此内联代码移到样式表中

我已经把你的信息更新到我认为你想要的

css:

html:

























\














请在问题中包含您的代码。当您试图提交问题时，您收到一条关于放置JSFIDLE链接的消息是有原因的……您需要提供代码！我在我的网站上使用的是sass。我刚刚用css和html在JSFIDLE中创建了一个管理单元。@ConfusedShark-我不关心导航栏。问题是我只想显示固定高度的下拉列表（比如200px）。在200px之后，任何其他超出的项目都必须显示在overflow-y滚动条下。我想固定导航栏的高度。。
/* 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 */

#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 */

.main { min-height:300px; overflow:visible;}

        <div id="centernav">
    <div id="dropnav">
        <ul>

            <li class="main">
            <a href="#">Menu Item 1</a>

            </li>

            <li class="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 class="main">
            <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 class="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>