title: Pure css dropdown menu for 2 column
body: <p>im using pure css dropdown menu for this</p>
  
  <pre><code>menu1   menu1option1      
  menu2   menu1option2
          menu1option3   
          menu1option4
          menu1option5
  </code></pre>
  
  <p>just wondering if using pure css dropdown menu am i able to get this effect?</p>
  
  <pre><code>menu1   menu1option1   menu1option2
  menu2   menu1option3   menu1option4
          menu1option5
  </code></pre>
  
  <p>This is the php code that calls the menu.</p>
  
  <pre><code>echo '&lt;ul id="navbar"&gt;
  &lt;!-- The strange spacing herein prevents an IE6 whitespace bug. --&gt;';
  
  $categoryname = "";
  
  while($row = mysql_fetch_array($result))
  {
  if($categoryname != "" &amp;&amp; $categoryname != $row['categoryname']) echo '&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a onmouseover="adjust('.$row['id'].')" href="providerslisting.php?category='.urlencode($row['categoryname']).'"&gt;'.$row['categoryname'].'&lt;/a&gt;&lt;ul id="'.$row['id'].'"&gt;';
  elseif($categoryname == "" &amp;&amp; $categoryname != $row['categoryname']) echo '&lt;li&gt;&lt;a onmouseover="adjust('.$row['id'].')" href="providerslisting.php?category='.urlencode($row['categoryname']).'"&gt;'.$row['categoryname'].'&lt;/a&gt;&lt;ul id="'.$row['id'].'"&gt;';
  echo '&lt;li&gt;&lt;a href="providerslisting.php?category='.urlencode($row['categoryname']).'&amp;subcategory='.urlencode($row['name']).'"&gt;'.$row['name'].'&lt;/a&gt;&lt;/li&gt;';
  $categoryname = $row['categoryname'];
  }
  echo '&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;';
  </code></pre>
  
  <p>This is the css code for the menu</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>Hope that someone is able to point to me in the right direction</p>