Html CSS下拉子菜单比父菜单宽

我试图使我的导航子菜单比父菜单更宽。这不管用。我在菜单中添加了以下CSS：

nav {
    background:#302583;
    height:45px;
}
nav>div>ul {
    list-style: none;
    position: relative;
}
nav>div>ul>li {
    display:inline-block;
    margin:15px 30px;
    position:relative;
}
nav>div>ul>li>a, ul.sub-menu>li>a {
    color:#ccccff;
    font-size:14px;
    text-transform: uppercase;
    font-family:'Varela';
    font-weight:normal;
    text-decoration: none;
}
ul.sub-menu>li>a {
    border-bottom:1px solid #e3030e;
    padding:5px 10px;
}
nav>div>ul>li>ul.sub-menu {
    left: -9999px;
    position: absolute;
    z-index:10;
    background:#302583;
    float:left;
}
nav>div>ul>li>ul.sub-menu>li {
    padding: 5px;
    float:none;
}
nav ul>li:hover ul.sub-menu {
    left: 0;
}

使用以下HTML：

<nav>
   <div class="container">
      <ul id="menu-hoofdmenu" class="menu">
          <li><a href="/">Homepage</a></li>
          <li><a href="/?page_id=13">Professionals</a>
              <ul class="sub-menu">
              <li><a href="/?page_id=19">Werken in de industrie</a></li>
              </ul>
          </li>
          <li><a href="/?page_id=11">Diensten</a>
              <ul class="sub-menu">
             <li><a href=/?page_id=17">Projecten</a></li>
                 <li><a href="/?page_id=15">Werkwijze</a></li>
               </ul>
          </li>
          <li><a href="/?page_id=35">Contact</a></li>
      </ul>
   </div>
</nav>

在这里查看了几种解决方案，但发现了为什么子菜单不会比父菜单宽的问题。

增加

ul的宽度（实际上是添加，因为以前没有）

nav>div>ul>li>ul.sub-menu {
    left: -9999px;
    position: absolute;
    z-index:10;
    background:#302583;
    float:left; 

    width: 300px; /* <---This one */
}

nav>div>ul>li>ul.子菜单{
左：-9999px；
位置：绝对位置；
z指数：10；
背景:#302583；
浮动：左；
宽度：300px；/*在nav>div>ul>li>ul.子菜单上设置宽度

nav > div > ul > li > ul.sub-menu {
    background: none repeat scroll 0 0 #302583;
    float: left;
    left: -9999px;
    position: absolute;
    width: 120%;
    z-index: 10;
 }

以下是创建菜单的正确语法

nav{ background-color:#302583; float:left; width:100%}
nav ul{ position: relative; float:left; margin:0;}
    nav li{ list-style: none; position:relative; float:left;}
        nav a { padding:20px; color:#ccccff; font:normal 14px 'Varela'; text-transform:uppercase; text-decoration: none; display:block; }

            nav ul.sub-menu { padding:0; display:none; position:absolute; background:#302583; }
                nav ul.sub-menu li{ }
                    nav ul.sub-menu a{ border-bottom:1px solid #e3030e;}

            nav li:hover ul.sub-menu{ display:block }

JsFiddle：