Question

这是问题所在。我有一个很好的风格导航。然后我添加了这一侧可折叠/可扩展树子菜单，并且顶部导航栏变形了。我知道顶部导航和侧面菜单的样式li元素存在一些冲突。我只是无法弄清楚究竟是什么以及如何解决它。也许你会发现它。这是URL： http://eximi.dreamhosters.com/Hawaii/pkdiet/pkd.php 您可以看到菜单上的最后一项 - “联系我们”跳转到第二行，这不应该发生。

这是我与该问题相关的CSS：

/ 主导航 /

#menu {
    position: relative;
    float: left;
    margin-left: 132px; 
}

#menu li{
    display:inline;
    height: 33px;
    line-height: 33px;
    text-align: center;
    padding-right: 30px;
    color:#5a5a5a;
    font-family: Tunga, sans-serif;
    font-size: 14px;
}

.menu_item  a:link {
    float: left;
    height: 33px;
    line-height: 33px;
    text-align: center;
    padding-right: 30px;
    color:#5a5a5a;
    font-family: Tunga, sans-serif;
    font-size: 14px;
}

.menu_item  a:visited {
    float: left;
    height: 33px;
    line-height: 33px;
    text-align: center;
    padding-right: 30px;
    color:#5a5a5a;
    font-family: Tunga, sans-serif;
    font-size: 14px;
}

.menu_item a:hover {
    color:#1e1d1d;
}

/* CSS Tree menu styles */
ol.tree
{
    padding: 0 0 0 30px;
    width: 130px;
}
    li 
    { 
        position: relative; 
        margin-left: -15px;
        list-style: none;
    }
    li.file
    {
        margin-left: -1px !important;
    }
        li.file a
        {
            color: #fff;
            padding-left: 21px;
            text-decoration: none;
            display: block;
        }
    li input
    {
        position: absolute;
        left: 0;
        margin-left: 0;
        opacity: 0;
        z-index: 2;
        cursor: pointer;
        height: 1em;
        width: 1em;
        top: 0;
    }
        li input + ol
        {
            background: url(images/toggle-small-expand.png) 40px 0 no-repeat;
            margin: -0.938em 0 0 -44px;
            xdisplay: block;
            height: 1em;
        }
        li input + ol > li { height: 0; overflow: hidden; margin-left: -14px !important; padding-left: 1px; }
    li label
    {
        cursor: pointer;
        display: block;
        padding-left: 17px;
    }

    li input:checked + ol
    {
        background: url(images/toggle-small.png) 40px 5px no-repeat;
        margin: -1.25em 0 0 -44px; 
        padding: 1.563em 0 0 80px;
        height: auto;
    }
        li input:checked + ol > li { height: auto; margin: 0 0 0.125em;}
        li input:checked + ol > li:last-child { margin: 0 0 0.063em;}

Answer 1

你的文档类型错误，迫使页面进入quirks mode，因此它永远不会按预期工作，特别是在IE上。

Answer 2

我的建议是设置

#toggle
{
    margin-top: 54px;
    float:right;
    /*remove clear:both and margin-right:70px*/
}

#menu {
    position: relative;
    float: left;
    margin-left: 132px; 
    width: 920px; /*in accordance with #wrapper*/
}

Answer 3

第一：特异性。 Ids覆盖类，类覆盖元素。如果应用多种样式，则应用最具体的样式。这是按行完成的，因此您只需要覆盖要更改的内容。

如果您不想要菜单项的边距，则应添加

#menu li {
    margin-left: 0;
}

稍后取消margin-left: -15px;元素样式中的li。

此外，我不会使用课程.menu_item，而是使用#menu li定位这些项目。每个.menu_item都位于#menu中，li中的每个#menu都是一个菜单项，因此无需引入更多类。

<强>更新

我想我发现了问题。需要从.menu_item a:link {中删除这两行：

float: left;
padding-right: 30px;

内联元素中的浮动元素似乎效果不佳。

冲突<li>样式</li>

3 个答案: