Аранжировка дивы параллельно в подменю

Question

Я пытаюсь создать меню со списком уль в качестве основного меню и набор дивы как подменю, то HTML и CSS следующим образом,

---

<ul> 
    <li><a>AAAAAA</a> 
     <div class="m-div group"> 
      <div class="child"> 
       <a>ITEM One</a><br /> 
       <a>ITEM One</a><br /> 
       <a>ITEM One</a><br /> 
      </div> 
      <div class="child"> 
       <a>ITEM Two</a><br /> 
       <a>ITEM Two</a><br /> 
       <a>ITEM Two</a><br /> 
      </div> 
      <div class="child"> 
       <a>ITEM Three</a><br /> 
       <a>ITEM Three</a><br /> 
       <a>ITEM Three</a><br /> 
      </div> 
     </div> 
    </li> 
    <li><a>BBBBBBB</a></li> 
    <li><a>CCCCCCC</a></li> 
    <li><a>DDDDDDD</a></li> 
</ul> 

---

* { 
     padding: 0px; 
     margin: 0px; 
    } 
    ul { 
     position: relative; 
     float: left; 
    } 

     ul li { 
      position: relative; 
      display: inline-block; 
      float: left; 
      list-style: none; 
      margin-left: 10px; 
     } 

    .m-div { 
     background-color: lightgray; 
     float: left; 
     position: absolute; 
    } 

    .child { 
     float: left; 
     width: 150px; 
    } 

---

Но этот код делает меню как,

мне нужно в подменю появиться бок о бок, как,

Как я могу решить эту проблему?

Answer 1

Пожалуйста, проверьте здесь JsFiddle Demo

Вы должны дать Див group

.m-div { 
     background-color: lightgray; 
     position: absolute; 
     width: 500px; 
} 

Answer 2

ширина пут для м-DIV

.m-div { 
     background-color: lightgray; 
     float: left; 
     position: absolute; 
    width:400px; 
    } 

    .child { 
     float: left; 
     width: 100px; 
    } 

http://jsfiddle.net/98EdQ/3/

Answer 3

Спасибо, ребята. Единственный способ - добавить явную ширину в родительский div подменю.