Removing scrollbar from horizontal navigation with a dropdown menu

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">
			    	<a  href="about.html" class="navLink">About</a>
				    <ul class="sub_menu">
				    	<li class="sub_item">
					    	<a href="#" class="sub_navLink">Location</a>
					    </li>
					    <li class="sub_item">
					    	<a href="#" class="sub_navLink">History</a>
					    </li>
					    <li class="sub_item">
						<a href="#" class="sub_navLink">Community Involvement</a>
					    </li>
					    <li class="sub_item">
						    <a href="#" class="sub_navLink">Leadership</a>
					    </li>
				    </ul>
			    </li>
			    <li class="item"><a  href="services.html" class="navLink">Services</a></li>
		    	<li class="item"><a  href="projects.html" class="navLink">Projects</a></li>
			    <li class="item"><a  href="blank1.html" class="navLink">Blank</a></li>
			    <li class="item"><a  href="blank2.html" class="navLink">Blank</a></li>
		    	<li class="item"><a  href="contact-us.html" class="navLink">Contact</a></li>
		    </ul>
	    </nav>

please make a fiddle... to make things clear... we do not see how it goes only with code... — Julo0sS
– Julo0sS, Commented Mar 9, 2015 at 18:29

Community · Accepted Answer · 2017-05-23 11:46:04Z

0

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/

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Mar 10, 2015 at 9:19

Julo0sS

2,0825 gold badges31 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hunter Etheridge Over a year ago

I'm trying to make this only using CSS, even with removing overflow: auto; it has a scroll bar. If i remove the scroll bar using overflow: hidden; I can't use my navigation.

Collectives™ on Stack Overflow

Removing scrollbar from horizontal navigation with a dropdown menu

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related