Lei Lionel Lei Lionel - 6 months ago 58
HTML Question

Dropdown menu not stable

I am working on the following project:



/* Second Bar */

.header-two-bars .header-second-bar {
background-color: #ffffff;
box-shadow: 1px 3px 3px 0 rgba(0, 0, 0, 0.05);
padding: 20px 40px;
}

.header-two-bars .header-second-bar nav {

font:14px Arial, Helvetica, sans-serif;
}

.header-two-bars .header-second-bar nav a{
display: inline-block;
color: #4e5359;
text-decoration: none;
padding-left: 12px;
padding-right: 12px;
}

.header-two-bars .header-second-bar nav a:hover{
border-radius: 2px;
background-color: #2B5773;
padding-top:8px;
padding-bottom: 8px;
color: white;
opacity: 0.7;
}

.header-two-bars .header-second-bar nav a.selected{
border-radius: 2px;
background-color: #2B5773;
padding: 8px 12px;
color: white;
}

.clear {
clear: both;
}

/*Dropdown menu*/
.dropbtn {
cursor: pointer;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
margin-top: 0px;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99;

}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
width: inherit;
}

.dropdown-content a:hover {
background-color: #f1f1f1;
padding-top: initial;
padding-bottom: initial; }

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropbtn {
}

<div class="header-second-bar">
<div class="header-limiter">
<nav>
<span class="dropdown">
<a href="#" class="dropbtn">Home</a>

<div class="dropdown-content">
<a href="#" style="display: block;">Men</a>
<a href="#" style="display: block;">Women</a>
</div>
</span>

<a href="#" style="color: pink;">Blog</a>
<a href="#" style="color: pink;">Promo</a>
</nav>
<div class="clear"></div>
</div>
</div>





Everything was working fine, but when I implemented the dowpdown menu, I start having a bug when I tried to hover the dropdown list
Men
and
Women
. I think it is due to the
padding-top
applied to
.header-two-bars .header-second-bar nav a:hover


I also don't want to remove it because the others button
Blog
,
Promo
need it.

How can I solve the problem without removing the
padding-top
applied at
.header-two-bars .header-second-bar nav a:hover
?

Answer

I think you can add the below css for dropdown elements .dropdown:hover .dropdown-content a { padding: 12px 16px;} Please see the updated fiddle, hope this will help

/* Second Bar */

.header-two-bars .header-second-bar {
	background-color: #ffffff;
	box-shadow: 1px 3px 3px 0 rgba(0, 0, 0, 0.05);
	padding: 20px 40px;
}

.header-two-bars .header-second-bar nav {

	font:14px Arial, Helvetica, sans-serif;
}

.header-two-bars .header-second-bar nav a{
	display: inline-block;
	color: #4e5359;
	text-decoration: none;
	padding-left: 12px;
	padding-right: 12px;
}

.header-two-bars .header-second-bar nav a:hover{
	border-radius: 2px;
	background-color: #2B5773;
	padding-top:8px;
	padding-bottom: 8px;
	color: white;
	opacity: 0.7;
}

.header-two-bars .header-second-bar nav a.selected{
	border-radius: 2px;
	background-color: #2B5773;
	padding: 8px 12px;
	color: white;
}

.clear {
	clear: both;
}

/*Dropdown menu*/
.dropbtn {
	    cursor: pointer;
	}

	.dropdown {
	    position: relative;
	    display: inline-block;
	}

	.dropdown-content {
	    display: none;
    	margin-top: 0px;
	    position: absolute;
	    background-color: #f9f9f9;
	    min-width: 160px;
	    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	    z-index: 99;

	}

	.dropdown-content a {
	    color: black;
	    padding: 12px 16px;
	    text-decoration: none;
	    width: inherit;
	}

	.dropdown-content a:hover {
		background-color: #f1f1f1;
	   padding-top: initial; 
    padding-bottom: initial; }

	.dropdown:hover .dropdown-content {
	    display: block;
	}
         
    .dropdown:hover .dropdown-content a { padding: 12px 16px;}
	.dropdown:hover .dropbtn {
	}
<div class="header-second-bar">
			<div class="header-limiter">
				<nav>
					<span class="dropdown">
						<a href="#" class="dropbtn">Home</a>

						<div class="dropdown-content">
							<a href="#" style="display: block;">Men</a>
							<a href="#" style="display: block;">Women</a>
						</div>
					</span>
                  
					<a href="#" style="color: pink;">Blog</a>
					<a href="#" style="color: pink;">Promo</a>
				</nav>
				<div class="clear"></div>
			</div>
		</div>

Comments