我需要submenu
悬停 - 显示在其父menu-device__item
的底部,然后向下移动li
。
因此,在:hover
上,我增加height
的{{1}}。
虽然menu-device__item
它的背景(全高)当然是红色的。
我该如何解决这个问题?
我想我应该更改:animated
的{{1}},但我做不到。
height
submenu
$(document).ready(function(){
var menu = $('.menu-device__menu');
$('.menu__button').click(
function() {
$(this).find(menu).slideToggle('slow');
});
$('.menu-device__item').hover(
function(){
var n = $(this).find('.submenu__item').length;
if (n > 0) {
$(this).height((n + 1) * 35);
} else ( $(this).height(35) );
$(this).find('.submenu').slideDown('slow');
},
function(){
$(this).height(35);
$(this).find('.submenu').slideUp('fast');
});
})
答案 0 :(得分:1)
尝试将background-color
悬停规则声明为嵌套a
元素。
<强>删除强>
/*.menu-device .menu-device__menu .menu-device__item:hover {
background-color: #a90027;
} Don't need this rule declared on the list element */
<强>调整强>
.menu-device .menu-device__menu .menu-device__item:hover .menu__link {
color: #fff;
background-color: #a90027; /* Declare background-color hither! */
}
<强>加强>
.menu-device .menu-device__menu .menu-device__item > a {
display: block;
padding-right: 30px;
}
.menu-device .menu-device__menu .menu-device__item .submenu a {
display: inline-block;
padding: 0px;
}
$(document).ready(function(){
var menu = $('.menu-device__menu');
$('.menu__button').click(
function() {
$(this).find(menu).slideToggle('slow');
});
$('.menu-device__item').hover(
function(){
var n = $(this).find('.submenu__item').length;
if (n > 0) {
$(this).height((n + 1) * 35);
} else ( $(this).height(35) );
$(this).find('.submenu').slideDown('slow');
},
function(){
$(this).height(35);
$(this).find('.submenu').slideUp('fast');
});
})
&#13;
.menu-device {
position: relative;
width: 100%;
height: 95px;
background-color: #FFF;
-webkit-box-shadow: 0px 0px 15px -2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 15px -2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 15px -2px rgba(0, 0, 0, 0.75);
z-index: 1000;
}
.menu-device .menu__button {
text-align: center;
margin-top: 37px;
width: 105px;
height: 58px;
float: right;
}
.menu-device .menu-device__menu {
width: 282px;
border: 1px solid #ddd;
display: none;
position: absolute;
top: 95px;
right: 0;
box-shadow: -3px 0 10px #ababab inset;
}
.menu-device .menu-device__menu .menu-device__item {
background-image: url("../../img/menu_icon.png");
background-position: right center;
background-repeat: no-repeat;
position: relative;
line-height: 35px;
border-bottom: 1px solid #e5e5e5;
background-color: #FFF;
width: 252px;
height: 35px;
float: right;
text-align: right;
}
.menu-device .menu-device__menu .menu-device__item .menu__link {
color: #494949;
text-decoration: none;
font-size: 16px;
}
.menu-device .menu-device__menu .menu-device__item .submenu {
background-color: #FFF;
position: absolute;
left: 0;
top: 35px;
display: none;
}
.menu-device .menu-device__menu .menu-device__item .submenu .submenu__item {
line-height: 35px;
padding-right: 30px;
background-color: #FFF;
width: 252px;
height: 35px;
float: right;
text-align: right;
}
.menu-device .menu-device__menu .menu-device__item .submenu .submenu__item .submenu__link {
font-size: 14px;
text-decoration: none;
color: #494949;
}
.menu-device .menu-device__menu .menu-device__item .submenu .submenu__item:hover {
background-color: #a90027;
}
.menu-device .menu-device__menu .menu-device__item .submenu .submenu__item:hover .submenu__link {
color: #fff;
}
.menu-device .menu-device__menu .menu-device__item:nth-child(1),
.menu-device .menu-device__menu .menu-device__item:nth-child(3),
.menu-device .menu-device__menu .menu-device__item:nth-child(6) {
background-image: none;
}
/*.menu-device .menu-device__menu .menu-device__item:hover {
background-color: #a90027;
} Don't need this rule declared on the list element */
.menu-device .menu-device__menu .menu-device__item:hover .menu__link {
color: #fff;
background-color: #a90027; /* Declare background-color hither! */
}
.menu-device .menu__logo {
position: absolute;
float: left;
width: 135px;
margin-left: 91px;
z-index: 2000;
}
.menu-device .menu__logo img {
margin-top: -20px;
max-width: 100%;
}
/* Added Rules */
.menu-device .menu-device__menu .menu-device__item > a {
display: block;
padding-right: 30px;
}
.menu-device .menu-device__menu .menu-device__item .submenu a {
display: inline-block;
padding: 0px;
}
&#13;
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<nav class="menu-device">
<div class="menu__button">
<a class="menu__pic" href="#"><img src="img/responsive_nav.png" alt="expand"></a>
<ul class="menu-device__menu">
<li class="menu-device__item"><a href="#" class="menu__link">Menu Item</a></li>
<li class="menu-device__item"><a href="#" class="menu__link">Menu Item</a>
<ul class="submenu">
<li class="submenu__item"><a href="" class="submenu__link">Menu Item</a></li>
<li class="submenu__item"><a href="" class="submenu__link">Menu Item</a></li>
<li class="submenu__item"><a href="" class="submenu__link">Menu Item</a></li>
<li class="submenu__item"><a href="" class="submenu__link">Menu Item</a></li>
<li class="submenu__item"><a href="" class="submenu__link">Menu Item</a></li>
<li class="submenu__item"><a href="" class="submenu__link">Menu Item</a></li>
</ul>
</li>
<li class="menu-device__item"><a href="#" class="menu__link">Menu Item</a></li>
<li class="menu-device__item"><a href="#" class="menu__link">Menu Item</a>
<ul class="submenu">
<li class="submenu__item"><a href="" class="submenu__link">Menu Item</a></li>
<li class="submenu__item"><a href="" class="submenu__link">Menu Item</a></li>
</ul>
</li>
<li class="menu-device__item"><a href="#" class="menu__link">Menu Item</a>
<ul class="submenu">
<li class="submenu__item"><a href="" class="submenu__link">Menu Item</a></li>
</ul>
</li>
<li class="menu-device__item"><a href="#" class="menu__link">Menu Item</a></li>
</ul>
</div>
</nav>
&#13;