Question

需要你的帮助。我有项目菜单和自动宽度的底线，具体取决于菜单项。

http://jsfiddle.net/wS45c/ - 此红线必须在灰色悬停内。怎么做？盒子阴影没有帮助:(

HTML
                <nav class="menu">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Information</a></li>
                        <li><a href="#">New</a></li>
                        <li><a href="#">Price</a></li>
                        <li><a href="#">Shop</a></li>
                        <li><a href="#">Contacts</a></li>
                    </ul>
                </nav>

CSS 

.menu li {
    display: inline-block;
    vetical-align: top;
}

.menu a {
    display: block;
    text-decoration: none;
    color: #fff;
    padding: 30px 20px;
    text-align: center;
}

.menu a:hover {
    background: #242424;
    box-shadow: 0 25px 0 -20px red;
}

Answer 1

您只需更改此行：

box-shadow: 0 25px 0 -20px red;

要：

box-shadow: 0px -5px 0px 0px red inset;

它会起作用。结帐这个小提琴：JSFIDDLE

具有自动宽度的悬停线位于项目菜单下

1 个答案: