纯css菜单水平，全宽子菜单在固定位置标题中展开

Question

带子菜单测试的菜单

请注意，我已经实施了两个包含子菜单的水平菜单。但是，我希望通过扩展子菜单实现右侧所示菜单的效果，以便按下固定标题。我是否将右侧菜单上的ul hover上的css更改为相对位置，以下菜单项向下移动。但是，我是否也设置ul固定或绝对，它不会向下扩展固定标题，只是在z-index等顶部。另一方面，第二个菜单包含顶部菜单元素中的子菜单并更改其宽度，相反，我希望子菜单在悬停时扩展整个宽度，而顶部菜单项保持不变。第二个扩展固定标题，如您所见。 任何输入都非常受欢迎。试图在没有jquery的情况下完成它。

Answer 1

请参阅js小提琴代码：http://jsfiddle.net/m71mchow/5/

 <header>
       <div class="logo">IMAGE</div>
     <nav id="navbar">
           <ul>
               <li>
                  <a href="#">Menu1-</a> 
                   <ul class="sub_menu">
                       <li>Menu1 subitem1</li>
                       <li>Menu1 subitem2</li>
                       <li>Menu1 subitem3</li>
                       <li>Menu1 subitem4</li>
                       <li>Menu1 subitem5</li>
                   </ul>

               </li>
               <li>
                  <a href="#">Menu2-</a> 
                    <ul class="sub_menu">
                       <li>Menu2 subitem1</li>
                       <li>Menu2 subitem2</li>
                       <li>Menu2 subitem3</li>
                       <li>Menu2 subitem4</li>
                       <li>Menu2 subitem5</li>
                   </ul>

               </li>
               <li>Menu3</li>
               <li>Menu4</li>
               <li>Menu5</li>
               <li>Menu5</li>
           </ul>
       </nav>
 </header>

和css：

     body { margin:0; padding:0;
  font-family:Arial
        }
.sub_menu li:hover {
    background: none repeat scroll 0 0 #fff !important;
    color: #444;
    width: 100%;
}

.logo{   font-size: 22px;
    margin: 5px 0 0 19px;}
#navbar ul > li:hover{background-color:#444;}
header {
    background-color: #777;
    box-shadow: 1px 2px 3px #000;
    color: #fff;
    float: left;
    width: 100%;
    z-index: 1;
}
#navbar {
    float: left;
    width: 100%;
}
ul { margin:0; padding:0

}

li, a {
  float: left; color:#fff; text-decoration:none;

    text-align: center;
    list-style:none;
}

        .sub_menu {
        display:none; position:absolute; background-color: #444;

    left: 0;
    top: 60px;
    width: 150px;}

     #navbar ul > li {
    height: 60px;
    line-height: 60px;
    position: relative; padding-left: 2%;
    padding-right: 2%;
}
        #navbar ul li:hover .sub_menu {
        display:block; }

Answer 2

请参阅随附的屏幕截图：