Home >Web Front-end >HTML Tutorial >I used hover to display the submenu, but there was no response. I was really puzzled! _html/css_WEB-ITnose
I used hover to display the submenu, but there was no response. I was really puzzled! _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:09:571600browse
<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;}都试过了，但是不知是选择的元素不对还是怎么样，没效果*/ Please help!
Reply to the discussion (solution)
Table sink. . .
Use js to control it!
A combination of hover= mouseover / mouseout events
HTML code
6c04bd5ca3fcae76e30b72ad730ca86d
147c7f9ab5f4450107ac9008c9460851
>4edff22fcb37dcb20a26e8c582d86fd1bed06894275b65c1ab86501b08a632eb
What are you doing? This is an effect on hyperlinks. When the mouse is placed on a hyperlink, the color and background change
It is recommended to try this a:hover div{display:block}
It is recommended to try this: a:hover div{display:block}
It doesn’t work. .
Use js to control it!
I try not to use JS
Quoting the original poster’s reply:
HTML code
6c04bd5ca3fcae76e30b72ad730ca86d
882004fb77ba86bcf66dac7a21b0df7e
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c65ff5b82c7d63ca4a4f53f58c49f11459XXXXXXXX5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
……
#menu ul li a:hover {
background :#7777CC;
color:#FFF;
......
I don’t quite understand what you mean. If I write this, it won’t affect the submenu display.
The one that affects its display should be this: