62,244
社区成员
发帖
与我相关
我的任务
分享一个关于css的小问题
我建了一个菜单
<div class="menu">
<ul>
<li><a href="Default.aspx">目录1</a>
<ul>
<li><a href="index.aspx" title="主页">主页</a></li>
<li><a href="pconline.com.cn" title="太平洋电脑网">太平洋电脑网</a></li>
</ul>
</li>
<li><a href="Default.aspx">目录2</a>
<ul>
<li><a href="index.aspx">主页</a></li>
<li><a href="pconline.com.cn">太平洋电脑网</a></li>
</ul>
</li>
<li><a href="Default.aspx">目录3</a>
<ul>
<li><a href="index.aspx">主页</a></li>
<li><a href="pconline.com.cn">太平洋电脑网</a></li>
</ul>
</li>
</ul>
</div>
我在css里面设置
.menu ul li ul
{
display:none;//隐藏菜单
}
我要怎么样才可以在鼠标停在目录1，目录2，目录3的时候显示菜单？
<div class="menu">
<ul>
<li><a href="Default.aspx">目录1</a>
<ul>
<li><a href="index.aspx" title="主页">主页</a></li>
<li><a href="pconline.com.cn" title="太平洋电脑网">太平洋电脑网</a></li>
</ul>
</li>
<li><a href="Default.aspx">目录2</a>
<ul>
<li><a href="index.aspx">主页</a></li>
<li><a href="pconline.com.cn">太平洋电脑网</a></li>
</ul>
</li>
<li><a href="Default.aspx">目录3</a>
<ul>
<li><a href="index.aspx">主页</a></li>
<li><a href="pconline.com.cn">太平洋电脑网</a></li>
</ul>
</li>
</ul>
</div>
我在css里面设置
.menu ul li ul
{
display:none;//隐藏菜单
}
我要怎么样才可以在鼠标停在目录1，目录2，目录3的时候显示菜单？
...全文
请发表友善的回复…
发表回复
gudamzero 2006-10-23
- 打赏
- 举报
我指的是css怎么设置？下面是我看别人设置的，但是不太明白是什么意思
.menu ul li:hover ul {
display:block;
position:absolute;
top:31px;
left:0;
width:105px;
}
.menu ul li a.hide, .menu ul li a:visited.hide {
display:none;
}
.menu ul li a:hover ul li a:hover {
background:#dfc184;
color:#000;
}
.menu ul li:hover ul {
display:block;
position:absolute;
top:31px;
left:0;
width:105px;
}
.menu ul li a.hide, .menu ul li a:visited.hide {
display:none;
}
.menu ul li a:hover ul li a:hover {
background:#dfc184;
color:#000;
}
avisnet 2006-10-23
- 打赏
- 举报
<!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 runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function show(id) {
var v = document.getElementById(id);
if(v.style.display == '')
v.style.display = 'none';
else
v.style.display = '';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="menu">
<ul>
<li><a href="Default.aspx" onmouseenter="show('d1')" onmouseleave="show('d1')">目录1</a>
<ul id="d1" style="display:none">
<li><a href="index.aspx" title="主页">主页</a></li>
<li><a href="pconline.com.cn" title="太平洋电脑网">太平洋电脑网</a></li>
</ul>
</li>
<li><a href="Default.aspx" onmouseenter="show('d2')" onmouseleave="show('d2')">目录2</a>
<ul id="d2" style="display:none">
<li><a href="index.aspx">主页</a></li>
<li><a href="pconline.com.cn">太平洋电脑网</a></li>
</ul>
</li>
<li><a href="Default.aspx" onmouseenter="show('d3')" onmouseleave="show('d3')">目录3</a>
<ul id="d3" style="display:none">
<li><a href="index.aspx">主页</a></li>
<li><a href="pconline.com.cn">太平洋电脑网</a></li>
</ul>
</li>
</ul>
</div>
</form>
</body>
</html>
测试过的，没问题。
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function show(id) {
var v = document.getElementById(id);
if(v.style.display == '')
v.style.display = 'none';
else
v.style.display = '';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="menu">
<ul>
<li><a href="Default.aspx" onmouseenter="show('d1')" onmouseleave="show('d1')">目录1</a>
<ul id="d1" style="display:none">
<li><a href="index.aspx" title="主页">主页</a></li>
<li><a href="pconline.com.cn" title="太平洋电脑网">太平洋电脑网</a></li>
</ul>
</li>
<li><a href="Default.aspx" onmouseenter="show('d2')" onmouseleave="show('d2')">目录2</a>
<ul id="d2" style="display:none">
<li><a href="index.aspx">主页</a></li>
<li><a href="pconline.com.cn">太平洋电脑网</a></li>
</ul>
</li>
<li><a href="Default.aspx" onmouseenter="show('d3')" onmouseleave="show('d3')">目录3</a>
<ul id="d3" style="display:none">
<li><a href="index.aspx">主页</a></li>
<li><a href="pconline.com.cn">太平洋电脑网</a></li>
</ul>
</li>
</ul>
</div>
</form>
</body>
</html>
测试过的，没问题。
gudamzero 2006-10-23
- 打赏
- 举报
自己顶一下
