1

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

实际上我想创建它而不在<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不是下拉菜单，它应该是咖啡菜单，请帮助我，不要<ul>在<li>.

jsbin 链接：http: //jsbin.com/evasof/1/edit

4

4 回答 4

3

干得好：

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

演示

但在我看来，你应该使用 a ulinside that 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

于 2013-05-08T13:07:27.670 回答
1

假设上面的 HTML 结构，我们可以看到，当我们尝试在W3C 验证器上验证它时，该结构是无效的，并且不被接受。您可以从下面提供的屏幕截图中看到这一点...

无效标记

除了您想要的是无效标记这一事实之外，CSS 方面也无法处理悬停状态以使您的子菜单出现。当前标准中没有选择器允许您在将鼠标悬停在兄弟姐妹上时选择姐妹兄弟姐妹。

ul我的建议是遵循它多年来的做法，什么是有效标记，以及在可预见的未来它将如何，并将li.

于 2013-05-08T13:12:55.793 回答
0 
<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
于 2013-05-08T12:57:03.163 回答
0

您可以相应地使用dl和dt设置它们的样式，但恐怕那时您只是在用一个标签换另一个标签。与其他答案一样，您为什么要避免使用uland li。创建下拉菜单是标签非常擅长的事情。

<dl>
    <dt>Foo</dt>
    <dt>Bar</dt>
</dl>
于 2013-05-08T13:20:45.270 回答