<ul class="dropdown"> <li> <a href="#">Item1</a> <ul class="nest"> <li>Item1-1</li> <li>Item1-2</li> <li>Item1-3</li> </ul> </li> <li> <a href="#">Item2</a> <ul class="nest"> <li>Item2-1</li> <li>Item2-2</li> <li>Item2-3</li> <li>Item2-4</li> <li>Item2-5</li> </ul> </li> <li> <a href="#">Item3</a> <ul class="nest"> <li>Item3-1</li> <li>Item3-2</li> <li>Item3-3</li> <li>Item3-4</li> </ul> </li> <li> <a href="#">Item4</a> <ul class="nest"> <li>Item4-1</li> <li>Item4-2</li> </ul> </li> </ul>
body { overflow: hidden; font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo, sans-serif; color: #343434; background: #454545; } a { color: inherit; text-decoration: none; } ul { list-style: none; } .dropdown { padding: 0; background-color: #73BF67; border-top-left-radius: 5px; border-top-right-radius: 5px; *zoom: 1; } .dropdown:before, .dropdown:after { content: ""; display: table; } .dropdown:after { clear: both; } .dropdown > li { width: 25%; float: left; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; height: 2em; line-height: 2em; position: relative; } .dropdown > li a { width: 100%; text-align: center; display: block; } .dropdown > li:not(:last-child) a { border-right: 1px solid rgba(60, 60 ,60, .2); } .dropdown > li:hover .nest > li { opacity: 1; background-color: #D1F1CC; } .nest { font-size: .8em; height: auto; padding: 0; width: 100%; position: absolute; z-index: 1; transition: height .2s linear 0s; -webkit-transition: height .2s linear 0s; -moz-transition: height .2s linear 0s; overflow: hidden; } .nest > li { width: 100%; border-bottom: 1px solid rgba(60, 60, 60, .2); padding-left: 1em; transition: color .2s linear 0s; -webkit-transition: color .2s linear 0s; -moz-transition: color .2s linear 0s; cursor: pointer; opacity: 0; background-color: transparent; } .nest > li:before { content: "くコ:彡 "; } .nest > li:first-child { transition: opacity,background-color .2s linear 0s; -webkit-transition: opacity,background-color .2s linear 0s; -moz-transition: opacity,background-color .2s linear 0s; } .nest > li:first-child:after { content: ""; position: absolute; top: 0; left: 6.6em; border-left: 1em solid transparent; border-right: 1em solid transparent; border-top: 1em solid #73BF67; } .nest > li:nth-child(2) { transition: opacity,background-color .2s linear 0.05s; -webkit-transition: opacity,background-color .2s linear 0.05s; -moz-transition: opacity,background-color .2s linear 0.05s; } .nest > li:nth-child(3) { transition: opacity,background-color .2s linear 0.1s; -webkit-transition: opacity,background-color .2s linear 0.1s; -moz-transition: opacity,background-color .2s linear 0.1s; } .nest > li:nth-child(4) { transition: opacity,background-color .2s linear 0.15s; -webkit-transition: opacity,background-color .2s linear 0.15s; -moz-transition: opacity,background-color .2s linear 0.15s; } .nest > li:nth-child(5) { transition: opacity,background-color .2s linear 0.2s; -webkit-transition: opacity,background-color .2s linear 0.2s; -moz-transition: opacity,background-color .2s linear 0.2s; } .nest > li:hover { color: #73BF67; } .nest > li:first-child { padding-top: .8em; }