下拉菜单列表问题CSS_Css_Html_Drop Down Menu

下拉菜单列表问题CSS

css html drop-down-menu

下拉菜单列表问题CSS,css,html,drop-down-menu,Css,Html,Drop Down Menu,我的下拉菜单不工作！它在JSFIDLE上工作，但在现实生活中不起作用……哈哈。我对这一切都很陌生。我希望这不是一个愚蠢的问题。我试图找到解决方案，但还没有看到一个我想要的方法 <!DOCTYPE html> <html> <head> <title>Home - Joe </title> <link rel="stylesheet" type="text/c

我的下拉菜单不工作！它在JSFIDLE上工作，但在现实生活中不起作用……哈哈。我对这一切都很陌生。我希望这不是一个愚蠢的问题。我试图找到解决方案，但还没有看到一个我想要的方法

<!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>

您需要将

包装在中。在当前示例中，您正在执行以下操作：
<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

已编辑代码的工作演示：
希望这对您有所帮助，如果您有任何问题，请告诉我。您的网站可能会遇到CSS问题，因为当您将下拉列表和它的相对样式与网站的CSS放在一起时，它无法正常工作。您是否认为您可以提供完整的代码，以便查看冲突可能位于何处？当它在JSFIDLE上工作时，您现在知道菜单的代码是正确的。因此，你必须查看菜单周围的代码和页面样式，它会干扰菜单。我在这里尝试了你的代码，但它不起作用。。。我知道出了什么问题，谢谢！
<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

<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>