My website has a navigation bar with content that exceeds the desired limit, and I want the rest of the content to be shown in overflow-y.
However, an issue arises when hovering over the content, as the content is displayed (likely due to fixing min-height).
Below is the code snippet and a FIDDLE for reference:
<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>
...
</ul>
</div>
</div>
CSS
/* CSS Styles */
#pagebody {
position: inherit !important;
width: 100%;
}
#pagebody-inner {
position: inherit !important;
width: 100%;
}
#alpha, #beta, #gamma, #delta {
display: inline;
position: inherit !important;
float: left;
min-height: 1px;
}
#centernav {
width: 900px;
margin-left: auto;
margin-right: auto;
}
...
If you have any suggestions for a scalable solution and, if possible, a way to remove the default scroll, please let me know.
Thank you!