1

我能够制作一个侧面菜单，当我将鼠标悬停在菜单项上时它会显示子菜单。现在我面临两个问题 1. 当悬停到菜单项时，它会显示子菜单，但是当我悬停在子菜单上时，菜单项的悬停状态会消失。我需要它处于悬停状态。2.子菜单块显示时，显示为透明的，我可以看到它后面的内容。但是我怎样才能让它完全不透明呢？

我的代码如下...

<!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" dir="ltr" lang="en-US">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Drop Down Menus</title>

<style type="text/css">
<!-- * {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Trebuchet MS", Helvetica, Sans-Serif;
    font-size: 14px;
} -->

a {
    text-decoration: none;
    color: #FFFFFF;
}

a:hover {
    color: black;

}

#menu {
    position: relative;
    width:20%;
    height:400px;
    border:1px solid #000;
}

#menu a {
    display: block;
    width: 140px;
    background-image:url(menuitemhover.png);
}

#menu ul {
    list-style-type: none;
    padding-top: 5px;
}

#menu li {
    float: top;
    position: relative;
    padding: 3px 0;
    text-align: center;
}

#menu ul.sub-menu {
    display: none;
    position: absolute;
    top: -10px;
    left: 170px;
    padding: 10px;
    z-index: 90;
}

#menu ul.sub-menu li {
    text-align: top;
}

#menu li:hover > ul.sub-menu {
    display: block;
    border: 1px solid #ececec;
    background-image:url(menuitemhover.png);
}
</style>

</head>
<body>

<div id="menu">
    <ul>
        <li><a href="#">Home</a>

        <ul class="sub-menu" style="border:1px solid #d14836"}>
            <li><a href="#">Pages</a></li>
            <li><a href="#">Archives</a></li>
            <li><a href="#">New Posts</a></li>
            <li><a href="#">Recent Comments</a></li>
        </ul>

        </li>

        <li><a href="#">About</a>

        <ul class="sub-menu" style="border:1px solid #d14836">
            <li><a href="#">Get to know us</a></li>
            <li><a href="#">Find out what we do</a></li>
        </ul>

        </li>

        <li><a href="#">Contact</a>

        <ul class="sub-menu" style="border:1px solid #d14836">
            <li><a href="#">E-mail Us</a></li>
            <li><a href="#">Use Our Contact Form</a></li>
        </ul>

        </li>
    </ul>
</div>

</body>
</html>
4

1 回答 1

2

如果我理解正确，您还需要为#menu li:hover > ul.sub-menuand应用背景颜色#menu a。我更容易尝试使用非常明显的颜色进行测试，例如绿色或红色。测试完成后，只需更换您想要的颜色即可

于 2013-03-11T06:48:24.263 回答