2

HTML ドキュメントに 2 つのナビゲーション メニューを作成しようとしています。navとulタグを使用しています。しかし、私の CSS では、両方に異なる外観を作成することはできません。1 つnavはページの上部にあり、2 つ目は横にあります。外観は横のメニューにかかっています。

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

このデモを試してください:

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 に答える