Home  >  Article  >  Web Front-end  >  css hover: display:block;伪类在下拉菜单中的应用需要注意z-index的使用_html/css_WEB-ITnose

css hover: display:block;伪类在下拉菜单中的应用需要注意z-index的使用_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 08:59:192597browse

<div class="userinfo2 pr">    <div class="ib">        <a href="<?php echo $cfg_memberurl; ?>/index.php"><img  class="radius-circle" src="<?php echo $facepic;? alt="css hover: display:block;伪类在下拉菜单中的应用需要注意z-index的使用_html/css_WEB-ITnose" >" width="42"    style="max-width:90%" /></a>    </div>  <div class="welcome"><strong><?php echo $cfg_ml->M_UserName; ?></strong></div>        <div class="mylink2 pa top40 left0 ">        <ul>  <li><a href="<?php echo $cfg_memberurl; ?>/index.php">会员中心</a></li>  <li><a href="<?php echo $myurl;?>">我的空间</a></li>              <li><a href="<?php echo $cfg_memberurl; ?>/guestbook_admin.php">我的留言</a></li>            <li><a href="<?php echo $cfg_memberurl; ?>/mystow.php">我的收藏</a></li>            <li><a href="<?php echo $cfg_memberurl; ?>/article_add.php">发表文章</a></li>            <li><a href="<?php echo $cfg_memberurl; ?>/myfriend.php">好友管理</a></li>            <li><a href="<?php echo $cfg_memberurl; ?>/visit-history.php">访客记录</a></li>            <li><a href="<?php echo $cfg_memberurl; ?>/search.php">查找好友</a></li>   <li> <a href="<?php echo $cfg_memberurl; ?>/index_do.php?fmdo=login&dopost=exit">退出登录</a> </li>        </ul>    </div></div>

css:

.pr{position:relative;}
.pa{position:absolute;}

.userinfo2 .mylink2{z-index:1;display:none;width:80px;background:#fff;}

.userinfo2:hover .mylink2{display:block;}

以上用法,注意增加z-index这一句,否则,下拉菜单在遇到导航或其它元素时,可能会闪烁或意外隐藏等.

 

Statement:
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