Question

我正在尝试为我的网站制作一个下拉菜单（http://www.imsev.com），我无法弄清楚如何让我的菜单放入CSS中。导航栏的JSFiddle。

这是导航栏的HTML。

<div style="background-color:#FFF; z-index:5; height:auto; width:auto;">
<div id="header">
             <a href="index.html"><img id="nav_img" src="graphics/nav_img.svg" height="122" width="201" alt="Lanier Canoe and Kayak Club logo"/></a>
        <div id="nav_bar" style:"color:#FFF;">
            <header id="title">Lanier Canoe and Kayak Club</header>
            <nav>
            <ul id="nav_words">
            <a href="#" id="menu_item"><li class="selected items">Home</li></a>
            <a href="#" id="menu_item"><li class="items">About Us</li></a>
                    <ul>
                        <li><a href="#">Board Of Directors</a></li>
                        <li><a href="#">Coaches and Staff</a></li>
                        <li><a href="#">Sponsors</a></li>
                     <li><a href="#">Contact Us</a></li>
                    </ul>
            <a href="#" id="menu_item"><li class="items">Events</li></a>
                    <ul>
                        <li><a href="#">Polar Bear Swim</a></li>
                        <li><a href="#">Lula Bridge Race</a></li>
                        <li><a href="#">Southeast Paddle Sport - Kayak Trader Challenge</a></li>
                     <li><a href="#">USACK Collegiate Nationals & Spring Sprints</a></li>
                     <li><a href="#">Paddlethon and Cardboard Boat Race</a></li>
                     <li><a href="#">Gainesville-Hall Dragon Boat Challenge</a></li>
                     <li><a href="#">Southern Invitational Regatta</a></li>
                     <li><a href="#">USACK Sprint National Championschip</a></li>
                     <li><a href="#">Halloween Howl</a></li>
                    </ul>
            <a href="#" id="menu_item"><li class="items">Programs</li></a>
                    <ul>
                        <li><a href="#">Recreational Membership</a></li>
                        <li><a href="#">Summer Camp</a></li>
                        <li><a href="#">BBI Jr. Olympic Program</a></li>
                     <li><a href="#">Six Weeks to Nationals</a></li>
                     <li><a href="#">Adult Learn to Kayak</a></li>
                     <li><a href="#">Rentals</a></li>
                     <li><a href="#">Moonlight Paddles</a></li>
                     <li><a href="#">Dragon Boat</a></li>
                     <li><a href="#">Competitive Programs (Kids and Adults)</a></li>
                    </ul>
            <a href="#" id="menu_item"><li class="items login">Log In</li></a>
            </ul>
            </nav>
        </div>
</div>

这是Active CSS

#title {
    float: left;
    vertical-align: middle;
    padding-top: 13px;
    margin-top: 0px;
    left: 0px;
    padding-left: 136px;
    font-size: 25px;
    font-family: 'Carrois Gothic', sans-serif;
}

#header_img{
    border: none;
    margin: 0 auto;
    display: block;
    z-index: -10;
    position: relative;
    top: 1px;
}
#header {
    width: 100%;
    height: 150px;
    padding-bottom:20px;
    color:white;
    position:static;
}
#nav_bar {
    height: 56.088px;
    width: 88%;
    background-color: #629B5D;
    z-index: 2;
    position: absolute;
    left: 120px;
    border-top: 68px solid white;      /* Added. */
    top: 0;                         /* Added. */
}
#nav_img {
    z-index: 3;
    position: absolute;
    top: 15px;
    left: 37px;
}

#nav_words {
    display: inline;
    padding-top: 0px;
    float: right;
    padding-left: 0px;
    padding-right: 0px;
    margin-right: 0px;
    margin-left: 0px;
    vertical-align: middle;
    margin-top: 15px;
}

#nav_words a {
    text-decoration:none;
}

 .items {
    display: inline;
    padding-top:5px;
    vertical-align: middle;
    margin-right: 25px;
    font-family: 'Carrois Gothic', sans-serif;
    list-style-type:none;
} 

#nav_words a {
    color: #FFF;
    background-color: #629B5D;
    font-size:18px;
}

#menu_item :hover {
    color: #D4D4D4;
    opacity: 75%;
}

.login {
    border: solid 1px;
    border-radius: 50px;
    padding: 4px;
    background-color:#7DC476;
    border-color:#7DC476;
}

 .login :hover {
    background-color: #7DC476;
    border-color: #9FD39A;
}



 .selected {
    border: solid 1px #92CD8D;
    background-color: #92CD8D;
    padding: 18px 5px;
    margin-right:10px;
}
`

Answer 1

HTML中存在错误。不要使用ID来引用具有相同ID的多个项目;改用类。

如何让这个导航栏下拉？

1 个答案: