recherche

Maison  >  Article  >  interface Web  >  用hover显示子菜单，没反应，甚是不解！_html/css_WEB-ITnose

用hover显示子菜单，没反应，甚是不解！_html/css_WEB-ITnose

WBOY
WBOYoriginal
2016-06-24 12:09:571571parcourir

	<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

    •                  ……
    #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




    • |

    • XXXXXXXX

      • ……

      #menu ul li a:hover {
          background:#7777CC;
          color:#FFF;
      ……
      不太明白您的意思，我这样写不会影响子菜单显示吧。
      影响其显示的应该这个吧： 
      #menu ul li a.rd:hover #submenu{    /*更正一下，发帖中把#submenu写成.submenu了*/    visibility:visible;}
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：通过点击按钮隐藏表格怎么实现？_html/css_WEB-ITnoseArticle suivant：html生成界面与显示不同_html/css_WEB-ITnose

Articles Liés

Voir plus