CSS橫向菜單的顯示列表子彈

-1

#menu { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: block; 
 
    overflow: auto; 
 
} 
 

 
#menu li { 
 
    margin: 1px; 
 
    padding: 0; 
 
    float: left; 
 
} 
 

 
#menu li a { 
 

 
    display: block; 
 
    padding: 2px; 
 
    padding-left : 15px; 
 
    padding-right: 15px; 
 
    
 
    font-family: "Tahoma"; 
 
    font-size: 18px; 
 
    color: #8f8b20; 
 
    text-decoration : none; 
 
} 
 

 
#menu li a:hover { 
 

 
    background-color: #dad68c; 
 
    
 
    padding: 2px; 
 
    padding-left : 15px; 
 
    padding-right: 15px; 
 
} 
 

 
#menu li a:active { 
 
    color: #ffffff; 
 
    background-color: #dad68c; 
 
    
 
    padding: 2px; 
 
    padding-left : 15px; 
 
    padding-right: 15px; 
 
}

<ul id="menu"> 
 
<li><a href="#">Home</a></li> 
 
<li><a href="#">Foods</a></li> 
 
<li><a href="#">Gallery</a></li> 
 
<li><a href="#">Site Map</a></li>    
 
<li><a href="#">About us</a></li> 
 
    <li><a href="#">Contact us</a></li> 
 

 
</ul>

對於這是工作的罰款上的jsfiddle但是當我在我的網站上使用它的水平CSS菜單。。它給我的名單的子彈，請參閱下面的圖像....

alt text

如何獲得這些子彈

F1F1

幫助RID！

任意鍵

來源

2010-10-19 Moon

修改此風格：

#menu li { 
    margin: 1px; 
    padding: 0; 
    float: left; 
}

像這樣：（您缺少list-style屬性）

#menu li { 
    margin: 1px; 
    padding: 0; 
    float: left; 
    list-style:none; // this should remove the bullets 
}

更多信息：

http://www.w3schools.com/CSS/pr_list-style-type.asp

來源

2010-10-19 18:43:47 Sarfraz

這是簡單的道理:)，jsFiddle使用[reset-css]（http://developer.yahoo.com/yui/3/cssreset/）我相信，所以這就是爲什麼你沒有看到任何子彈那裏！該重置將刪除所有默認瀏覽器設置。 – 2010-10-19 18:45:31

@Justus Romijn：真的，我應該提到，在我的答案，但謝謝你補充說:) – Sarfraz 2010-10-19 18:47:28

+1爲w3schools的參考。偉大的參考網站！ – 2010-10-19 19:16:35

你試過列表樣式？

ul { 
     list-style: none; 
     ... 
     ... 
}

來源

2010-10-19 18:45:25

這將適用於所有'ul'元素:) – Sarfraz 2010-10-19 18:48:20

當然，這只是一個如何使用列表樣式的例子。 :)他可以將範圍縮小到特定的ID或類，就像你在答案中做的一樣。 – 2010-10-19 18:53:53

的CSS代碼缺少規則ul設置list-style: none

來源

2010-10-19 18:46:19 Xint0

您需要通過添加list-style: none;到#menu覆蓋默認<li>風格。添加到#menu li將具有相同的效果，但需要3個額外的字符。 :)

jsFiddle看起來很好的原因是他們應用於整個頁面的CSS正在爲您處理。

閱讀更多關於list-style-type和短程list-style（以上使用）。

來源

2010-10-19 18:53:44 keirog

CSS橫向菜單的顯示列表子彈

回答

相關問題