在里面創建沒有ul的下拉菜單
[英]Create drop down menu without ul inside li
問題描述
我想創建一個下拉菜單，但我遇到了一些問題：
其實我想無需對創建<ul>里面的標簽<li>標記，以便代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul>
<li><a>Coffee</a></li>
<ul><li><a>Coffee 2</a></li></ul>
<li><a>Tea</a></li>
<li><a>Milk</a></li>
</ul>
</body>
</html>
和css代碼：
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
z-index: 1;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}
您可以看到Coffee 2不是下拉菜單應該是咖啡菜單請幫助我而不在<li>制作<ul>標簽。
jsbin鏈接： http ：//jsbin.com/evasof/1/edit
4 個解決方案
解決方案1
3 已采納 2013-05-08 13:07:27
干得好：
<ul>
<li class="dpdwn"><a>Coffee</a><div><a>Coffe 2</a></div></li>
<li><a>Tea</a></li>
<li><a>Milk</a></li>
</ul>
額外的css：
.dpdwn div{
display: none;
}
.dpdwn:hover div {
display:block;
}
但在我看來，你應該使用ul里面li 。 這是一個例子：
<ul>
<li class="dpdwn"><a>Coffee</a>
<ul>
<li><a>Coffe 2</a></li>
</ul>
</li>
<li><a>Tea</a></li>
<li><a>Milk</a></li>
</ul>
同樣額外的CSS：
.dpdwn ul{
display: none;
}
.dpdwn:hover ul {
display:block;
}
解決方案2
1 2013-05-08 13:12:55
假設您的HTML結構如上所述，我們可以看到，當我們在W3C Validator上嘗試驗證它是否為INVALID並且不被接受時。 你可以從下面提供的截圖中看到這個...
除了你想要的是無效標記之外，CSS-wise也不可能處理懸停狀態以使你的子菜單出現。 當前標准中沒有選擇器允許您在懸停在兄弟姐妹上時選擇姐妹兄弟。
我的建議是遵循它如何做多年，有效標記是什么，以及它在可預見的未來將如何，並將ul嵌入li 。
解決方案3
0 2013-05-08 12:57:03
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul>
<li><a>Coffee</a>
<ol><a>Coffe 2</a></ol></li>
<li><a>Tea</a></li>
<li><a>Milk</a></li>
</ul>
</body>
</html>
you can use <ol> tag within <li> tag see above example
解決方案4
0 2013-05-08 13:20:45
您可以使用dl和dt並相應地設置它們，但我擔心在那一點上您只是將一個標簽換成另一個標簽。 與其他答案一樣，你為什么要避免使用ul和li 。 創建下拉菜單是標簽非常擅長的。
<dl>
<dt>Foo</dt>
<dt>Bar</dt>
</dl>
CSS菜單ul ul li下拉菜單在7或6中不起作用，請幫助
[英]CSS menu ul ul li drop down menu not working in i.e 7 or 6 please help
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.