Question

最近我决定在导航中添加第二个下拉菜单。最初只有一个下拉，所以我使用id属性来标记它。添加第二个时，我认为这就像将id更改为class属性并更改CSS文件中的相应选择器一样简单。然而，情况似乎并非如此。正如您在下面的示例中所看到的，具有类属性的版本在鼠标悬停时无法正常工作，而使用两个id属性的完全相同的导航按预期工作。

我认为这可能与CSS规则的顺序有关。

http://jsfiddle.net/e5d24upa/

HTML：

<body>
<div id="menuholder">
    <ul id="mainmenu">
        <li class="menumem"><a href="#">Item 1</a></li>
        <li class="menumem"><a href="#">Item 2</a></li>
        <li class="submenutop"><a href="#">Item 3</a>
            <ul class="submenu">
                <li><a href="#">SubItem 1</a></li>
                <li class="submenubottom"><a href="#">SubItem 1</a></li>
            </ul>
        </li>
        <li class="submenutop"><a href="#">Item 4</a>
            <ul class="submenu">
                <li><a href="#">SubItem 1</a></li>
                <li><a href="#">SubItem 2</a></li>
                <li><a href="#">SubItem 3</a></li>
                <li><a href="#">SubItem 4</a></li>
                <li class="submenubottom"><a href="#">SubItem 5</a></li>
            </ul>
        </li>
        <li class="menumem"><a href="#">Item 5</a></li>
    </ul>
</div>
</body>

CSS：

.submenu{
display:none;
list-style:none;
width:19%
}

#menuholder ul li:hover > ul{
    display:block
}


#mainmenu{
list-style:none;
display:inline-table;
width:100%;
text-align:center;
font-size:20px
}

#mainmenu li{
    float:left;
    background:#000000;
    width:19%
}
    #mainmenu li:hover{
        background:#FF0000;
    }
        #mainmenu li:hover a{
            color:#FFFFFF
        }

    #mainmenu li a{
        display:block;
        width:100%;
        color:#FFFFFF;
        text-decoration:none
    }


.submenu{
    padding:0;
    position:absolute

}

    .submenu li{ 
        position:relative;
        width:100%;
        background:#000000
    }
        .submenu li a{
            width:100%;

        }
        .submenu li:hover{
            background:#FF0000
        }
            .submenu li a:hover{
                color:#FFFFFF
            }

.menumem{
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px
}
.submenutop{
    -moz-border-radius:15px 15px 0 0;
    -webkit-border-radius:15px 15px 0 0;
    border-radius:15px 15px 0 0
}

.submenubottom{
    -moz-border-radius:0 0 15px 15px;
    -webkit-border-radius:0 0 15px 15px;
    border-radius:0 0 15px 15px
}

http://jsfiddle.net/1n5f7dh1/

HTML：

<body>
<div id="menuholder">
    <ul id="mainmenu">
        <li class="menumem"><a href="#">Item 1</a></li>
        <li class="menumem"><a href="#">Item 2</a></li>
        <li class="submenutop"><a href="#">Item 3</a>
            <ul id="submenu2">
                <li><a href="#">SubItem 1</a></li>
                <li class="submenubottom"><a href="#">SubItem 1</a></li>
            </ul>
        </li>
        <li class="submenutop"><a href="#">Item 4</a>
            <ul id="submenu">
                <li><a href="#">SubItem 1</a></li>
                <li><a href="#">SubItem 2</a></li>
                <li><a href="#">SubItem 3</a></li>
                <li><a href="#">SubItem 4</a></li>
                <li class="submenubottom"><a href="#">SubItem 5</a></li>
            </ul>
        </li>
        <li class="menumem"><a href="#">Item 5</a></li>
    </ul>
</div>
</body>

CSS：

#submenu,#submenu2{
display:none;
list-style:none;
width:19%
}

#menuholder ul li:hover > ul{
    display:block
}


#mainmenu{
list-style:none;
display:inline-table;
width:100%;
text-align:center;
font-size:20px
}

#mainmenu li{
    float:left;
    background:#000000;
    width:19%
}
    #mainmenu li:hover{
        background:#FF0000;
    }
        #mainmenu li:hover a{
            color:#FFFFFF
        }

    #mainmenu li a{
        display:block;
        width:100%;
        color:#FFFFFF;
        text-decoration:none
    }


#submenu,#submenu2{
    padding:0;
    position:absolute

}

    #submenu li,#submenu2 li{ 
        position:relative;
        width:100%;
        background:#000000
    }
        #submenu li a,#submenu2 li a{
            width:100%;

        }
        #submenu li:hover,#submenu2 li:hover{
            background:#FF0000
        }
            #submenu li a:hover,#submenu2 li a:hover{
                color:#FFFFFF
            }

.menumem{
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px
}
.submenutop{
    -moz-border-radius:15px 15px 0 0;
    -webkit-border-radius:15px 15px 0 0;
    border-radius:15px 15px 0 0
}

.submenubottom{
    -moz-border-radius:0 0 15px 15px;
    -webkit-border-radius:0 0 15px 15px;
    border-radius:0 0 15px 15px
}

Answer 1

包含下拉列表的ul是其父级的100％，但其中的li是19％。这来自您的顶级#mainmenu li规则，该规则覆盖了.submenu li。您可以通过设置.submenu li的{{1}}来破解它，正如其他人已经指出的那样，但是这会影响以后的可读性，那时您将尝试对更复杂的级联进行故障排除。

CSS选择它认为每个属性最具体的规则。 ID比类更具体，即使该类位于更靠近您想要更改的元素上。

将.submenu li变为 #mainmenu .submenu li ，并且较低级别的下拉规则将优先。

width:100%!important;

Answer 2

在这种情况下，覆盖#mainmenu li属性的.submenu li css属性只会对.submenu li进行以下更改。

.submenu li {
    position: relative;
    width: 100% !important;/*Changed*/
    background: #000000 !important; /*Changed*/
}

<强> DEMO

Answer 3

首先，您需要将.submenu中的宽度参数从width:19%更改为width:100%。其次，您需要添加.submenu li clear:both参数。

建议：如果使用％来定义宽度，则需要知道宽度，填充和边距参数加起来。因此，如果您希望您的元素填充100％而不会溢出上述参数应该加起来100％例如：

.myClass {
    width:92%;
    padding:2%;
    margin:2%;
}

元素的总宽度=宽度+（2 *填充）+（2 *边距）

下拉菜单适用于ID但不适用于类

3 个答案: