Question

我正在努力实现this effect。

假设我们有这样的结构：

<ul id="menu">
    <li><a href="#">Guides</a>
        <ul>
            <li><a href="#">Getting Started</a></li>
            <li><a href="#">Characters</a></li>
            <li><a href="#">Epics</a></li>
            <li><a href="#">Road Map</a></li>
        </ul>
    </li>
    <li><a href="#">Skills</a></li>
    <li><a href="#">Equipments</a></li>
</ul>

这个简化的CSS：

ul#menu {
    display:inline-block;
    list-style-type:none;
    padding:0;
    height:30px; /* So the ul#menu's height isn't changed by the ul#menu>li>ul */
    overflow:visible; /* So the ul#menu>li>ul is visible on ul#menu>li:hover */
    background: #e69646;
    box-shadow:0 2px 3px 0 #666;
}

ul#menu>li>ul {
    list-style-type:none;
    padding:0;
    position:absolute;
    background:inherit; /*  */
    box-shadow:inherit;
}

问题是在绝对定位上使用ul＃menu＆gt; li＆gt; ul会使它失去背景渐变和阴影。 background:inherit和box-shadow:inherit会产生this result。

有没有办法达到预期的效果？

提前谢谢你们：）

Answer 1

这就是我的方式 - http://jsfiddle.net/bh6L5/3/

<ul id="menu">
    <li><a href="#">Guides</a>
        <ul>
            <li><a href="#">Getting Started</a></li>
            <li><a href="#">Characters</a></li>
            <li><a href="#">Epics</a></li>
            <li><a href="#">Road Map</a></li>
            <div id="fake">Guides</div>
        </ul>
    </li>
    <li><a href="guides.html">Skills</a></li>
    <li><a href="guides.html">Equipments</a></li>
</ul>

然后将此添加到您的css

#fake {
    position:absolute;
    width:45px;
    height:31px;
    padding:0 10px;
    background: #e69646; 
    z-index:999;
    top: -31px;
    left:0px; 
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    -webkit-border-radius-topleft:5px;
    -webkit-border-radius-topright:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;
}

如何防止<li>中的绝对位置<ul>改变其宽度？</li> </ul>

1 个答案: