2

我正在尝试在 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;
}
4

2 回答 2

0

如果您希望#navbar_text和#sidebar导航菜单的样式不同，您必须在 CSS 中具体指定您希望每个菜单的外观。

因此，您可以使用类似...

#navbar_text ul {}
#navbar_text ul li {}
#navbar_text ul li a {}
#navbar_text ul li a:hover {}

#sidebar ul {}
#sidebar ul li {}
#sidebar ul li a {}
#sidebar ul li a:hover {}

基本上，不要说得太笼统......

nav ul li a {}

因为这将设置两个菜单的样式，因为它们都使用相同的属性。

如果您正在寻求关于这两个菜单定位而不是外观的帮助，您将必须提供一些有关它们当前所在位置以及您希望它们在哪里的更多信息。但是我上面提到的示例可能会帮助您定位，您只需要具体说明您希望#sidebar 菜单以某种方式定位，而#navbar_text 以不同方式定位。

例如...

#navbar_text ul {
    *add position styles here*
}

#sidebar ul {
    *add position styles here*
}
于 2013-08-03T05:24:25.657 回答
0

试试这个演示：

http://jsfiddle.net/pSkua/6/

CSS

  body {
    margin: 0;
    padding: 0;
}
aside {
    position: absolute;
    right: 0;
}
#slidebar ul {
    margin: 0;
    padding: 0;
}
#slidebar li {
    display: block;
}
#slidebar a {
    display: inline-block;
}
#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%;
    margin: 0;
    padding: 0;
}
#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;
    margin: 0;
    padding: 0;
}
.clr_both{
    clear:both;
}
于 2013-08-03T05:36:01.593 回答