CSS三级菜单的显示和隐藏

发布网友发布时间：2022-05-13 07:55

我来回答

共2个回答

懂视网时间：2022-05-13 12:17

先把纵向菜单的导航代码发出来
--------------------------------------------------------

无标题文档

中国

唐朝

宋朝

汉朝

元朝

明朝

清朝

俄罗斯

彼得大帝

沙皇

叶卡捷莉娜二世

马来西亚

美国

印度

日本

泰国

法国

----------------------纵向菜单导航的样式表如下--------------------------------
#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;
}
---------------------------------------------------------------
可以看到标红的地方用了隐藏，也就是说不划过的话就不显示，那么这个可以理解
下面再来看看横向菜单的全部代码-----------------------------------------

菜单演示

产品介绍

产品?

--------------------------------------------可以看到横向菜单样式中并没有将任何部分隐藏，当在页面打开的时候二级菜单是隐藏的啊，很奇怪，纵向菜单是将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的话，就会出现在页面左上角了

嗯，谢谢了，还真不知道-999em是这个意思呢

热心网友时间：2022-05-13 09:25

.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}//将元素隐藏、不保留其物理空间.menu ul li a:hover {color:#fff; background:#36f;}//设置鼠标悬停时链接的字体颜色。背景颜色.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}//鼠标悬停时显示隐藏的元素、绝对定位、上、左边的位置、设置宽度属性.menu ul li a:hover ul li a ul {visibility:hidden;}设置ul元素隐藏、并且保留其物理空间.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}鼠标悬停时显示ul元素、并设置绝对定位;字体颜色.menu ul li a:hover ul li a:hover ul.left {left:-105px;}负边距定位、让其再往左边偏移105px追问如上图，本来是比赛活动的，然后当鼠标移到那里时变成了只能显示3个文字，第四个文字隐藏了，怎么恢复成4个文字