Разбить родителя div

Question

У меня есть меню и подменю, которые имеют ширину 200 пикселей. Родитель меню имеет ширину 250 пикселей. когда содержимое родительского меню слишком длинное, подменю невозможно показать полностью. Я бы хотел, чтобы скользящее подменю было полностью показано! Here пример

p, 
 
ul, 
 
li, 
 
div, 
 
nav { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
body { 
 
    font-family: Calibri; 
 
} 
 
#menu { 
 
    overflow: auto; 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 
.parent-menu { 
 
    background-color: #0c8fff; 
 
    min-width: 200px; 
 
    float: left; 
 
} 
 
#menu ul { 
 
    list-style-type: none; 
 
} 
 
#menu ul li a { 
 
    padding: 10px 15px; 
 
    display: block; 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
.dad { 
 
    width: 250px; 
 
} 
 
#menu ul li a:hover { 
 
    background-color: #007ee9; 
 
} 
 
#menu ul li:hover > ul { 
 
    left: 200px; 
 
    -webkit-transition: left 200ms ease-in; 
 
    -moz-transition: left 200ms ease-in; 
 
    -ms-transition: left 200ms ease-in; 
 
    transition: left 200ms ease-in; 
 
} 
 
#menu ul li > ul { 
 
    position: absolute; 
 
    background-color: #333; 
 
    top: 0; 
 
    left: -200px; 
 
    min-width: 200px; 
 
    z-index: -1; 
 
    height: 100%; 
 
    -webkit-transition: left 200ms ease-in; 
 
    -moz-transition: left 200ms ease-in; 
 
    -ms-transition: left 200ms ease-in; 
 
    transition: left 200ms ease-in; 
 
} 
 
#menu ul li > ul li a:hover { 
 
    background-color: #2e2e2e; 
 
}

<div class="dad"> 
 
    <nav id="menu"> 
 
    <ul class="parent-menu"> 
 
     <li> 
 
     <a href="#">Home & Kitchen</a> 
 
     <ul> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> 
 
     <a href="#">Electronics</a> 
 
     <ul> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> 
 
     <a href="#">Clothing</a> 
 
     <ul> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> 
 
     <a href="#">Cars & Motorbikes</a> 
 
     <ul> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> 
 
     <a href="#">Books</a> 
 
     <ul> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> 
 
     <a href="#">Support</a> 
 
     <ul> 
 
      <li><a href="#">Contact Us</a> 
 
      </li> 
 
      <li><a href="#">Forum</a> 
 
      </li> 
 
      <li><a href="#">Deliveries</a> 
 
      </li> 
 
      <li><a href="#">T&C</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</div>

Answer 1

Удалить overflow:auto и добавить position:relative в #menu и использовать left:0 вашего второго уровня ul.

p, 
 
ul, 
 
li, 
 
div, 
 
nav { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.dad { 
 
    width: 250px; 
 
} 
 
#menu { 
 
    // overflow: auto; 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 
.parent-menu { 
 
    background-color: #0c8fff; 
 
    position: relative; 
 
    min-width: 200px; 
 
    float: left; 
 
} 
 
#menu ul { 
 
    list-style-type: none; 
 
} 
 
#menu ul li a { 
 
    padding: 10px 15px; 
 
    display: block; 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
#menu ul li a:hover { 
 
    background-color: #007ee9; 
 
} 
 
#menu ul li:hover > ul { 
 
    left: 200px; 
 
    -webkit-transition: left 200ms ease-in; 
 
    -moz-transition: left 200ms ease-in; 
 
    -ms-transition: left 200ms ease-in; 
 
    transition: left 200ms ease-in; 
 
} 
 
#menu ul li > ul { 
 
    position: absolute; 
 
    background-color: #333; 
 
    top: 0; 
 
    left: 0px; 
 
    min-width: 200px; 
 
    z-index: -1; 
 
    height: 100%; 
 
    -webkit-transition: left 200ms ease-in; 
 
    -moz-transition: left 200ms ease-in; 
 
    -ms-transition: left 200ms ease-in; 
 
    transition: left 200ms ease-in; 
 
} 
 
#menu ul li > ul li a:hover { 
 
    background-color: #2e2e2e; 
 
}

<div class="dad"> 
 

 

 
    <nav id="menu"> 
 
    <ul class="parent-menu"> 
 
     <li> 
 
     <a href="#">Home & Kitchen</a> 
 
     <ul> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> 
 
     <a href="#">Electronics</a> 
 
     <ul> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> 
 
     <a href="#">Clothing</a> 
 
     <ul> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> 
 
     <a href="#">Cars & Motorbikes</a> 
 
     <ul> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> 
 
     <a href="#">Books</a> 
 
     <ul> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
      <li><a href="#">item</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> 
 
     <a href="#">Support</a> 
 
     <ul> 
 
      <li><a href="#">Contact Us</a> 
 
      </li> 
 
      <li><a href="#">Forum</a> 
 
      </li> 
 
      <li><a href="#">Deliveries</a> 
 
      </li> 
 
      <li><a href="#">T&C</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</div>