マウスオーバーで簡単CSSプルダウン(ドロップダウン)メニュー 1



hoverでjQueryのような簡単CSSプルダウンメニュー

CSSの子セレクタ『>』でプルダウンメニューが出来ました!transitionをつけるとほわ~~っとします。
手入れが簡単だし、ソースもかなり簡略化しました。CSSのプルダウンメニューはとっても軽いです♪サンプルではその3につけています。

スマホではあまり使いませんが、PCのみの記述でもこれだけ軽かったら邪魔にならないと思います^^

#nav_sample{
 width:100%;
 margin:0 auto;
    }
#nav_sample ul{
 width:100%;
 margin:0 auto;
 list-style:none;
}
#nav_sample ul li {
 width:33%;
 position: relative;
 font-size: 14px;
 float: left;    
}
#nav_sample ul li a {
 width: 99%;
 margin:0 auto;
 text-align:center;
 display: block;
 text-decoration: none;
 font-size: 14px;
 line-height: 60px;
 height: 60px;
 color: #fff;
 background: #F7AFC0;
 -moz-transition: .2s;
 -webkit-transition: .2s;
 -o-transition: .2s;
 -ms-transition: .2s;
 transition: .2s;
}
#nav_sample ul li a:hover {
 color: #E6889E;
 background: #333;
}
#nav_sample ul li > ul{
 position: relative;
 display: none;
  padding:0;
}
#nav_sample ul li:hover > ul{
 display: block;
 position: absolute;     
}
#nav_sample ul li ul li {
 position: relative;
 width: 100%;
 margin:0 auto;
 float:none;
 z-index:1;
}
#nav_sample ul li ul li a {
 display: block;
}
</style>

#nav_sample ul li:hover > ul の子セレクタ『>』を使うことにより、『:hoverするのはulの時だけね!』としています。

<nav id="nav_sample">
   <ul class="clearfix">
      <li><a href="">TOP</a></li>
      <li><a href="">その2</a>
      <li><a href="">その3</a>
		<ul>
			<li><a href="">その3-1</a></li>
			<li><a href="">その3-2</a></li>
			<li><a href="">その3-3</a></li>
		</ul>
      </li>
   </ul>
</nav>

いらないCSSもあるかも知れないので運用の際は注意してください!IE8のブラウザについているエミュレーターでは動きました。

フロート解除のclearfixは・・・

.clearfix{
    content:"";
    clear:both;
    display:block; 
}

でいいかな?スマートな記述があるかもしれないので、調べてみてください^^


Leave a comment

One thought on “マウスオーバーで簡単CSSプルダウン(ドロップダウン)メニュー