我的菜单悬停链接有问题.我有一个菜单HTML:
<div class="menu">
<ul id="nav">
<li><div><a href="#">HOME</a> <div class="hover"></div></div></li>
<li><div><a href="#">ABOUT</a><div class="hover"></div></div></li>
<li><div><a href="#">PORTFOLIO</a><div class="hover"></div></div></li>
<li><div><a href="#">SERVICE</a><div class="hover"></div></div></li>
<li><div><a href="#">BLOG</a><div class="hover"></div></div></li>
<li><div><a href="#">CONTACT</a><div class="hover"></div></div></li>
</ul>
</div>
Run Code Online (Sandbox Code Playgroud)
CSS:
.menu {
width: 950px;
height: 50px;
float: right;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
margin-top: 80px;
border: 1px #FFF solid;
}
.menu #nav {
list-style: none;
}
.menu #nav li {
display: inline-block;
padding: 0px 30px 0px 30px;
}
.menu #nav li a {
font-family: "Trebuchet MS", Arial, Helvetica, …Run Code Online (Sandbox Code Playgroud)