下拉多級菜單

時間 2021-08-15

標籤 javascript css html java jquery web bootstrap ide spa htm 欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE HTML>javascript

<html lang="zh-CN">css

<head>html

<title>Bootstrap 3 的多級下拉菜單示例</title>jquery

.dropdown-submenu {htm

position: relative;

}

.dropdown-submenu > .dropdown-menu {

top: 0;

left: 100%;

margin-top: -6px;

margin-left: -1px;

-webkit-border-radius: 0 6px 6px 6px;

-moz-border-radius: 0 6px 6px;

border-radius: 0 6px 6px 6px;

}

.dropdown-submenu:hover > .dropdown-menu {

display: block;

}

.dropdown-submenu > a:after {

display: block;

content: " ";

float: right;

width: 0;

height: 0;

border-color: transparent;

border-style: solid;

border-width: 5px 0 5px 5px;

border-left-color: #ccc;

margin-top: 5px;

margin-right: -10px;

}

.dropdown-submenu:hover > a:after {

border-left-color: #fff;

}

.dropdown-submenu.pull-left {

float: none;

}

.dropdown-submenu.pull-left > .dropdown-menu {

left: -100%;

margin-left: 10px;

-webkit-border-radius: 6px 0 6px 6px;

-moz-border-radius: 6px 0 6px 6px;

border-radius: 6px 0 6px 6px;

}

</style>

</head>

<body>

<h2>Bootstrap 3多級下拉菜單</h2>

<hr>

<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#"

href="javascript:;">

下拉多級菜單 <span class="caret"></span>

</a>

</ul>

</li>

</ul>

</li>

</ul>

</div>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。