CODEWITHSUNDEEP
htmlcssmenu
Kaboom
Kaboom

Reputation: 684

Hover in css covering menu above it

I have a menu with a drop down that works nicely but the issue I noticed is if you hover a link with a child element, it opens the menu, but the link then become unclickable on the menu on the bottom half.

<div class="desktop_navigation">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a>
            <ul>
                <li><a href="#">Link 2 child</a></li>
            </ul>
        </li>
        <li><a href="#">Link 3</a></li>
    </ul>
</div>

That's the structure for the menu. The child elements are sub <ul> of the main <li> and then hidden using CSS until their parent <li> is hovered.

The following jFiddle will include all the CSS I am using and a working example of the issue I am currently having:

https://jsfiddle.net/nrzfa49s/

Upvotes: 0

Views: 62

Answers (3)

Michael Coker
Michael Coker

Reputation: 53664

You only want the padding-top for the ul's to be on the parent/top-level menu. Then if you remove the top attribute from the nested menus, they will display after the link in the top-level menu.

.desktop_navigation a {
	color: #ccc;
	text-decoration: none;
	display: inline-block;
	padding: 12px;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}

.desktop_navigation ul li:hover a {
	color: #fff;
	background: #444;
	text-decoration: none;
	display: inline-block;
	z-index: 1002;
	padding: 12px;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}

.desktop_navigation ul li ul li a:link,
.desktop_navigation ul li ul li a:visited,
.desktop_navigation ul li ul li a:active {
	z-index: 1001;
	width: 100%;
	display: block;
	color: #444;
	background: #fff;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}

.desktop_navigation ul li ul li a:hover {
	width: 100%;
	display: block;
	color: #111;
	z-index: 1002;
	background: #ccc;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}

.desktop_navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.desktop_navigation > ul {
  padding-top: 30px;
}

.desktop_navigation ul li {
	display: inline-block;
	position: relative;
	padding: 0;
	margin: 0;
	z-index: 1002;
}

.desktop_navigation ul li ul {
	list-style: none;
	display: none;
}

.desktop_navigation ul li:hover ul {
	display: block;
	position: absolute;
	z-index: 890;
}

.desktop_navigation ul li ul li {
	float: none; 
	position: relative;
	min-width: 180px;
	z-index: 890;
}
					<div class="desktop_navigation">
						<ul>
							<li><a href="#">Link 1</a></li>
							<li>
								<a href="#">Link 2</a>
								<ul>
									<li><a href="#asdf">Link 2 child</a></li>
								</ul>
							</li>
							<li><a href="#">Link 3</a></li>
						</ul>
					</div>

Upvotes: 1

Krystian Borysewicz
Krystian Borysewicz

Reputation: 779

Took some time, but the issue is here:

.desktop_navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-top: 30px; //remove this line
}

Upvotes: 1

zgood
zgood

Reputation: 12571

Your .desktop_navigation ul li ul is inheriting the padding-top: 30px from its parent ul (.desktop_navigation ul) which is covering the parent link (Link 2) making it unclickable.

To fix your problem, update these styles:

.desktop_navigation ul li ul {
    list-style: none;
    display: none;
    padding-top: 0; /*remove the 30px padding*/
}

.desktop_navigation ul li:hover ul {
    display: block;
    position: absolute;
    top: 100%; /*set your top value to be more dynamic based on the height of the parent*/
    z-index: 890;
}

Here is a fiddle demoing this solution.

Normally when you style menus like this it is recommended to use the > when styling menu elements because of the nesting (i.e. .desktop_navigation > ul this will prevent the child ul from inheriting the padding)

Upvotes: 1

Related Questions