导航栏问题 - 步骤形成

Question

我的导航栏有问题。加载页面时，有时它会更改为看起来像它的步骤，但是当您刷新时它会恢复正常。我似乎无法找出我做错了什么！请帮忙！！

网站 http://www.pearsonfoods.com.au

<div id="nav">
<a href="index.html" >
<div class="navBlock" style="color:red;"><p>Home</p>
</div>
</a>
<a href="about.html">
<div class="navBlock"><p>About us</p>
</div>
</a>
<a href="where.html">
<div class="navBlock"><p>Where we sell</p>
</div>
</a>
<a href="foods.html">
<div class="navBlock"><p>Our Foods</p>
</div>
</a>
<a href="contact.php">
<div class="navBlock"><p>Contact us</p>
</div>
</a>
</div>

Answer 1

您的标记格式不正确。 <a>是"内联元素"，<div>是"块元素"。块元素不能存在于内联元素中。

导航列表的结构最好是一个简单的无序列表：

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="index.html">About us</a></li>
    <li><a href="index.html">Where we sell</a></li>
</ul>

看？如此清洁:)

将每个<li><a>设置为具有display: block;的块流元素（请注意，这不会影响元素的内联/块语义，严格来说是一种视觉效果），并将float: left;应用于<li>元素。

Answer 2

html

<ul class="nav">
   <li class="current"><a href="index.html">Home</a></li>
   <li> <a href="about.html">About Us</a></li>
   <li> <a href="where.html">Where we sell</a></li>
   <li> <a href="foods.html">Our Foods</a></li>
   <li> <a href="contact.html">Contact Us</a></li>
</ul>​

.css

.nav {
    width: 900px;
    margin: 0 auto;
}
.nav li {
    background-color: rgba(0, 0, 0, 0.72);
    border-radius: 10px 10px 0px 0px;
    width: 180px;
    float:left;
}
.nav li a{
    color:#fff;
    text-decoration:none;
    text-align:center;
    line-height:50px;
    display:block;
}
.nav li a:hover,.nav li.current a{
    color:red;
}

链接到运行示例