br無效ul

我在我的網站上有一個導航欄。br無效ul

的HTML：

<nav id="navigation"> 
<a href="index.html"> <h1>My Cooking Webpage</h1> </a> 
<ul> 
    <li> 
     <a href="nav/recipes.html" class="right_categories">Recipes</a> 
    </li> 
    <li> 
     <a href="nav/categories.html" class="right_categories">Categories</a> 
     <ul id="subcategories"> 
      <li> 
       <a href="#">Item 1</a> 
      </li> 

      <li> 
       <a href="#">Item 2</a> 
      </li> 

      <li> 
       <a href="#">Item 3</a> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a href="nav/about.html" class="right_categories">About Us</a> 
    </li> 
</ul> 
</nav>

的CSS：

#navigation { 
font-size: 24px; 
float: right; 
} 
#featured-image { 
    width: 800px; 
    height: 600px; 
} 
.breadcrumb { 
    font-size: 20px; 
} 
#subcategories { 
display: none; 
} 
nav { 
display: block; 
position: relative; 
} 
nav li { 
    display: block; 
    margin-right: 10px; 
    float: right; 
} 
nav li:hover #subcategories { 
display: block; 
} 
nav a { 
color: white; 
} 
nav ul { 
padding: 0px; 
list-style-type: none; 
} 
#featuredtext { 
position: relative; 
} 
#page-background { 
position: fixed; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
} 
#wrapper { 
position: relative; 
z-index: 1; 
    padding: 10px; 
} 
#slider_wrapper { 
    width: 100%; 
    text-align: center; 
} 
#navigation { 
width: 100%; 
}

我DOCTYPE是HTML5（<!DOCTYPE html>）是否有幫助。

的問題是，當我將鼠標懸停在「類別」鏈接，下拉框下降橫向而不是縱向。當我在<li>之間插入<br /> s時，HTML不驗證。

我認爲這是因爲CSS中的float: right;，儘管我試圖用float: none;來糾正它。

有沒有辦法讓它降下來垂直而非水平，或者是有沒有<br />替代。我想通過W3C驗證程序HTML和CSS驗證HTML。

來源

2012-01-06 Anish Gupta

一個<ul>的唯一有效的子元素是一個<li>。使用CSS設置<li>的頂部和底部邊距以填充它們的垂直距離。完全刪除float樣式，使它們顯示爲垂直排列的塊元素。

來源

2012-01-06 19:31:17 lsuarez

怎麼樣？ 'margin'和'padding'是CSS中的兩件事讓我很困惑 – 2012-01-06 19:32:17

Margin爲元素的外部增加了空間。填充添加元素內的空間。 – Scott 2012-01-06 19:33:12

我用'float：none'和一點餘量。謝謝！ – 2012-06-13 15:11:22

nav li { 
    display: block; <-- remove, this is already a block item 
    margin-right: 10px; <-- move to your A tag declaration and also add display:block to your A tag 
    float: right; <-- remove, this is causing it to be horizontal 
}

來源

2012-01-06 19:32:24

您能否在「移動到您的A標籤聲明並將顯示：塊添加到您的A標籤」中澄清您正在談論的是哪個聲明？ – 2012-01-06 19:35:14

這可以幫助：http://preview.moveable.com/JM/ilovelists/ – 2012-01-06 19:38:28

它實際上不工作了，把我右導航幾乎在我的頭頂部。 – 2012-01-06 19:41:33

我優化你的HTML和CSS這樣：

<ul class="menu"> 
    <li class="sub"> 
     <a href="nav/recipes.html" class="right_categories">Recipes</a> 
    </li> 
    <li class="sub"> 
     <a href="nav/categories.html" class="right_categories">Categories</a> 
     <ul id="subcategories"> 
      <li class="sub"> 
       <a href="#">Item 1</a> 
      </li> 

      <li class="sub"> 
       <a href="#">Item 2</a> 
      </li> 

      <li class="sub"> 
       <a href="#">Item 3</a> 
      </li> 
     </ul> 
    </li> 
    <li class="sub"> 
     <a href="nav/about.html" class="right_categories">About Us</a> 
    </li> 
</ul>

CSS：

#ul 
    { 
      margin:0; 
     padding:0; 
    } 

    ul.menu li 
    { 
     display:inline; 
     position:relative; 

    } 

    li.sub > ul 
    { 
     display:none; 
    } 

    ul.menu li.sub:hover > ul 
    { 
     position:absolute; 
     top:100%; 
     left:0; 
     display:block; 
    } 

    ul.menu ul li.sub:hover > ul 
    { 
     position:absolute; 
     top:0; 
     left:100%; 
     display:block; 
    }

現在它是真實的。

來源

2012-01-06 19:46:40

現在我的網站上只顯示背景 – 2012-01-06 19:51:25

這是什麼意思？刪除標記

爲什麼要刪除'

回答

相關問題