Question

我的下拉菜单无效！它适用于Jsfiddle而不是现实生活中......哈哈。我对这一切都很陌生。我希望这不是一个愚蠢的问题。我试图找到解决方案，但没有看到一个按照我想要的方式工作。

<!DOCTYPE html>

    <html>
        <head>
            <title>Home - Joe </title>
            <link rel="stylesheet" type="text/css" href="home.css"/>
            <script src="Home.js" type="text/javascript"></script>
        </head>
        <body>
            <div id="header">
                <ul id="nav">
                    <li> <a href="index.html"> Home </a></li> <!-- menu-->
                    <li> <a href="music.html"> Music </a></li>
                        <ul class="dropdown">
                            <li><a href="#">Albums</a></li> <!-- drop down list-->
                            <li><a href="#">Downloads</a></li>
                            <li><a href="#">Videos</a> </li>
                        </ul>
                    <li> <a href="Portfolio.html"> Portfolio </a></li>
                        <ul class="dropdown">
                            <li><a href="#">Photography</a></li>
                            <li><a href="#">Designs</a></li>
                            <li><a href="#">Webpages</a> </li>
                        </ul>
                    <li> <a href="About.html"> About </a></li>
                        <ul class="dropdown">
                            <li><a href="#">Biography</a></li>
                            <li><a href="#">Interests</a></li>
                            <li><a href="#">Goals</a> </li>
                        </ul>
                    <li> <a href="Contact.html"> Contact </a></li>
                </ul>
            </div>


            <div id="ContentLeft">  
            </div>
            <div id="ContentBottom">
            </div>
        </body>
    </html>

CSS：

body {
        color: #666;
        text-align: left;
        margin: 0px;
        font-family: Roboto;
        font-weight: lighter;
    }

#header {
    width:100%;
    height:20px;
    background:#333;
    border-bottom:1px solid #000;
    padding: 5px 5px 5px 0px;
}

.dropdown{
    display:none;
    list-style-type:none;
    background:#333;
}


#nav {
    list-style-type: none;
    margin-top: 0px;
    margin-left:-30px;
    background:#333;
    float:left;

}   

#nav li {
    padding:0px 10px 0px 10px;
    float:left;
}

#nav li a {
    color: #666;
    text-decoration: none;
}

#nav li a:hover {
     color: #CCC;
}
#nav li:hover ul{
    display:block;
    position: absolute;
    margin: 0px 0px 0px -10px;
    padding:0;
    text-align: left;
}

#nav li:hover li{
    float:none;
     background:#333;
}

#nav li a:active {
     color: #FFF;
}

http://jsfiddle.net/WwuRK/＆lt; ---我希望它像这样工作。

Answer 1

您需要将<ul> 包裹在 <li>中。在您当前的示例中，您正在执行以下操作：

<body>
    <div id="header">
        <ul id="nav">
            <li> <a href="index.html"> Home </a></li> <!-- menu-->
            <li> <a href="music.html"> Music </a></li>
                                                    ^----------- remove
                 <ul class="dropdown">
                     <li><a href="#">Albums</a></li> <!-- drop down list-->
                     <li><a href="#">Downloads</a></li>
                     <li><a href="#">Videos</a> </li>
                </ul>
            </li> <-------- add removed </li> here
            <li> <a href="Portfolio.html"> Portfolio </a></li>
                                                           ^----------- remove

删除标记并在 ul.dropdown之后添加。

以下是您当前代码的演示（不工作）： http://jsfiddle.net/dirtyd77/WwuRK/4/

以下是您的代码的更新版本：

<div id="header"> <ul id="nav"> <li> <a href="index.html"> Home </a></li>  <li> <a href="music.html"> Music </a> <ul class="dropdown"> <li><a href="#">Albums</a></li>  <li><a href="#">Downloads</a></li> <li><a href="#">Videos</a> </li> </ul> </li> <li> <a href="Portfolio.html"> Portfolio </a></li> <ul class="dropdown"> <li><a href="#">Photography</a></li> <li><a href="#">Designs</a></li> <li><a href="#">Webpages</a> </li> </ul> <li> <a href="About.html"> About </a> <ul class="dropdown"> <li><a href="#">Biography</a></li> <li><a href="#">Interests</a></li> <li><a href="#">Goals</a> </li> </ul> </li> <li> <a href="Contact.html"> Contact </a></li> </ul> </div> <div id="ContentLeft"></div> <div id="ContentBottom"></div>

已编辑代码的工作演示：http://jsfiddle.net/dirtyd77/WwuRK/6/

希望这有帮助，如果您有任何问题，请与我联系。

下拉菜单列表发布CSS

1 个答案: