无法获得下拉菜单的子菜单与其父级具有相同的宽度

Question

我是一名HTML / CSS新手，我似乎无法让我的子菜单与其父菜单具有相同的宽度。

http://jsfiddle.net/whitelatino/g8Lxxksg/1/

HTML：

<nav>
    <ul>
        <li><a href="#">Musiker del</a> 

        <ul>
            <li><a href="#"> Musikere </a> 
            </li>
            <!--Make litte hover color change for all nav -->
            <li><a href="#"> Koncerter</a> 
            </li>
        </ul>
        <li><a href="#">Hyr Kunstnere</a> 
        </li>
        <li><a href="#">Forum</a> 
        </li>
        <li><a href="#">Kontakt</a> 
        </li>
    </ul>
</nav>

Answer 1

为此

添加静态宽度

nav ul ul li a {
    border:1px solid #ccc;
    padding: 15px 40px;
    width:50px;
    background-color:#FFF;
}