简体   繁体   English

2列的纯css下拉菜单

[英]Pure css dropdown menu for 2 column

im using pure css dropdown menu for this 即时通讯使用纯css下拉菜单

menu1   menu1option1      
menu2   menu1option2
        menu1option3   
        menu1option4
        menu1option5

just wondering if using pure css dropdown menu am i able to get this effect? 只是想知道如果使用纯css下拉菜单我能够获得这种效果吗?

menu1   menu1option1   menu1option2
menu2   menu1option3   menu1option4
        menu1option5

This is the php code that calls the menu. 这是调用菜单的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>';

This is the css code for the menu 这是菜单的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;
}

Hope that someone is able to point to me in the right direction 希望有人能指出我正确的方向

It is VERY much possible. 这非常有可能。

I made a fiddle for you with some code I did for someone a few days ago. 几天前我为某人做了一些代码,为你做了一个小提琴 Very simple too just adapt the code there. 非常简单,只需在那里调整代码。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM