CODEWITHSUNDEEP
javascriptcss
Damian Sia
Damian Sia

Reputation: 489

Pure css dropdown menu for 2 column

im using pure css dropdown menu for this

menu1   menu1option1      
menu2   menu1option2
        menu1option3   
        menu1option4
        menu1option5

just wondering if using pure css dropdown menu am i able to get this effect?

menu1   menu1option1   menu1option2
menu2   menu1option3   menu1option4
        menu1option5

This is the php code that calls the menu.

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

#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

Upvotes: 0

Views: 423

Answers (1)

Kevin Anthony Oppegaard Rose
Kevin Anthony Oppegaard Rose

Reputation: 1003

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.

Upvotes: 2

Related Questions