html - 从 sub 创建 css 子菜单

Question

你好 我想要的是从子菜单创建子菜单。例如，如果用户将鼠标悬停在 Actions 上，则它会下降以显示账单 - 邮件等。如果用户将鼠标悬停在账单上，我想创建另一个子。我附上了我正在使用的代码，它是 stu nicholls pro 下拉列表。谢谢

菜单样式

.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>

Answer 1

尝试使用嵌套 <ul> s 在你的 HTML 中。也就是说，像这样构建您的菜单:

<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/