這就是我一直在做的...我嘗試了在網(wǎng)上找到的幾件事，例如制作一個包含列表的按鈕，但它不起作用，任何人都可以幫助我.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>這不是相同的輸出，但我的觀點是下拉菜單項不在垂直菜單內(nèi)...我不知道你們是否理解我，但我希望你們能理解。
2 回答
犯罪嫌疑人X
TA貢獻2080條經(jīng)驗 獲得超4個贊
此示例具有縮進的子菜單，這是通過指定的額外 css 實現(xiàn)的。如果您想要不同類型的外觀（盒子？自定義項目符號？），請發(fā)表評論。我還刪除了點綴在 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條經(jīng)驗 獲得超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 關(guān)注
- 139 瀏覽
添加回答
舉報
0/150
提交
取消