我正在建立一个网站,我需要有关我正在设计的导航栏的帮助。这是我的HTML代码:
<ul class="Body-P">
<nav><ul>
<li><a href="index.html">Home</a></li>
<li><a href="salon.html">Notre Salon</a></li>
<li><a href="gallerie.html">Gallerie Photo</a></li>
<li><a href="horaires.html">Horaires</a></li>
<li><a href="contact.html">Contact</a></li>
</ul></nav>
</ul>
随之而来的CSS:
.Body-P nav{
background-color: #1E1E1E;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.Body-P nav ul{
list-style:none;
margin: 0 auto;
}
.Body-P nav ul li {
float:left;
display:inline;
}
.Body-P nav a:link, .Body-P nav a:visited {
color: #FFF;
display: inline-block;
padding: 10px 25px;
height: 20px;
text-decoration: none;
font-family: Arial, 'Lucida Sans Unicode';
}
.Body-P nav a:hover, Body-P nav a:active, Body-P nav .active a:link, Body-P nav .active a:visited {
background-color:#4A3E25;
text-shadow: none;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.Body-P nav ul li a{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
导航栏显示没有任何问题,但每当我将鼠标悬停在位于页面主体列上的超链接时,它似乎不会选择超链接。换句话说,悬停仅适用于页面的两侧,但不适用于主列。我想知道这里有什么问题,以及如何使超链接起作用。