HTML导航栏仅适用于页面左侧

时间:2014-02-14 18:38:15

标签: html css

我正在建立一个网站,我需要有关我正在设计的导航栏的帮助。这是我的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;
}

导航栏显示没有任何问题,但每当我将鼠标悬停在位于页面主体列上的超链接时,它似乎不会选择超链接。换句话说,悬停仅适用于页面的两侧,但不适用于主列。我想知道这里有什么问题,以及如何使超链接起作用。

0 个答案:

没有答案