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

WBOY
Release: 2016-06-24 12:09:57
Original
1602 people have browsed it

	<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>
Copy after login

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;}都试过了,但是不知是选择的元素不对还是怎么样,没效果*/
Copy after login

Please help!


Reply to the discussion (solution)

Table sink. . .

Use js to control it!
A combination of hover= mouseover / mouseout events

HTML code


source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template