div内不扩展 [英] Div within li not expanding

问题描述

我有一个用无序列表构建的水平菜单。鼠标悬停其中一个列表项时，将显示一个包含在div中的子菜单。在内容正确显示的子菜单中，div本身被限制为父列表项的宽度。这会导致内容溢出到div的右边。

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;
}​

推荐答案

正确：

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

content in menu：

And this to enable scaling the content inside menu:

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

回答。

这篇关于div内不扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！