Question

我想创建一个下拉菜单，但我遇到了一些问题：

实际上我想创建它而不在<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不是下拉菜单应该是coffe菜单请帮助我没有在<ul>内添加<li>标记。

jsbin link：http://jsbin.com/evasof/1/edit

Answer 1

你走了：

<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;
}

<强> Demo

但在我看来，你应该在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;
}

<强> Demo2

Answer 2

假设您的HTML结构，我们可以看到，当我们尝试在W3C Validator验证此结构为INVALID并且不被接受时。您可以在下面提供的屏幕截图中看到这一点......

Invalid Markup

除了你想要的是无效标记这一事实，CSS-wise也不可能处理悬停状态以使你的子菜单出现。当前标准中没有选择器允许您在悬停在兄弟姐妹上时选择姐妹兄弟。

我的建议是关注它如何在很长一段时间内完成，什么是有效标记，以及在可预见的将来它将如何进行，并将ul嵌套在li内。

Answer 3

<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

Answer 4

您可以使用dl和dt并对其进行相应的设置，但我担心此时您只是将一个标签换成另一个标签。与其他答案一样，您为什么要避免使用ul和li。创建下拉菜单是标签非常擅长的。

<dl>
    <dt>Foo</dt>
    <dt>Bar</dt>
</dl>

在里面创建没有ul的下拉菜单

4 个答案: