我的下拉菜单不起作用! 它适用于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/ <---我希望它能像这样工作。

===============>>#1 票数:2 已采纳

您需要 <li>包装<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/

希望这有帮助,如果您有任何疑问,请告诉我。

  ask by JosephD. translate from so

未解决问题?本站智能推荐:

2回复

HTML 5 CSS3下拉菜单

我正在尝试创建一个css3和html5简单的下拉菜单。 无论出于什么原因,我都遇到了障碍。 基本功能是应该发生的事情,但是我将整个菜单栏向下推。 如何使它像普通的下拉菜单栏一样移动整个菜单栏。 为了预先回答您的问题,为什么我要使用内联样式而不是全部将其放在CSS文件中,所以此代
1回复

嵌套下拉菜单CSS jQuery

我真的对CSS和HTML陌生,对jquery几乎一无所知。 尝试创建将在设备上显示的菜单。 因此,该菜单必须是可单击的。 菜单将嵌套在一个所谓的汉堡图标下,它需要一个更深的嵌套列表。 我使用了网络忍者教程来实现最高级别的下拉菜单。 但是,更深层的嵌套列表将不起作用,有人可以帮我吗?
1回复

下拉菜单问题(2)-HTML5和CSS

我是编码方面的新手,正在为班级的最后一个项目进行研究。 就像网页101:HTML5的基本知识和一点CSS。 我们为课堂制作的演示看起来像是90年代的。 简单是可以的,但是我真的想挑战自己,所以我正在尝试更复杂的东西。 TL; DR我的技能为零,我的代码可能很凌乱,请多多包涵!
3回复

纯HTML和CSS可切换下拉菜单

因此,我找到了解释该原理的两个提示页面:使用:hover使下拉菜单显示,并使用复选框将其打开或关闭 我花了很多时间来工作,但是当我谈到CSS样式时遇到了问题。 设置:hover状态的样式非常简单。 不是那么简单的是设置切换后的打开下拉菜单的样式,因为父CSS选择器在哪里。 我真的不想
1回复

位置的作用:此CSS下拉菜单中的绝对位置

在学习有关CSS的更多信息的同时,我一直在关注有关创建下拉菜单和此处代码演示的文章 。 阅读position: absolute;如何position: absolute; 应遵循CSS规范中所述的行为,其中指出: 在绝对定位模型中,框相对于其包含的块显式偏移。 它已从正常流
2回复

CSS下拉菜单找不到问题

我已经看过有关该主题的所有问题,但是找不到我的编码有任何问题。 我需要别人的眼睛才能发现问题所在。 我一定没有看到什么,因为我之前已经成功创建了下拉菜单... 这是我的菜单的html5编码: 这是我的CSS样式,正试图制作一个下拉菜单:
1回复

一列中的垂直CSS下拉菜单?

我在css创建了带有两个子菜单的垂直导航菜单。 但是我不知道如何将它们放在一列中以便它们正常工作。 这可能吗? html 的CSS #menu { font-size: 14px; font-family: "Courier New", Courier, monospa
2回复

仅CSS下拉菜单不使用UL / LI

我是一个新手/自学HTML的家伙。 我需要编辑我的(静态)网站菜单,以使其在接下来的4天内适合Google移动访问。 我要弄清楚该怎么做才伤脑筋,但是到目前为止还没有运气,所以我变得绝望了。 如果屏幕宽度小于Xpx,则使我的整个网站变得移动友好的方法是设置视口并更改CSS。 我只需要
1回复

CSS下拉菜单在iOS设备上不起作用

为什么我的CSS下拉菜单可在Android和所有PC浏览器上运行,而不在iOS设备上运行?
1回复

仅CSS下拉菜单-弹出框未在IE / Firefox中定位

这就是我所拥有的: http : //jsfiddle.net/QKThn/1/ 下拉菜单在Chrome中工作正常,但是嵌套UL(在:hover上弹出的列表)的位置不在Internet Explorer或Firefox中父LI的正下方。 在IE和FF中,嵌套的UL菜单都拥抱整个NAV的左