Question

我有一个菜单栏，它有8到9个不同字符长度的水平菜单。此外，每个菜单都有不同字符长度的子菜单。

我想要的只是 - 1.所有菜单都应该在页面上（应填写我已决定的html体宽） 2.所有子菜单都应该下拉，并且宽度与父菜单宽度相同。

我所能做的就是，我已拉伸菜单栏，以便它可以填充html体宽，并采用对称宽度。但我不能让子菜单一个接一个地下拉。我还附上了我想要的示例图片

HTML

<div id="header_menu">
<ul >
<li><a href="#">Product Repository </a>
    <ul>
        <li><a href="#">Insert</a></li>
        <li><a href="#">Search & Edit</a></li>
        <li><a href="#">File Upload</a></li>
    </ul>
</li>
<li><a href="#">Inventory Inspection</a>
    <ul>
        <li><a href="#">Insert</a></li>
        <li><a href="#">Search & Edit</a></li>
        <li><a href="#">Reprint</a></li>
        <li><a href="#">Inventory Report</a></li>
    </ul>
</li>
<li><a href="#">Reports</a>
    <ul>
        <li><a href="#">Insert</a></li>
        <li><a href="#">Search & Edit</a></li>
    </ul>
</li>   
</ul>
</div>

CSS

    body
    {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align:center;

    }

已提供HTML。我正在为我提供工作CSS。希望别人也是。

#header_menu {
    height: 10%;
    margin-bottom: 2px;
    width: 100%;
}
#header_menu ul li ul {
    position: absolute;
    float: left;
}

#header_menu ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    display: table;
    width: 100%;
    height: 10%;
    position: relative;
    z-index: 597;
}
#header_menu ul li ul li a {
    visibility: hidden;
    height: 0px;
    width: 100%;
}
#header_menu ul li:hover ul li a {
    height: 10%;
    visibility: visible;
    width: 100%;
}


#header_menu ul li {
    position: relative;
    display: table-cell;
    list-style-type: none;
}
#header_menu ul li a {
    display: block;
    color: #FFF;
    text-decoration: none;
    background-color: #333;
    font-family: Meiryo, "Meiryo UI", "Microsoft Sans Serif", "MS Outlook";
    font-weight: lighter;
    font-size: 12px;
    border-right-width: thin;
    border-bottom-width: thin;
    border-right-style: inset;
    border-bottom-style: inset;
    border-right-color: #999;
    border-bottom-color: #999;
}
#header_menu ul li ul li {
    width: 100%;
    float: left;
}

#header_menu ul li a:hover {
    font-family: Meiryo, "Meiryo UI", "Microsoft Sans Serif", "MS Outlook";
    font-size: 12px;
    font-weight: lighter;
    background-color: #000;
}

Example

Answer 1

来自jsfiddle example

的CSS Menu Maker site张贴

我做了一些小改动以简化示例。 小更新，没什么特别的

更新（小提琴）：

<div id='cssmenu'>
  <ul>
     <li><a href="#">Product Repository </a>
    <ul>
        <li><a href="#">Insert</a></li>
        <li><a href="#">Search & Edit</a></li>
        <li><a href="#">File Upload</a></li>
    </ul>
</li>
<li><a href="#">Inventory Inspection</a>
    <ul>
        <li><a href="#">Insert</a></li>
        <li><a href="#">Search & Edit</a></li>
        <li><a href="#">Reprint</a></li>
        <li><a href="#">Inventory Report</a></li>
    </ul>
</li>
<li><a href="#">Reports</a>
    <ul>
        <li><a href="#">Insert</a></li>
        <li><a href="#">Search & Edit</a></li>
    </ul>
</li>   
  </ul>
</div>

和css：

        #cssmenu {padding: 0; margin: 0; border: 0;}
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;}
#cssmenu ul {position: relative; z-index: 597; }
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle; border:solid 1px blue; width:150px;}
#cssmenu ul li.hover,
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default; background-color:yellow;}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 150px;}
#cssmenu ul ul li {float: none; margin-left:-1px; width:150px; border:solid 1px red;}
#cssmenu ul li:hover > ul { visibility: visible;}
#cssmenu ul ul {bottom: 0; left: 0;}
#cssmenu ul ul {margin-top: 0; }
#cssmenu ul ul li {font-weight: normal;}
#cssmenu a { display: block; /*line-height: 1em;*/ text-decoration: none; }

它不漂亮，但你可以看到这一点。

更新（代码已更改）：

#cssmenu
{
    padding:0;
    margin:0;
    display:block;
}
a {text-decoration:none; color:black; width:100%; box-sizing:border-box; display:block;}
#cssmenu ul
{
  position:relative;
  margin:0;
  padding:0;
  cursor:default;
  display:table;
  width:100%;
  border:solid 1px gray;
}
#cssmenu ul li, #cssmenu ul li:last-child
{
  list-style-type:none;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
  padding-top:3px;
  padding-bottom:3px;
  border-right:solid 1px gray;
  margin:0;
  position:relative;
}
#cssmenu ul li:last-child {border:none;}
#cssmenu ul li:hover {background-color:yellow;}
#cssmenu ul li:hover > a {color: red;}
#cssmenu ul ul
{
  visibility:hidden;
  position:absolute;
  top:100%;
  margin:0;
  margin-left:-1px;
  z-index:101;
  display:block;
}
#cssmenu ul ul li, #cssmenu ul ul li:last-child
{
    display:block;
    width:100%;
    box-sizing:border-box;
	border:none;
	border-bottom:solid 1px gray;
}
#cssmenu ul ul li:last-child {border:none;}
#cssmenu ul ul li:hover
{
  background-color:navy;
}
#cssmenu ul li li:hover > a {color:white;}
#cssmenu ul li:hover > ul {visibility:visible;}

<div id='cssmenu'>
  <ul>
     <li><a href="#">Product Repository </a>
      <ul>
        <li><a href="#">Insert</a></li>
        <li><a href="#">Search & Edit</a></li>
        <li><a href="#">File Upload</a></li>
      </ul>
     </li>
     <li><a href="#">Inventory Inspection</a>
      <ul>
        <li><a href="#">Insert</a></li>
        <li><a href="#">Search & Edit</a></li>
        <li><a href="#">Reprint</a></li>
        <li><a href="#">Inventory Report</a></li>
      </ul>
    </li>
    <li><a href="#">Reports</a>
      <ul>
        <li><a href="#">Insert</a></li>
        <li><a href="#">Search & Edit</a></li>
      </ul>
    </li>   
    <li><a href="#">Product Repository </a>
      <ul>
        <li><a href="#">Insert</a></li>
        <li><a href="#">Search & Edit</a></li>
        <li><a href="#">File Upload</a></li>
      </ul>
    </li>
    <li><a href="#">Inventory Inspection</a>
      <ul>
        <li><a href="#">Insert</a></li>
        <li><a href="#">Search & Edit</a></li>
        <li><a href="#">Reprint</a></li>
        <li><a href="#">Inventory Report</a></li>
      </ul>
    </li>
    <li><a href="#">Reports</a>
      <ul>
        <li><a href="#">Insert</a></li>
        <li><a href="#">Search & Edit</a></li>
      </ul>
    </li>   
    <li><a href="#">Product Repository </a>
      <ul>
        <li><a href="#">Insert</a></li>
        <li><a href="#">Search & Edit</a></li>
        <li><a href="#">File Upload</a></li>
      </ul>
    </li>
    <li><a href="#">Inventory Inspection</a>
      <ul>
        <li><a href="#">Insert</a></li>
        <li><a href="#">Search & Edit</a></li>
        <li><a href="#">Reprint</a></li>
        <li><a href="#">Inventory Report</a></li>
      </ul>
    </li>
    <li><a href="#">Product Repository </a>
      <ul>
        <li><a href="#">Insert</a></li>
        <li><a href="#">Search & Edit</a></li>
      </ul>
    </li>   
   </ul>
</div>

尝试此解决方案，但当您Run code snippet将其切换为Full Page时。我希望这就是你想要的。但是，总是如此，如果您的窗口太小，则无法避免两行中的项目值。

无法使菜单栏下拉正确悬停

1 个答案: