ホームページ > 記事 > ウェブフロントエンド > css hover: display:block; ドロップダウン メニューに疑似クラスを適用する場合は、z-index_html/css_WEB-ITnose の使用に注意する必要があります。
css hover: display:block; ドロップダウン メニューに疑似クラスを適用する場合は、z-index_html/css_WEB-ITnose の使用に注意する必要があります。
- WBOYオリジナル
- 2016-06-21 08:59:192613ブラウズ
<div class="userinfo2 pr"> <div class="ib"> <a href="<?php echo $cfg_memberurl; ?>/index.php"><img class="radius-circle" src="<?php echo $facepic;?>" width="42" height="42" /></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{位置:相対;}
.pa{位置:絶対;}
.userinfo2 .mylink2{z-index :1;display:none;width:80px;background:#fff;}
.userinfo2:hover .mylink2{display:block;}
上記の使用法では、追加に注意してくださいz-index 一文。そうでないと、ナビゲーションまたは他の要素に遭遇したときにドロップダウン メニューが点滅したり非表示になったりすることがあります。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。