您好 我想要的是从子菜单创建一个子菜单。例如,如果用户将鼠标悬停在“操作”上,则会显示“结算 - 邮件等”。如果用户将鼠标悬停在结算位置,我希望创建另一个子帐户。我附上了我正在使用的代码,这是stu nicholls pro下拉列表。感谢
menu css
.nav {
height:35px;
background: url(images/pro_line_0.gif) repeat-x;
margin-top:100px;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
width:100%;
z-index:500;
}
.nav .table {
display:table;
}
.nav .select,
.nav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}
.nav li {
margin:0;
padding:0;
height:auto;
float:left;
}
.nav .select a {
display:block;
height:35px;
float:left;
padding:0 5px 0 30px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#fff;
}
.nav .current a {
display:block;
height:35px;
float:left;
background: url(images/pro_line_2.gif);
padding:0 0 0 10px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#fff;
}
.nav .current a b {
display:block;
padding:0 30px 0 15px;
background:url(images/pro_line_2.gif) right top;
}
.nav .select a:hover,
.nav .select li:hover a {
padding:0 0 0 15px;
cursor:pointer;
color:#088;
}
.nav .select a:hover b,
.nav .select li:hover a b {
display:block;
float:left;
padding:0 5px 0 15px;
cursor:pointer;
}
.nav .select_sub {
display:none;
}
/* IE6 only */
.nav table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}
.nav .sub {
display:table;
padding:0;
list-style:none;
}
.nav .sub_active .current_sub a,
.nav .sub_active a:hover {
background:transparent;
color:#f00;
}
.nav .select :hover .select_sub,
.nav .current .show {
display:block;
position:absolute;
width:100%;
top:35px;
background:url(images/back_0.gif);*/
padding:0;
z-index:100;
left:0px;
text-align:left;
}
.nav .current .show {
z-index:10;
}
.nav .select :hover .sub li a,
.nav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 5px 0 30px;
margin:0;
white-space:nowrap;
border:0;
color:#444;
}
.nav .current .sub li.sub_show a {
color:#088;
cursor:default;
/*background:url(images/back_1.gif);*/
}
.nav .select :hover .sub li a:hover,
.nav .current .sub li a:hover {
visibility:visible;
font-weight:bold;
/*background:url(images/back_1.gif);*/
}
示例html
<ul class="select"><li><a href="#nogo"><b>Control Panel</b>
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub show">
<ul class="sub">
<li><a href="/sample/admin/cp/mail/index.php">Tickets</a></li>
<li><a href="#nogo">Messages</a></li>
<li><a href="/sample/admin/cp/actions/index.php">Actions</a></li>
<li><a href="/sample/admin/userlog.php">History</a></li>
<li><a href="#nogo">Settings</a></li>
<li><a href="#nogo">Destruction</a></li>
<li><a href="/sample/admin/cp/contacts/index.php">Contacts</a></li>
<li><a href="/sample/admin/cp/users/index.php">Users</a></li>
<li><a href="/sample/admin/cp/companies/index.php">Companies</a></li>
</ul>
</div>
答案 0 :(得分:0)
尝试在HTML中使用嵌套的<ul>
。也就是说,像这样构建菜单:
<ul class="menu">
<li>
<a>My Link</a>
<ul class="submenu">
<li><a>My Nested Link</a></li>
</li>
</ul>
然后使用简单的Javascript解决方案,如Superfish(或其中一个选择) http://users.tpg.com.au/j_birch/plugins/superfish/