当我转到html页面的子菜单时,无法在菜单上保持悬停状态
我能够制作一个侧菜单,当我浏览菜单项时,它会显示子菜单。 现在我面临两个问题 1.当鼠标悬停在菜单项上时,它会显示子菜单,但当我将鼠标悬停在子菜单上时,菜单项的悬停状态会消失。我需要它处于悬停状态。 2.子菜单块显示时,它显示为透明,我可以看到它后面的内容。但是我怎样才能使它完全不透明呢 我的代码如下当我转到html页面的子菜单时,无法在菜单上保持悬停状态,html,css,menu,submenu,Html,Css,Menu,Submenu,我能够制作一个侧菜单,当我浏览菜单项时,它会显示子菜单。 现在我面临两个问题 1.当鼠标悬停在菜单项上时,它会显示子菜单,但当我将鼠标悬停在子菜单上时,菜单项的悬停状态会消失。我需要它处于悬停状态。 2.子菜单块显示时,它显示为透明,我可以看到它后面的内容。但是我怎样才能使它完全不透明呢 我的代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD
<!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>
CSS下拉菜单
a{
文字装饰:无;
颜色:#FFFFFF;
}
a:悬停{
颜色:黑色;
}
#菜单{
位置:相对位置;
宽度:20%;
高度:400px;
边框:1px实心#000;
}
#菜单a{
显示:块;
宽度:140px;
背景图片:url(menuitemhover.png);
}
#菜单ul{
列表样式类型:无;
垫面:5px;
}
#菜单里{
浮动:顶部;
位置:相对位置;
填充:3px0;
文本对齐:居中;
}
#菜单ul.子菜单{
显示:无;
位置:绝对位置;
顶部:-10px;
左:170px;
填充:10px;
z指数:90;
}
#菜单ul.子菜单li{
文本对齐:顶部;
}
#菜单li:悬停>ul.子菜单{
显示:块;
边框:1px实心#ececec;
背景图片:url(menuitemhover.png);
}
-
-
-
如果我理解正确,您需要为#菜单li:hover>ul.子菜单
以及#菜单a
应用背景色。我更容易尝试使用非常明显的颜色进行测试,如绿色或红色。测试完成后,只需更换颜色即可如果可能,可以提供指向您网站的链接,并且更易于调试