在CSS的選項卡上添加下拉菜單
[英]Adding drop menu on tab in CSS
問題描述
在此選項卡上添加下拉菜單時出現問題。
如何在使用下面的CSS時添加任何下拉菜單？
CSS：
body {
font-size: 80%;
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
ul#tabs {
list-style-type: none;
margin: 30px 0 0 0;
padding: 0 0 0.3em 0;
}
ul#tabs li { display: inline }
ul#tabs li a {
color: #42454a;
background-color: #dedbde;
border: 1px solid #c9c3ba;
border-bottom: none;
padding: 0.3em;
text-decoration: none;
}
ul#tabs li a:hover { background-color: #f1f0ee }
ul#tabs li a.selected {
color: #000;
background-color: #f1f0ee;
font-weight: bold;
padding: 0.7em 0.3em 0.38em 0.3em;
}
div.tabContent {
border: 1px solid #c9c3ba;
padding: 0.5em;
background-color: #f1f0ee;
}
div.tabContent.hide { display: none }
目前的HTML：
<html>
<head>
<title></title>
</head>
<body>
<ul id="tabs">
<li><a href="#about">About JavaScript tabs</a></li>
<li><a href="#advantages">Advantages of tabs</a></li>
<li>
<a href="#">Using tabs</a>
<ul>
<li><a href="#usage">Sub-Item #7</a></li>
<li><a href="#">Sub-Item #7</a></li>
</ul>
</li>
</ul>
</body>
</html>
“使用”選項卡和“子項”選項卡應該是我的下拉菜單。
2 個解決方案
解決方案1
2 已采納 2014-03-14 14:30:51
/* CSS FOR DROPDOWN */
#tabs li{
display: block;
float: left;
}
#tabs a {
display: block;
}
#tabs ul li {
display: block;
float: none;
}
#tabs ul {
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
width: auto;
}
#tabs li:hover ul {
visibility: visible;
}
在這里查看 。
解決方案2
0 2014-03-14 14:39:51
我已經解決了您的問題訪問鏈接
CSS
ul#tabs li ul{
display:none;
}
ul#tabs li:hover ul{
display:block;
position:absolute;
z-index:1;
top:65px;
}
ul#tabs li:hover ul li{
float:none;
margin-bottom:20px;
}
CSS下拉菜單，添加另一個<ul>
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.