多级动态弹出菜单 [英] Multi level dynamic flyout menu
本文介绍了多级动态弹出菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
对于使用纯CSS的弹出式菜单，我有以下结构：
HTML
< ul class =menu>
< li>< a href =＃> Base< / a>
< ul>
< li>< a href =＃>客户< / a>
< ul>
< li>< a href =＃>新< / a>< / li&
< li>< a href =＃>编辑< / a>< / li>
< li>< a href =＃>删除< / a>< / li&
< / ul>
< / li>
< li>< a href =＃>产品< / a>< / li>
< li>< a href =＃>员工< / a>< / li>
< / ul>
< / li>
< li>< a href =＃>搜索< / a>< / li&
< li>< a href =＃>系统< / a>< / li>
< / ul>
CSS
pre>
a {text-decoration：none; font-family：verdana; font-size：12px}
ul {list-style：none; padding：0; margin：0}
.menu {
margin：0; padding：0;
width：100％; height：auto;
background：#ccc;
position：absolute;
top：0; left：0;
}
.menu li {
float：left;
display：block
}
.menu li li {
float：none;
}
.menu li a {
padding：0 5px;
}
.menu li a：hover {
background：#bbb
}
.menu li ul {
padding：0; margin：0;
background：#ddd;
width：auto;
position：absolute;
visibility：hidden;
-webkit-transition：all .2s ease-in-out;
transition：all .2s ease-in-out;
opacity：0;
margin：20px 0 0 0;
}
.menu li：hover ul {
margin：0;
opacity：1;
visibility：visible;
display：block
}
.menu li ul li {
clear：both
}
.menu li ul li a {
width ：auto;
display：block;
}
.menu li ul li ul {
position：absolute;
top：0; left：72px;
margin：0 0 0 20px;
display：block;
visibility：hidden;
opacity：0
}
。菜单li ul li ul li {
position：relative;
display：none;
visibility：hidden;
opacity：0
}
.menu li ul li：hover ul li {
visibility：visible;
opacity：1;
display：block
}
这似乎工作。我所做的就是改变 left：100％ in li ul li ul
a {text-decoration：none; font-family：verdana; font-size：12px}
ul {list-style：none; padding：0; margin：0}
.menu {
margin：0; padding：0;
width：100％; height：auto;
background：#ccc;
position：absolute;
top：0; left：0;
}
.menu li {
float：left;
display：block
}
.menu li li {
float：none;
}
.menu li a {
padding：0 5px;
}
.menu li a：hover {
background：#bbb
}
.menu li ul {
padding：0; margin：0;
background：#ddd;
width：auto;
position：absolute;
visibility：hidden;
-webkit-transition：all .2s ease-in-out;
transition：all .2s ease-in-out;
opacity：0;
margin：20px 0 0 0;
}
。菜单li：hover ul {
margin：0;
opacity：1;
visibility：visible;
display：block
}
.menu li ul li {
clear：both
}
。 li a {
width：auto;
display：block;
}
.menu li ul li ul {
position：absolute;
top：0;左：100％;
margin：0 0 0 20px;
display：block;
visibility：hidden;
opacity：0
}
。菜单li ul li ul li {
position：relative;
display：none;
visibility：hidden;
opacity：0
}
。菜单li ul：hover ul li {
visibility：visible;
opacity：1;
display：block;
}
I have the following structure for a flyout menu with pure CSS:
HTML
<ul class="menu">
<li><a href="#">Base</a>
<ul>
<li><a href="#">Clients</a>
<ul>
<li><a href="#">New</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Delete</a></li>
</ul>
</li>
<li><a href="#">Products</a></li>
<li><a href="#">Employees</a></li>
</ul>
</li>
<li><a href="#">Search</a></li>
<li><a href="#">System</a></li>
</ul>
CSS
a {text-decoration: none; font-family: verdana; font-size: 12px}
ul{list-style: none; padding:0; margin:0}
.menu {
margin:0; padding:0;
width: 100%; height: auto;
background: #ccc;
position: absolute;
top:0; left:0;
}
.menu li {
float:left;
display:block
}
.menu li li {
float:none;
}
.menu li a {
padding: 0 5px;
}
.menu li a:hover {
background: #bbb
}
.menu li ul {
padding:0; margin:0;
background: #ddd;
width: auto;
position: absolute;
visibility: hidden;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
opacity: 0;
margin: 20px 0 0 0;
}
.menu li:hover ul {
margin:0;
opacity: 1;
visibility: visible;
display:block
}
.menu li ul li {
clear:both
}
.menu li ul li a {
width: auto;
display:block;
}
.menu li ul li ul {
position: absolute;
top: 0; left: 72px;
margin: 0 0 0 20px;
display: block;
visibility: hidden;
opacity: 0
}
.menu li ul li ul li {
position: relative;
display:none;
visibility: hidden;
opacity: 0
}
.menu li ul li:hover ul li {
visibility: visible;
opacity: 1;
display:block
}
Everything is working fine for the first and second levels of the menu.
Second level (.menu li ul) is dynamic so if the length of an option has changed this should increase its width.
That's exactly where my question came from. I want that the third level always stays at the end of the second level, regardless the width of second level.
I'll try to make it more clear with the following images.
This is what I have now:
Here is what happens when the lenght of an option is increased:
Following is how the menu should behave:
Is that a way to do it with pure CSS?
If not, what will be my best choice to achieve what I want?
Thanks in advance.
解决方案
http://jsfiddle.net/f66MM/
This seems to work. All I did was change left:100% in li ul li ul
a {text-decoration: none; font-family: verdana; font-size: 12px}
ul{list-style: none; padding:0; margin:0}
.menu {
margin:0; padding:0;
width: 100%; height: auto;
background: #ccc;
position: absolute;
top:0; left:0;
}
.menu li {
float:left;
display:block
}
.menu li li {
float:none;
}
.menu li a {
padding: 0 5px;
}
.menu li a:hover {
background: #bbb
}
.menu li ul {
padding:0; margin:0;
background: #ddd;
width: auto;
position: absolute;
visibility: hidden;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
opacity: 0;
margin: 20px 0 0 0;
}
.menu li:hover ul {
margin:0;
opacity: 1;
visibility: visible;
display:block
}
.menu li ul li {
clear:both
}
.menu li ul li a {
width: auto;
display:block;
}
.menu li ul li ul {
position: absolute;
top: 0; left: 100%;
margin: 0 0 0 20px;
display: block;
visibility: hidden;
opacity: 0
}
.menu li ul li ul li {
position: relative;
display:none;
visibility: hidden;
opacity: 0
}
.menu li ul li:hover ul li {
visibility: visible;
opacity: 1;
display:block;
}
这篇关于多级动态弹出菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
