我希望下拉菜单项位于垂直栏中
这就是我一直在做的...我尝试了在网上找到的几件事，例如制作一个包含列表的按钮，但它不起作用，任何人都可以帮助我
.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
此示例具有缩进的子菜单，这是通过指定的额外 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> -
陪伴而非守候
使用选择标签<!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>
随时随地看视频慕课网APP
相关分类
Html5