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横向菜单的显示列表子弹

回答

相关问题