Question

我知道这个问题已在多个主题中得到解答，但这是不同的。

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

因为代码下拉列表没有按预期显示，我添加了一些代码，这里是结果代码：http://jsfiddle.net/geJmF/（我已将id添加到单个列表中以修复下拉位置）但不知怎的，现在事情还没有发挥作用。

任何人都有任何想法？

Answer 1

将float属性更改为右：

#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

有一些不正确的事情。

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

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

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

下拉列表HTML中的菜单

2 个答案: