html导航栏的列表下拉菜单,网站前端 用户列表导航栏下拉菜单

/p>

做

ul {

width: 276px;

}

li {

cursor: pointer;

}

.menu_demo {

font-size: 13px;

content: ” “;

list-style: none;

margin: 10% 40%;

}

.menu_demo>li {

padding: 1.2em;

background-color: #e4644b;

border-bottom: solid #AEB4BB 1px;

box-sizing: border-box;

}

.menu_demo>li:first-child {

border-radius: 17px 17px 0 0;

}

.menu_demo>li:last-child {

border-radius: 0 0 17px 17px;

}

.menu_child {

box-sizing: border-box;

background-color: #74777b;

display: none;

}

.menu_child>li {

list-style: none;

margin-left: -10px;

padding: 2% 0;

}

span {

color: #ffffff;

}

.expand-triangle {

background: url(“/images/gulp/expand-transp.gif”);

height: 10px;

width: 276px;

content: ” “;

margin-left: -40px;

}

.message {

float: right;

display: inline;

}

–>

Account

Basics

Pictures

Go premium

–>

Messages

23

News

Sents

Trash

–>

Setting

Language

Password

Notifications

–>

Logout

var $menu_demo = $(‘.menu_demo’);

$menu_demo.on(‘click’, ‘li’, function () {

$(this).next(‘.menu_child’).slideToggle().siblings(‘.menu_child’).slideUp();

});