CSSでドロップダウンメニュー
<style>
#dropmenu{
list-style-type: none;
width: 400px;
height: 40px;
margin: 30px auto 300px;
padding: 0;
background: #FF9200;
border-bottom: 5px solid #BF8230;
border-radius: 3px 3px 0 0;
}
#dropmenu li{
position: relative;
width: 20%;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
#dropmenu li a{
display: block;
margin: 0;
padding: 15px 0 11px;
color: #fff;
font-size: 14px;
font-weight: bold;
line-height: 1;
text-decoration: none;
}
#dropmenu li:hover > a{
background: #FFAD40;
color: #eff7b1;
}
#dropmenu > li:hover > a{
}
#dropmenu li ul{
list-style: none;
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
border-radius: 0 0 3px 3px;
}
#dropmenu li:last-child ul{
left: -100%;
width: 100%
}
#dropmenu li ul li{
overflow: hidden;
width: 200%;
height: 0;
color: #fff;
-moz-transition: .2s;
-webkit-transition: .2s;
-o-transition: .2s;
-ms-transition: .2s;
transition: .2s;
}
#dropmenu li ul li a{
padding: 13px 15px;
background: #FFC373;
text-align: left;
font-size: 12px;
font-weight: normal;
}
#dropmenu li:hover ul li{
overflow: visible;
height: 38px;
border-top: 1px solid #BF8230;
border-bottom: 1px solid #BF8230;
}
#dropmenu li:hover ul li:first-child{
border-top: 0;
}
#dropmenu li:hover ul li:last-child{
border-bottom: 0;
}
#dropmenu li:hover ul li:last-child a{
border-radius: 0 0 3px 3px;
}
</style>
<ul id="dropmenu">
<li><a href="#">Menu1</a>
<ul>
<li><a href="#">Menu1-1</a></li>
<li><a href="#">Menu1-2</a></li>
<li><a href="#">Menu1-3</a></li>
<li><a href="#">Menu1-4</a></li>
</ul>
</li>
<li><a href="#">Menu2</a>
<ul>
<li><a href="#">Menu2-1</a></li>
<li><a href="#">Menu2-2</a></li>
<li><a href="#">Menu2-3</a></li>
</ul>
</li>
<li><a href="#">Menu3</a>
<ul>
<li><a href="#">Menu3-1</a></li>
</ul>
</li>
</ul>
参考URL
この記事は役に立ちましたか?
- EnglishWorm.com
- SinglesFan.com
- LmLab.net
- サイトマップ
- 運営者について