下拉菜单不稳定

Question

我正在开展以下项目：

＆＃13;

＆＃13;

/* 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 {
	}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

一切正常，但是当我实施了下拉菜单时，当我尝试将鼠标悬停在下拉列表Men和Women时，我就开始出现错误。我认为这是由于padding-top应用于.header-two-bars .header-second-bar nav a:hover

我也不想删除它，因为其他按钮Blog，Promo需要它。

如何在不移除padding-top处应用的.header-two-bars .header-second-bar nav a:hover的情况下解决问题？

Answer 1

.dropdown-content a:hover {
    background-color: #f1f1f1; 
}

从.dropdown-content a:hover删除这些行使其正常工作

padding-top: initial; 
padding-bottom: initial;

Answer 2

我认为您可以为下拉元素.dropdown:hover .dropdown-content a { padding: 12px 16px;}添加以下css 请看更新的小提琴，希望这会有所帮助

/* 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>