不如何会css，在制作css纵向菜单时用到区块的隐藏，而在横向菜单中却没用到，很是纳闷，请高人解答

不怎么会css，在制作css纵向菜单时用到区块的隐藏，而在横向菜单中却没用到，很是纳闷，请高人解答
先把纵向菜单的导航代码发出来
--------------------------------------------------------
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="csslb.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="menu">
<ul>
<li>
<a href="#">中国</a>
<ul>
<li><a href="#">唐朝</a></li>
<li><a href="#">宋朝</a></li>
<li><a href="#">汉朝</a></li>
<li><a href="#">元朝</a></li>
<li><a href="#">明朝</a></li>
<li><a href="#">清朝</a></li>
</ul>
</li>
<li><a href="#">俄罗斯</a>
<ul>
<li><a href="#">彼得大帝</a></li>
<li><a href="#">沙皇</a></li>
<li><a href="#">叶卡捷莉娜二世</a></li>
</ul>
</li>
<li><a href="#">马来西亚</a></li>
<li><a href="#">美国</a></li>
<li><a href="#">印度</a></li>
<li><a href="#">日本</a></li>
<li><a href="#">泰国</a></li>
<li><a href="#">法国</a></li>
</ul>
</div>
</body>
</html>
----------------------纵向菜单导航的样式表如下--------------------------------
#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
body {
font-family: "新宋体";
font-size: 12px;
line-height: 1.5;
}
#menu {
width: 100px;
border: 1px solid #FFFF66;
}
#menu ul li {
line-height: 26px;
background-color: #CCCCCC;
height: 26px;
border: 1px solid #FF9900;
position: relative;
}
#menu ul li a {
color: #FF0000;
text-decoration: none;
width: 100px;
}
#menu ul li a:hover {
color: #00FF00;
width: 100px;
background-color: #0000FF;
}

#menu ul li:hover {
background-color: #99FF66;
}
#menu ul li ul {
display: none;
border: 1px solid #FFFF99;
position: absolute;
width: 100px;
left: 100px;
top: 0px;
}
#menu ul li:hover ul {
display: block;
}
a:hover {
background-color: #3300FF;
}
---------------------------------------------------------------
可以看到标红的地方用了隐藏，也就是说不划过的话就不显示，那么这个可以理解
下面再来看看横向菜单的全部代码-----------------------------------------
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>菜单演示</title>
<style type="text/css">

</style>
</head>

<body>
<ul id="nav">
<li><a href="#">产品介绍</a>
<ul>
<li><a href="#">产品—</a></li>
<li><a href="#">产品—</a></li>
<li><a href="#">产品—</a></li>
<li><a href="#">产品—</a></li>
</ul>
</li>
</ul>
</body>
</html>
--------------------------------------------可以看到横向菜单样式中并没有将任何部分隐藏，当在页面打开的时候二级菜单是隐藏的啊，很奇怪，纵向菜单是将ul定义成了块，而横向菜单是将a定义成了块，难道说将a定义为块就不用设置隐藏吗，而且我在横向菜单中试图将二级ul定义为隐藏的时候，当鼠标划过一级菜单的时候却没了反应，也就是说二级菜单彻底隐藏了，是不是说这个隐藏具有继承性呢。请相关的高手解答下哈，谢谢

------解决思路----------------------
横向时确实没有隐藏，只是你看不见而已



#nav li ul {line-height:27px; list-style-type:none; text-align:left; left:-999em; width:180px; position:absolute;}

看到left:-999em;了吗，默认情况下是在页面显示区域之外的。



#nav li:hover ul {left:auto;}

鼠标经过时把left恢复到了默认位置，所以就出现了。

当然还是建议你用隐藏，因为当前情况下-999肯定再页面外面，可要是你的ul本身就离左边999的话，就会出现在页面左上角了

不如何会css，在制作css纵向菜单时用到区块的隐藏，而在横向菜单中却没用到，很是纳闷，请高人解答

相关推荐