我正在尝试使用无序列表创建一个基本的导航栏,但由于某种原因,我无法让子弹消失.
我已经寻找在谷歌的解决方案,对我好像应该是工作,但我想我可能会搞乱的东西是不相关的UL的风格,又防止UL风格被应用.
这是相关的html:
<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="example.html">Examples</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
Run Code Online (Sandbox Code Playgroud)
这是CSS:
#nav ul
{
list-style-type: none;
position: absolute;
top: 10px;
right: 0;
margin: 0;
padding: 0;
}
#nav ul li
{
float: left;
}
#nav ul li a
{
display: inline;
float: left;
padding: 8px 5px 3px 5px;
margin-right: 5px;
background-color: #034a7f;
color: #fff;
font-weight: bold;
text-decoration: none;
}
#nav ul li a:hover
{
padding-top: 12px;
background-color: #075a97;
}
Run Code Online (Sandbox Code Playgroud)