Removing scrollbar from horizontal navigation with a dropdown menu - html

Question

I have my horizontal navigation, and one of the links has a dropdown menu. I'm having trouble removing my the vertical scrollbar from my horizontal navigation. Because of this, you have to scroll down to see the dropdown. If I remove the scrollbar, you cannot see the dropdown menu. I've tried to set a height, tried different overflow settings, even z-index.. nothing has worked.
https://jsfiddle.net/83qgv1nb/
nav.mainNav {
margin: 0;
padding: 0;
width: 75%;
float: right;
display: block;
overflow: auto;
}
ul.menu {
margin: 0;
padding: 0;
height: 100px;
overflow-y: visible;
}
li.item {
margin: 0;
padding: 0;
height: 100px;
width: 16%;
position: relative;
float: left;
list-style-type: none;
}
a.navLink {
margin: 0;
padding: 0;
display: block;
text-align: center;
line-height: 95px;
text-decoration: none;
font-weight: bold;
}
<nav class="mainNav">
<ul class="menu">
<li class="item">
About
<ul class="sub_menu">
<li class="sub_item">
Location
</li>
<li class="sub_item">
History
</li>
<li class="sub_item">
Community Involvement
</li>
<li class="sub_item">
Leadership
</li>
</ul>
</li>
<li class="item">Services</li>
<li class="item">Projects</li>
<li class="item">Blank</li>
<li class="item">Blank</li>
<li class="item">Contact</li>
</ul>
</nav>

Answer 1

1st you should remove your
.mainNav{
...
overflow:auto"
...
}
This is clearly what makes your menu "scrollable"!
Here, your "submenu" is always visible... If you're looking for a way to show/hide your submenu then You should use "bootstrap", it's easy and it has lots of examples of dropdown menus.
If you want to make it yourself, then :
Try to identify your dropdown menu item, give it a class or something that allows you to check if user clicks on a dropdown or not.
Then, on "click", do an action that show/hides the next list element. (jquery's got a "toggle()" function made for this kind of job)
On document load, set all your dropdown menus with display:none. To hide them. Then, on click on them, just use toggle() on them, or add them an attribute that makes them visible, such as an "active" class.
here is a short example on how you could handle this with jQuery : https://jsfiddle.net/83qgv1nb/21/
(this is just an example, there are lots of other examples or way to do this, I'm not pretending that my example here is the best way!)
if you do not use jQuery, then just check this link : Using Javascript to hide and show drop down menu and text field
update :
This is what you try to do with css i guess... : https://jsfiddle.net/83qgv1nb/27/