javascript - 2 列的纯 css 下拉菜单

Question

我为此使用纯 css 下拉菜单

menu1   menu1option1      
menu2   menu1option2
        menu1option3   
        menu1option4
        menu1option5

只是想知道如果使用纯 css 下拉菜单我能得到这种效果吗？

menu1   menu1option1   menu1option2
menu2   menu1option3   menu1option4
        menu1option5

这是调用菜单的php代码。

echo '<ul id="navbar">
<!-- The strange spacing herein prevents an IE6 whitespace bug. -->';

$categoryname = "";

while($row = mysql_fetch_array($result))
{
if($categoryname != "" && $categoryname != $row['categoryname']) echo '</ul></li><li><a onmouseover="adjust('.$row['id'].')" href="providerslisting.php?category='.urlencode($row['categoryname']).'">'.$row['categoryname'].'</a><ul id="'.$row['id'].'">';
elseif($categoryname == "" && $categoryname != $row['categoryname']) echo '<li><a onmouseover="adjust('.$row['id'].')" href="providerslisting.php?category='.urlencode($row['categoryname']).'">'.$row['categoryname'].'</a><ul id="'.$row['id'].'">';
echo '<li><a href="providerslisting.php?category='.urlencode($row['categoryname']).'&subcategory='.urlencode($row['name']).'">'.$row['name'].'</a></li>';
$categoryname = $row['categoryname'];
}
echo '</ul></li></ul>';

这是菜单的CSS代码

#navbar {
margin: 0;
padding: 0;
}
#navbar li {
list-style: none;
position:relative;
}
#navbar li a {
display: block;
color:#333333;
padding:5px 5px;
}
#navbar li a:hover {
background:#333333;
color: #FFFFFF;
}
#navbar li ul {
display: none;
}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
left:199px;
top:0px;
margin: 0;
padding: 0;
border-left:1px solid #CCCCCC;
}
#navbar li:hover li, #navbar li.hover li {
float: none;
}

#navbar li:hover li a, #navbar li.hover li a {
background:#EEEEEE;
border:none;
color: #FFFFFF;
padding:5px 15px;
width:720px;
}
#navbar li:hover li a, #navbar li:hover a {
background:#333333;
color: #FFFFFF;
}
#navbar li li a:hover {
color: #999999;
}

希望有人能够指出我正确的方向

Answer 1

很有可能。

我做了一个fiddle给你一些我几天前为某人做的代码。也非常简单，只需修改那里的代码即可。