我需要在 ul li
的背景上添加一些悬停效果。
图片:
HTML
<div id="topnav">
<ul class="nav clearfix">
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-25">
<a href="http://localhost/">Home</a>
</li>
<li id="menu-item-45" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-45">
<a href="http://localhost/">Menu2</a>
</li>
<li id="menu-item-98" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-98">
<a href="http://localhost/">Menu3</a>
</li>
<li id="menu-item-96" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-96">
<a href="http://localhost/">Menu4</a>
</li>
<li id="menu-item-97" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-97">
<a href="http://localhost/">Menu5</a>
</li>
</ul>
<div>
CSS
#topnav {
font-size: 8pt;
font-weight: bold;
margin-top: 2%;
border: 1px solid #DDDDDD;
float: left;
font-size: 8pt;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 7% !important;
opacity: 0.8;
padding: 0;
width: 60%;
}
#topnav ul {
line-height: 1;
list-style: none outside none;
margin: 0;
padding: 0;
display: block;
}
#topnav ul li {
float: left;
width: auto;
margin:10px;
}
#topnav ul {
line-height: 1;
list-style: none outside none;
}
最佳答案
是这样的:jsfiddle.net/kaGvs/5 ? :)
你可以给“a”标签一个负边距和边框,它们应该相互抵消。
#topnav ul li a {
border-top: 15px solid transparent;
border-bottom : 15px solid transparent;
margin: -25px 0;
display:block;
line-height: 30px;
}
#topnav ul a:hover, #topnav ul ul a:hover {
color: #0A0A0A;
background-color: #CBBBA1;
border-color: white;
}
关于jquery - 悬停/选定的菜单显示背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16029968/