Question

I have a horizontal menu that is built with an unordered list. On mouseover of one of the list items a submenu will show that is contained within a div. In the submenu while the content displays correctly the div itself is constrained to the width of the parent list item. This results in content overflowing to the right of the div. How can I make it so that div expands with it’s content.

HTML & CSS on JSFiddle

HTML:

<div>
<ul class="menu">
  <li class="menuTab menuTabFirst">
    Menu Bar Item 1
    <div class="menuDropDown">
      <h2><a href="#">Menu Heading Goes Here</a></h2>
      <ul>
        <li><a href="#">Menu Item 1 Goes Here</a></li>
        <li><a href="#">Menu Item 2 Goes Here</a></li>
        <li><a href="#">Menu Item 3 Goes Here</a></li>
        <li><a href="#">Menu Item 4 Goes Here</a></li>
      </ul>

      <h2><a href="#">Menu Heading Goes Here</a></h2>
      <ul>
        <li><a href="#">Menu Item 1 Goes Here</a></li>
        <li><a href="#">Menu Item 2 Goes Here</a></li>
        <li><a href="#">Menu Item 3 Goes Here</a></li>
        <li><a href="#">Menu Item 4 Goes Here</a></li>
      </ul>
    </div>
  </li>

  <li class="menuTab">
    Menu Bar Item 2
    <div class="menuDropDown">
      <h2><a href="#">Menu Heading Goes Here</a></h2>
      <ul>
        <li><a href="#">Menu Item 1 Goes Here</a></li>
        <li><a href="#">Menu Item 2 Goes Here</a></li>
        <li><a href="#">Menu Item 3 Goes Here</a></li>
        <li><a href="#">Menu Item 4 Goes Here</a></li>
      </ul>
    </div>
  </li>
</ul>
</div>

CSS:

.menu {
    list-style-type: none;
    border-spacing:3px 0px;
    padding: 0px;
    display: table;
    margin: 5px 0px 0px;
    text-align:center;
    height: 26px;
    width: 300px;
}
.menuTab {
    background-color: #D2DCE0;
    display: table-cell;
    position: relative;
    margin:0px 5px 0px 0px;
    padding:6px 0px;
    font-size: 15px;
    width: auto;
    cursor: default;
    border-bottom: 0px;
    color: #002F68;
}
.menuTab:hover {
    background-color:#93B4D6;
    color: white;
}
.menuTab:hover .menuDropDown {
    left:0px; /* Shows the dropdown div */
}
.menuDropDown {
    background-color:#EBECEF;
    border:1px solid #6798CF;
    position: absolute;
    left:-999em; /* Hides the dropdown until menuTab mouseover */
    margin-top: 5px;
    z-index: 1;
    display: block;
}
.menuDropDown ul {
    list-style-type: none;
    margin:0px;
    padding:0px;
    margin-left: 20px;
    margin-bottom: 20px;
    text-align: left;
}
.menuDropDown h2 {
    font-size:14px;
    margin-left: 18px;
    margin-bottom: 5px;
    font-weight: normal;
    text-align: left;
}
.menuDropDown h2 a {
    color: black;
}
.menuDropDown li {
    font-size:14px;
    padding:0px;
    margin-left: 10px;
}
.menuDropDown li a {

}    
.menuDropDown li:hover {
        background-color: #EBECEF;
}
.menuLastTab {
    margin-right: 0px;
}​

Answer 1

Try this to position submenus properly:

.menuTab:hover .menuDropDown {
    left: inherit; /* Shows the dropdown div positioned properly */
}

And this to enable scaling the content inside menu:

.menuDropDown ul {
    list-style-type: none;
    margin:0px;
    text-align: left;
    padding: 20px;
}

Regards.