導航欄問題 - 步驟形成

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; 
} 

Link to running example