MSN風縦型サブメニュー vinton Follow 2012-06-05 09:09:46 License: MIT License Fork2 Fav0 View6006 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 0 lines HTML 40 lines CSS 85 lines MSN風縦型サブメニュー <div id="nav"> <ul class="top-level"> <li class="category1"><a href="#">ニュース</a> <ul class="sub-level"> <li><a href="#">速報</a> <ul class="sub-level"> <li><a href="#">サブメニュー1</a></li> <li><a href="#">サブメニュー2</a></li> <li><a href="#">サブメニュー3</a></li> </ul> </li> <li><a href="#">事件</a></li> </ul> </li> <li class="category2"><a href="#">天気予報</a> <ul class="sub-level"> <li><a href="#">天気画像</a> <ul class="sub-level"> <li><a href="#">サブメニュー1</a></li> <li><a href="#">サブメニュー2</a></li> <li><a href="#">サブメニュー3</a></li> </ul> </li> <li><a href="#">警報・注意報</a></li> </ul> </li> <li class="category3"><a href="#">マネー</a> <ul class="sub-level"> <li><a href="#">株式</a></li> <li><a href="#">株価検索</a> <ul class="sub-level"> <li><a href="#">サブメニュー1</a></li> <li><a href="#">サブメニュー2</a></li> <li><a href="#">サブメニュー3</a></li> </ul> </li> </ul> </li> </ul> </div> MSN風縦型サブメニュー #nav { font-size: 1em; width: 150px; } #nav ul { margin: 0; padding: 0; border-top: 1px solid #aaa; border-right: 1px solid #aaa; } #nav li { list-style-type: none; } #nav a { color: #000; display: block; height: 25px; line-height: 25px; padding-left: 10px; text-decoration: none; width: 100%; } #nav a:hover{ text-decoration: none; } #nav li:hover { background: #cdeefc; position: relative; } /*第1階層*/ ul.top-level { background-color: #fff; } ul.top-level li { border-bottom: 1px solid #aaa; } ul.top-level li.category1 { border-left: 4px solid #f60; background: -moz-linear-gradient(top, #eee, #fff 75%); background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#fff), color-stop(75%, #fff)); } ul.top-level li.category2 { border-left: 4px solid #366CD6; background: -moz-linear-gradient(top, #eee, #fff 75%); background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#fff), color-stop(75%, #fff)); } ul.top-level li.category3 { border-left: 4px solid #32CC60; background: -moz-linear-gradient(top, #eee, #fff 75%); background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#fff), color-stop(75%, #fff)); } /*第2・第3階層共通*/ ul.sub-level { display: none; } li:hover .sub-level { border: 1px solid #aaa; display: block; position: absolute; left: 120px; top: -3px; } ul.sub-level li { border: none; float: left; width: 150px; } /*第2階層*/ #nav .sub-level { background-color: #fff; } /*第3階層*/ #nav .sub-level .sub-level { background-color: #fff; } li:hover .sub-level .sub-level { display: none; } .sub-level li:hover .sub-level { display: block; } <div id="nav"> <ul class="top-level"> <li class="category1"><a href="#">ニュース</a> <ul class="sub-level"> <li><a href="#">速報</a> <ul class="sub-level"> <li><a href="#">サブメニュー1</a></li> <li><a href="#">サブメニュー2</a></li> <li><a href="#">サブメニュー3</a></li> </ul> </li> <li><a href="#">事件</a></li> </ul> </li> <li class="category2"><a href="#">天気予報</a> <ul class="sub-level"> <li><a href="#">天気画像</a> <ul class="sub-level"> <li><a href="#">サブメニュー1</a></li> <li><a href="#">サブメニュー2</a></li> <li><a href="#">サブメニュー3</a></li> </ul> </li> <li><a href="#">警報・注意報</a></li> </ul> </li> <li class="category3"><a href="#">マネー</a> <ul class="sub-level"> <li><a href="#">株式</a></li> <li><a href="#">株価検索</a> <ul class="sub-level"> <li><a href="#">サブメニュー1</a></li> <li><a href="#">サブメニュー2</a></li> <li><a href="#">サブメニュー3</a></li> </ul> </li> </ul> </li> </ul> </div> #nav { font-size: 1em; width: 150px; } #nav ul { margin: 0; padding: 0; border-top: 1px solid #aaa; border-right: 1px solid #aaa; } #nav li { list-style-type: none; } #nav a { color: #000; display: block; height: 25px; line-height: 25px; padding-left: 10px; text-decoration: none; width: 100%; } #nav a:hover{ text-decoration: none; } #nav li:hover { background: #cdeefc; position: relative; } /*第1階層*/ ul.top-level { background-color: #fff; } ul.top-level li { border-bottom: 1px solid #aaa; } ul.top-level li.category1 { border-left: 4px solid #f60; background: -moz-linear-gradient(top, #eee, #fff 75%); background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#fff), color-stop(75%, #fff)); } ul.top-level li.category2 { border-left: 4px solid #366CD6; background: -moz-linear-gradient(top, #eee, #fff 75%); background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#fff), color-stop(75%, #fff)); } ul.top-level li.category3 { border-left: 4px solid #32CC60; background: -moz-linear-gradient(top, #eee, #fff 75%); background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#fff), color-stop(75%, #fff)); } /*第2・第3階層共通*/ ul.sub-level { display: none; } li:hover .sub-level { border: 1px solid #aaa; display: block; position: absolute; left: 120px; top: -3px; } ul.sub-level li { border: none; float: left; width: 150px; } /*第2階層*/ #nav .sub-level { background-color: #fff; } /*第3階層*/ #nav .sub-level .sub-level { background-color: #fff; } li:hover .sub-level .sub-level { display: none; } .sub-level li:hover .sub-level { display: block; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author vinton URLhttp://d.hatena.ne.jp/vinton/ Webマスターになるべく毎日勉強しています! Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/3NBN/js"></script> css Discussion Questions on this code? Tags css Forked sort by latest page views favorite forked forked: MSN風縦型サブメニュー shi-jing 00 693 2/38/85 css forked: MSN風縦型サブメニュー lUUlUUUl 10 1007 2/40/86 css