gpt4 book ai didi

html - 使用 Sub-Menus 将 Sub-Sub-Menus 添加到 CSS 菜单

转载 作者:搜寻专家 更新时间:2023-10-31 22:04:04 27 4
gpt4 key购买 nike

我有一个与子菜单一起使用的 CSS 手册。我想知道如何向它添加子子菜单。例如,我将鼠标悬停在主菜单项上并弹出子菜单,然后我将鼠标悬停在子菜单项上并弹出另一个子菜单。这是我现在使用的 JS Fiddle:

http://jsfiddle.net/PrinceofVegas/Dg3yQ/4/

这是我使用的 CSS:

.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
}
.menu ul{
background:#006633;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#006633 url("../images/seperator.gif") bottom right no-repeat;
color:#ffffff;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #003f20 url("../images/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#006633;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('../images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:30px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#003f20 url('../images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}

这是我正在使用的 HTML:

<div class="menu">
<ul>
<li><a href="#" target="_self" >Main Item 1</a></li>
<li><a href="#" target="_self" >Main Item 2</a>
<ul>
<li><a href="#" target="_self" >Test Sub Item</a></li>
<li><a href="#" target="_self" >Test Sub Item</a></li>
<li><a href="#" target="_self" >Test Sub Item</a></li>
<li><a href="#" target="_self" >Test Sub Item</a></li>
</ul>
</li>
<li><a href="#" target="_self" >Main Item 3</a></li>
<li><a href="#" target="_self" >Main Item 4</a>
<ul>
<li><a href="#" target="_self" >Test Sub Item</a></li>
<li><a href="#" target="_self" >Test Sub Item</a></li>
<li><a href="#" target="_self" >Test Sub Item</a></li>
</ul>
</li>
</ul>
</div>

最佳答案

以下是我将如何处理您正在寻找的内容:http://jsfiddle.net/Dg3yQ/26/

我对 CSS 进行了一些修改。修改后的 CSS 将代码减少了几百个字符,我相信它达到了您的预期。我希望这会有所帮助。

已编辑:添加了一个简化的代码示例,其中包含对如何实现这些子菜单的答案的评论。

#nav {
list-style:none inside;
margin:0;
padding:0;
text-align:center;
}

#nav li {
display:block;
position:relative;
float:left;
background: #006633; /* menu background color */
}

#nav li a {
display:block;
padding:0;
text-decoration:none;
width:200px; /* this is the width of the menu items */
line-height:35px; /* this is the hieght of the menu items */
color:#ffffff; /* list item font color */
}

#nav li li a {font-size:80%;} /* smaller font size for sub menu items */

#nav li:hover {background:#003f20;} /* highlights current hovered list item and the parent list items when hovering over sub menues */



/*--- Sublist Styles ---*/
#nav ul {
position:absolute;
padding:0;
left:0;
display:none; /* hides sublists */
}

#nav li:hover ul ul {display:none;} /* hides sub-sublists */

#nav li:hover ul {display:block;} /* shows sublist on hover */

#nav li li:hover ul {
display:block; /* shows sub-sublist on hover */
margin-left:200px; /* this should be the same width as the parent list item */
margin-top:-35px; /* aligns top of sub menu with top of list item */
}
<ul id="nav">
<li><a href="#">Main Item 1</a></li>
<li><a href="#">Main Item 2</a>
<ul>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">SUB SUB LIST &raquo;</a>
<ul>
<li><a href="#">Sub Sub Item 1</a>
<li><a href="#">Sub Sub Item 2</a>
</ul>
</li>
</ul>
</li>
<li><a href="#">Main Item 3</a></li>
</ul>

关于html - 使用 Sub-Menus 将 Sub-Sub-Menus 添加到 CSS 菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6537270/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com