这就是我一直在做的...我尝试了在网上找到的几件事，例如制作一个包含列表的按钮，但它不起作用，任何人都可以帮助我.vertical-menu { display: block; /*padding-top: 150px;*/ margin-left: 50px; width: 200px; /* Set a width if you like */ height: 200px; margin-bottom: 50%;}.vertical-menu a { background-color: #eee !important; /* Grey background color */ color: black !important; /* Black text color */ display: block !important; /* Make the links appear below each other */ padding: 12px; /* Add some padding */ text-decoration: none; /* Remove underline from links */}.vertical-menu a:hover { background-color: #ccc !important; /* Dark grey background on mouse-over */}.vertical-menu a.active { background-color: #4CAF50 !important; /* Add a green color to the "active/current" link */ color: white !important;}<div class="vertical-menu"> <a href="#" class="">Home</a> <div class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#" >Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </div> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> <a href="#">Link 6</a> <a href="#">Link 7</a>这不是相同的输出，但我的观点是下拉菜单项不在垂直菜单内...我不知道你们是否理解我，但我希望你们能理解。
2 回答
犯罪嫌疑人X
TA贡献2080条经验 获得超4个赞
此示例具有缩进的子菜单，这是通过指定的额外 css 实现的。如果您想要不同类型的外观（盒子？自定义项目符号？），请发表评论。我还删除了点缀在 css 周围的多个 !important 。
希望这可以帮助
.vertical-menu {
display: block;
/*padding-top: 150px;*/
margin-left: 50px;
width: 200px;
/* Set a width if you like */
height: 200px;
margin-bottom: 50%;
}
.vertical-menu a {
background-color: #eee;
/* Grey background color */
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
/*extra css*/
.dropdown-menu {
display: none;
margin: 0px 0px 0px 12px;
padding: 3px 6px;
}
.dropdown {
background-color: #eee;
}
.dropdown ul {
position: relative;
list-style-type: none;
margin: 0px 0px 0px 12px;
background-color: #eee;
padding-left: 0px;
padding-bottom: 6px;
}
.vertical-menu .dropdown ul a {
padding: 6px;
}
.dropdown-toggle:hover>.dropdown-menu {
display: block;
}
/* end extra*/
.vertical-menu a:active {
background-color: #4CAF50;
/* Add a green color to the "active/current" link */
color: white;
}
<div class="vertical-menu">
<a href="#" class="">Home</a>
<div class="dropdown">
<ul class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</ul>
</div>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
<a href="#">Link 6</a>
<a href="#">Link 7</a>
</div>
陪伴而非守候
TA贡献1757条经验 获得超8个赞
使用选择标签
<!DOCTYPE html>
<html>
<body>
<h1>The select element</h1>
<p>The select element is used to create a drop-down list:</p>
<label for="cars">Choose a car:</label>
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
- 2 回答
- 0 关注
- 90 浏览
添加回答
举报
0/150
提交
取消