我正在尝试在 HTML 文档中创建两个导航菜单。我正在使用nav
和ul
标签。但是我的 CSS 不允许我为两者创建不同的外观。一个nav
将在页面顶部,第二个将在侧面。外观正在旁边的菜单上。
这是 HTML 的相关部分:
<div id="navbar">
<nav id="navbar_text">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
</ul>
</nav>
</div> <!--END navbar-->
<div id="main-wrap" class="group">
<aside>
<nav id="sidebar">
<ul>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="#">Awards & Articles</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Photo Gallery</a></li>
</ul>
</nav>
这是我的CSS:
#sidebar a:link{
color: #663333;
}
#sidebar a:hover{
color: #dccfbd;
}
#navbar_text a:link{
color: #bca380;
}
#navbar_text a:hover{
color: #dccfbd;
}
#navbar_text{
width: 100%;
float: left;
}
#navbar_text li {
float: left;
list-style: none;
padding: 0;
background: #663333;
margin: 0;
color:#bca380;
}
nav ul li a {
display: block;
padding: 10px 10px 10px 15px;
background: #cab69a;
-webkit-border-radius: 8px 0px 0px 8px;
border-radius: 8px 0px 0px 8px;
margin-top: 10px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 120%;
font-weight: bold;
color: #663333;
text-decoration: none;
-webkit-box-shadow: 2px 2px 1px 2px rgba(181, 154, 115, .25);
box-shadow: 2px 2px 1px 2px rgba(181, 154, 115, .25);
}
nav ul {
list-style:none;
}