我正在开展以下项目:
/* 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>
&#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
的情况下解决问题?
答案 0 :(得分:3)
.dropdown-content a:hover {
background-color: #f1f1f1;
}
从.dropdown-content a:hover
删除这些行使其正常工作
padding-top: initial;
padding-bottom: initial;
答案 1 :(得分:1)
我认为您可以为下拉元素.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>