2012-06-05 09:09:46

License: MIT License

Fork: 2

Fav: 0

View: 6062

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 0 lines
HTML 40 lines
CSS 85 lines

MSN風縦型サブメニュー

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="#">サブメニュー１</a></li> <li><a href="#">サブメニュー２</a></li> <li><a href="#">サブメニュー３</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="#">サブメニュー１</a></li> <li><a href="#">サブメニュー２</a></li> <li><a href="#">サブメニュー３</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="#">サブメニュー１</a></li> <li><a href="#">サブメニュー２</a></li> <li><a href="#">サブメニュー３</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; }

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

vinton

URL
http://d.hatena.ne.jp/vinton/

Webマスターになるべく毎日勉強しています！

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/3NBN/js"></script>

QR Code

Discussion

Questions on this code?

Forked

sort by

forked: MSN風縦型サブメニュー

shi-jing

2/38/85
- css

forked: MSN風縦型サブメニュー

lUUlUUUl

1
0
1019

2/40/86
- css

MSN風縦型サブメニュー

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Forked