jquery無しCSSのみの縦型ドロップダウンメニュー

2015-03-102015-04-11

アニメーションがなくても良い場合はcssだけドロップダウンメニュー作れます。

HTML

<ul class="nav">
	<li><a href="#">nav1</a>
		<div class="nav1childnav childnav">
			<h3>ナビ１子メニュータイトル</h3>
			<ul>
			<li><a href="#">nav1child1</a></li>
			<li><a href="#">nav1child2</a></li>
			<li><a href="#">nav1child3</a></li>
			<li><a href="#">nav1child4</a></li>
			<li><a href="#">nav1child5</a></li>
			</ul>
		</div>
	</li>
	<li><a href="#">nav2</a>
		<div class="nav2childnav childnav">
		<h3>ナビ２　子メニュータイトル</h3>
		<ul>
			<li><a href="#">nav2child1</a></li>
			<li><a href="#">nav2child2</a></li>
			<li><a href="#">nav2child3</a></li>
			<li><a href="#">nav2child4</a></li>
			<li><a href="#">nav2child5</a></li>
			</ul>
		</div>
	</li>
	<li><a href="#">nav3</a>
		<div class="nav1childnav childnav">
		<h3>ナビ３　子メニュータイトル</h3>
		<ul>
			<li><a href="#">nav3child1</a></li>
			<li><a href="#">nav3child2</a></li>
			<li><a href="#">nav3child3</a></li>
			<li><a href="#">nav3child4</a></li>
			<li><a href="#">nav3child5</a></li>
			</ul>
			<div class="img"><img src="http://dummyimage.com/200x160/000/fff.png&text=dummy" alt=""></div>

		</div>
	</li>
	<li><a href="#">nav4</a>
		<div class="nav1childnav childnav">
		<h3>ナビ４　子メニュータイトル</h3>
		<ul>
			<li><a href="#">nav4child1</a></li>
			<li><a href="#">nav4child2</a></li>
			<li><a href="#">nav4child3</a></li>
			<li><a href="#">nav4child4</a></li>
			<li><a href="#">nav4child5</a></li>
			</ul>
		</div>
	</li>
</ul>

CSS

        	ul.nav,
        	ul.nav ul{
        		margin-left:0;
        		padding-left:0;
        		list-style-type: none;
        	}
			ul.nav{
				position: relative;
				margin:20px 0;
				width:15em;
				border:1px solid #ddd;
				border-bottom: none;
			}
			ul.nav a{
				display: block;
				text-decoration: none;
			}
			ul.nav a:hover{
				background:#efefef;
			}
			ul.nav>li{
				/*position: relative;*/
				width:15em;
				border-bottom: 1px solid #ddd;
			}
			ul.nav>li>a{
				padding:10px 15px;
			}
			ul.nav li .childnav{
				display: none;
				padding:10px;
				border:1px solid #ccc;
			}
			ul.nav li:hover .childnav{
				display: block;
				position:absolute;
				left:15em;
				top:0;
				min-width:400px;
			}

			.childnav h3{
				color:#c00;
				font-size:16px;
				font-weight: bold;
			}
			.chilnav ul{
				margin-bottom:20px;
			}
			.childnav li{
				position: relative;
				padding-left:10px;
			}
			.childnav li:before{
				content:"";
				display: inline-block;
				position:absolute;
				top:10px;
				left:0;
				width:0;
				height:0;
				border:6px solid transparent;
				border-left-color:#ccc;
			}
			.childnav li a{
				padding:5px;
				border-bottom: none;

			}
			.childnav li a:hover{
				color:#c00;
				text-decoration: underline;
				background: none;
			}

サンプルHTML

http://shibamaru.s602.xrea.com/demo/vertical_dropdownnav.html

 

 

IEで動作確認していないので崩れているかも・・・・