0

ドロップダウン メニューが機能しない! 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/ <--- 動作させたい このように。

4

1 に答える 1

2

<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> <!-- menu-->
        <li> <a href="music.html"> Music </a>
            <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>
        <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/

ご不明な点がございましたら、お気軽にお問い合わせください。

于 2013-04-16T17:18:39.157 に答える