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，其中包含了我几天前给别人做的一些代码。非常简单，只需在那里调整代码。