-1

我有一个下拉列表。但是，它运行不佳。在第一级，我将鼠标悬停在论坛上，它可以工作。但是，在悬停“新加坡论坛”之前，不应出现“数字论坛”和“政治论坛”。

我似乎无法编辑我的代码来实现这一点。如果有人可以帮助我，我将不胜感激。如果也使用 jsfiddle 来呈现答案会很好。非常感谢提前！

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="design.css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Standard Chartered Bank</title>

</head>
<body>
<div id="menu">
    <ul>
        <li><a href="#">Google</a></li>
        <li><a href="#">FB</a></li>
        <li><a href="#" >Twitter</a></li> 
        <li><a href="#" >Forum</a>
            <ul>
                <li><a href="#">HardWare Zone</a></li>
                <li><a href="#">Singapore Forum</a>
                    <ul>
                        <li><a href="#">Digital Forum</a></li>
                        <li><a href="#">Politics Forum</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

<div id="form">
    <br>
    <form action="welcome.php" method="post">
    <br>
    <formspace>Name:</formspace><input type="text" name="fname" class="bord"><br>
    <formspace>Age:</formspace> <input type="text" name="age" class="bord"><br>
    <input type="submit">
    </form>
</div>
</body>
</html>

CSS

 @charset "utf-8";
    /* CSS Document */
    #menu{
        width: 1200px;
        height: 35px;
        font-family: Arial
        font-size: 13px;
        padding:0;    
        background-color:#F23;
        text-align: center;
        z-index:1;
    }
    #menu ul{
        margin:auto;
        width:240px;
        height:35px;
        text-align:center;
        padding:0;
    }
    #menu li{
    float:left; 
    padding: 0;
    height:35px;
    width:60px;
    list-style-type: none;

    position:relative;
    }

    #menu li a{
        color:#000; 
    }
    #menu ul li ul{
        display:none;
        width:150px;
    }
    #menu ul li:hover{
        background-color:blue;  
    }
    #menu ul li:hover ul{
        display:block;
        position:relative;
        top:14px;
        float:none;

    }
    #menu ul li ul li{
        width:140px;
        height:35px;
        list-style-type: none;
        padding:5px;
        float:none;
    }

    #menu ul li ul li:hover ul{
        display:block;
        position:relative;
        left:145px;
        top:-25px;
        float:none;
    }

    #menu ul li ul li ul li{
        list-style-type: none;  
        width:120px;
    }
    formspace{
        width:70px;
        float:left;
    }
    input.bord{
    border-radius: 5px;
    border-width:2px;
    border-style: solid;
    }
4

2 回答 2

3

修复了这 2 个 CSS。您只需要指定直接子 ul 出现在悬停时。你缺少>选择器。因此，当您将鼠标悬停在父级时，它基本上会显示其下的所有 ul（包括子菜单）。

阅读子选择器

演示

#menu ul li:hover > ul{
    display:block;
    position:relative;
    top:14px;
    float:none;

}


#menu ul li ul li:hover > ul{
    display:block;
    position:relative;
    left:145px;
    top:-25px;
    float:none;
}
于 2013-05-07T19:20:30.213 回答
2

尝试在此规则中添加“>”：

#menu ul li:hover > ul {
display:block;
position:relative;
top:14px;
float:none;
}
于 2013-05-07T19:26:55.927 回答