$(function() { var $switch = $("nav > ul > li"); var $list = null; $switch.on({ "mouseover": function() { $list = $(this).find("ul"); $list.slideDown(200); }, "mouseleave": function() { $list.slideUp(200); } }); });
<nav> <ul> <li> <ul> <li><a href="">list1</a></li> <li><a href="">list2</a></li> <li><a href="">list3</a></li> <li><a href="">list4</a></li> </ul> <a href="">nav1</a> </li> <li> <ul> <li><a href="">list1</a></li> <li><a href="">list2</a></li> <li><a href="">list3</a></li> <li><a href="">list4</a></li> <li><a href="">list5</a></li> </ul> <a href="">nav2</a> </li> <li> <ul> <li><a href="">list1</a></li> <li><a href="">list2</a></li> <li><a href="">list3</a></li> </ul> <a href="">nav3</a> </li> </ul> </nav>
a { color: inherit; text-decoration: none; } ul { list-style: none; padding: 0; margin: 0; } li > ul { display: none; /* 初期 */ } nav { width: 25em; } nav > ul { display: table; width: inherit; } nav > ul > li { display: table-cell; text-align: center; } nav > ul > li:not(:last-of-type) > a { border-right: 1px solid lighten(#3c3c3c, 10%); } nav > ul > li > a { color: #f8f8f8; background-color: #3c3c3c; padding: .5em; display: block; } nav li li > a { line-height: 1.7; display: block; } nav li li { &:hover { background-color: darken(#f8f8f8, 20%); } } nav li li:not(:last-of-type) { border-bottom: 1px dashed #3c3c3c; }