用hover显示子菜单，没反应，甚是不解！_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 12:09:571571浏览
<body> <div id='menu'> <ul> <li class='interval'>|</li> <li><a href="index.html">XXXXXXXX</a></li> <li class='interval'>|</li> <li> <a href="#">鼠标飘过显示子菜单</a> <div id='submenu'> <div class='subitemleft'><a href="1.html">- xxxxxxxx -</a></div> <div class='subitemright'><a href="2.html">- xxxxxxxx -</a></div> <div class='subitemleft'><a href="3.html">- xxxxxxxxx -</a></div> <div class='subitemright'><a href="4.html">- xxxxxxxxxx -</a></div> </div> </li> <li class='interval'>|</li> <li><a href="topic.html">XXXXXXXX</a></li> <li class='interval'>|</li> <li><a href="team.html">XXXXXXXX</a></li> <li class='interval'>|</li> <li><a href="cooperation.html">XXXXXXXX</a></li> <li class='interval'>|</li> <li><a href="product.html">XXXXXXXX</a></li> <li class='interval'>|</li> <li><a href="passenger.html">XXXXXXXXX</a></li> <li class='interval'>|</li> <li><a href="contact.html">XXXXXXXX</a></li> <li class='interval'>|</li> </ul> </div></body>
CSS:
#menu ul{ margin:0 auto; position:absolute; /*background:#00FF00;*/ list-style:none; padding:0px; height:26px; line-height:26px;}#menu ul li{ float:left; padding:0px; height:26px; line-height:26px;}#menu ul li a { color:#7777CC; display:block; padding:0px 27px; height:26px; line-height:26px; float:left; text-decoration:none;}#menu ul li a:hover { background:#7777CC; color:#FFF;}#menu ul li a.rd:hover .submenu{ visibility:visible;}#menu #submenu { position:absolute; padding:0px; float:left; top:26px; width:600px; height:54px; background-color:#7777CC; visibility:hidden;}/*如代码所示，a{display:none;} a:hover{display:block;}以及 a{visibility:hidden;} a:hover{visibility:visible;}都试过了，但是不知是选择的元素不对还是怎么样，没效果*/ 求教！
回复讨论(解决方案)
表沉。。。
用js控制吧!
hover= mouseover / mouseout两个事件的合写
HTML code
- |
- XXXXXXXX
- |
- XXXXXXXX
……
#menu ul li a:hover {
background:#7777CC;
color:#FFF;
}
你这是什么啊，这是对超链接的有作用，当鼠标放到超链接上面时，颜色，背景改变了
建议这样试试 a:hover div{display:block}
建议这样试试 a:hover div{display:block}
没用啊。。
用js控制吧!
hover= mouseover / mouseout两个事件的合写
我尽量不想用JS
引用楼主 的回复:
HTML code
……
#menu ul li a:hover {
background:#7777CC;
color:#FFF;
……
不太明白您的意思，我这样写不会影响子菜单显示吧。
影响其显示的应该这个吧：
#menu ul li a.rd:hover #submenu{ /*更正一下，发帖中把#submenu写成.submenu了*/ visibility:visible;}
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn