Heim >Web-Frontend >HTML-Tutorial >用hover显示子菜单，没反应，甚是不解！_html/css_WEB-ITnose
用hover显示子菜单，没反应，甚是不解！_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:09:571607Durchsuche
<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;}
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：通过点击按钮隐藏表格怎么实现？_html/css_WEB-ITnoseNächster Artikel：html生成界面与显示不同_html/css_WEB-ITnose