html - 列表 HTML 中的下拉菜单

Question

我知道这个问题已经在几个线程中得到了回答，但这是不同的。

我正在使用 css 进行悬停下拉，一切正常：这是代码：http: //jsfiddle.net/2UJDe/

因为，代码下拉列表没有像预期的那样好，我添加了一些代码，这里是生成的代码：http: //jsfiddle.net/geJmF/ （我已将 id 添加到单个列表以修复下拉位置）但不知何故现在事情不正常了。

有人知道吗？

Answer 1

将浮动属性更改为右侧：

#navbar_2 li a
{
    background : #878787;
    color : white;
    float : right;

并更改一些高度和宽度，菜单 2 选项卡看起来像：http: //jsfiddle.net/jvKRN/35/

这里的 CSS：

#navbar_2
{
    height : 200px;
    left : 140px;
    overflow : hidden;
    position : absolute;
    top : 70px;
    width : 800px;
    display : inline-table;
    list-style : none;
    margin : 0;
    padding : 0;
    table-layout : fixed;

}

#navbar_2 li
{
    background-color : #878787;
    display : table-cell;

}

#navbar_2 li a
{
    background : #878787;
    color : white;
    float : right;
    font-family : Arial,sans-serif;
    font-size : 32px;
    height : 100.000%;
    line-height : 200px;
    padding : 0px 0;
    text-align : center;
    text-decoration : none;
    white-space : nowrap;
    width : 100%;

    border-left : 1px solid black;
}

#navbar_2 li a:hover
{
    background : black;
     color : white;

}

#navbar_2 li:hover ul
{
    left: auto;

}

#navbar_2 li ul
{
    position: absolute;
    width: 200px;
    left: -999em;

}

#navbar_2_1
{
    display : inline;
    height : 600px;
    list-style : none;
    overflow : hidden;
    position : absolute;
    table-layout : auto;
    top : 200px;
    width : 200px;

}
#navbar_2_2
{
    display : inline;
    height : 600px;
       list-style : none;
    margin : 0;
    overflow : hidden;
    padding : 0;
    position : absolute;
    table-layout : auto;
    top : 200px;
    width : 200px;

}

#navbar_2_3
{
    display : inline;
    height : 600px;
    left : 740px;
    list-style : none;
    margin : 0;
    overflow : hidden;
    padding : 0;
    position : absolute;
    table-layout : auto;
    top : 200px;
    width : 200px;

}

Answer 2

有几处不正确。

我不确定您为什么使用表格单元格显示属性，它们不是必需的，并且可能会阻碍您的显示。

其次，因为我们正在处理行为不同的多个导航级别，我们需要能够定位/限制我们的样式。在这种情况下，我在我的样式中使用了子选择 ( > ) 来执行此操作。

这是一个工作小提琴：http: //jsfiddle.net/Nb4zU/