无法使菜单栏下拉菜单正确悬停
Cannot make menubar dropdown hover properly
我有一个菜单栏,它有 8 到 9 个不同字符长度的水平菜单。
此外,每个菜单都有不同字符长度的子菜单。
我想要的只是-
1. 所有的菜单都应该跨页(应该填满我决定的html body width)
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 is already provided. i'm providing the working CSS for me. hope
it else somebody else.
#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;
}
有jsfiddle example toked from CSS Menu Maker site
我做了一些小改动来简化示例。
很少更新,没什么特别的
更新(fiddle也是):
<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
时。我希望这就是你想要的。但是,总是但是,如果您的 window 太小,您将无法避免两行中的项目值。
我有一个菜单栏,它有 8 到 9 个不同字符长度的水平菜单。 此外,每个菜单都有不同字符长度的子菜单。
我想要的只是- 1. 所有的菜单都应该跨页(应该填满我决定的html body width) 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 is already provided. i'm providing the working CSS for me. hope it else somebody else.
#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;
}
有jsfiddle example toked from CSS Menu Maker site
我做了一些小改动来简化示例。 很少更新,没什么特别的
更新(fiddle也是):
<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
时。我希望这就是你想要的。但是,总是但是,如果您的 window 太小,您将无法避免两行中的项目值。