css - 具有自动宽度的悬停线位于元素菜单下

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;

它会起作用的。检查这个 fiddle :JSFIDDLE