CSS Submenu

HTML & CSS
1

Hi there,

I’ve got a CSS Submenu on my site at the moment & I have 2 questions.

At the moment, the submeny appears when I hover over a main menu item but it appears underneath everything else… how do I change the CSS code so that it appears on top?

Also, what do I need to add to the code to make each menu a different background colour?

Here is the current code:

ul.navbar, ul.navbar ul {
  position: absolute;
  float: left;
  margin: 0; padding: 0px;
  list-style-type: none;
  background: none;
  text-align: left;
  font: normal 12px/24px arial, sans-serif;
}
 
ul.navbar li {
  padding-bottom: 5px; /* for space between menus but keeping hover */
  float: left;
}
 
ul.navbar li ul {
  position: absolute;
  width: 100%;
  left: -999em; /* hides menus of screen */
  top: 38px;
  border: none;
  background-color: #444444;
}
 
.navbar li:hover ul{
  left: -1px; /*brings them back on on hover*/
}
 
.navbar :hover > a{
  background-position: left;
}
 
ul.navbar li ul li {
  padding-bottom: 0px;
}
 
ul.navbar a {
  display: block;
  text-decoration: none;
  color: #bbbbbb;
}
 
ul.navbar li li a {
  background: none;
  border: none;
  width: 100%;
  height: 28px; line-height: 28px;
  font-size: 14px;
  padding: 0 25px 0 25px;
}

& Here is the HTML for the menu:

<ul class="navbar">
  <li><a href = "/Home/"><img src="http://www.cbresources.co.uk/ivegotkids/wp-content/themes/thepink/images/home.png" /></a></li>
<li><a href = "/Community/"><img src="http://www.cbresources.co.uk/ivegotkids/wp-content/themes/thepink/images/community.png" /></a>
    <ul>
	  <li><a href = "/Community/forums">Forums</a></li>
	  <li><a href = "/Community/chat">Chat</a></li>
    </ul>
  </li>
  <li><a href = "/Classifieds/"><img src="http://www.cbresources.co.uk/ivegotkids/wp-content/themes/thepink/images/classifieds.png" /></a>
    <ul>
	  <li><a href = "/Classifieds/browseAds">Browse Ads</a></li>
	  <li><a href = "/Classifieds/postAds">Post Ads</a></li>
    </ul>
  </li>
  <li><a href = "/Shop/"><img src="http://www.cbresources.co.uk/ivegotkids/wp-content/themes/thepink/images/shop.png" /></a>
    <ul>
	  <li><a href = "/Shop/browseAuctions">Browse Auctions</a></li>
	  <li><a href = "/Shop/sellItems">Sell an Item</a></li>
    </ul>
  </li>
  <li><a href = "/Astrology/"><img src="http://www.cbresources.co.uk/ivegotkids/wp-content/themes/thepink/images/astrology.png" /></a>
    <ul>
	  <li><a href = "/Astrology/horoscopes">Daily Horoscopes</a></li>
	  <li><a href = "/Astrology/reports">Personal Reports</a></li>
    </ul>
  </li>
  <li><a href = "/Charts_Tools/"><img src="http://www.cbresources.co.uk/ivegotkids/wp-content/themes/thepink/images/charts_tools.png" /></a>
    <ul>
	  <li><a href = "/chartsTools/dueDateCalc">Due Date Calculator</a></li>
	  <li><a href = "/chartsTools/babyName">Baby Name Finder</a></li>
	  <li><a href = "/chartsTools/ovulation">Ovulation Predictor</a></li>
	  <li><a href = "/chartsTools/weightCharts">Weight Charts</a></li>
    </ul>
  </li>
  <li><a class="lastChild" href = "/Fun&Games/"><img src="http://www.cbresources.co.uk/ivegotkids/wp-content/themes/thepink/images/fun_games.png" /></a>
    <ul>
	  <li><a href = "/funGames/games">Games</a></li>
	  <li><a href = "/funGames/links">Links</a></li>
    </ul> 
  </li>
</ul>

I’ve tried adding a different UL Class (navbar2, navbar3) etc… for each menu but that puts each button on it’s own line instead of in a horizontal menu like it is now… so I’m a but lost…

Can someone help me out here?

Thanks.

2

I am a little confused.

Did you write this code or did you copy and paste it from somewhere and now want someone to fix it?

The reason I ask is because if you wrote the code then I can’t see why you can’t reposition the submenu to wherever you want since you managed to position it on the bottom in the first place.

3

For your first question. In order for your levels to appear on top of other content, your menu should be relative or absolute (positioned) so you can give it a high z-index.

As for the second question, you could add additional classes to your anchors:


ul.navbar a {
  display: block;
  text-decoration: none;
  color: #bbbbbb;
}

ul.navbar a.home {
    background: #FF0000;
}
ul.navbar a.community{
    background: #00FF00;
}
ul.navbar a.classifieds{
    background: #0000FF;
}



<ul class="navbar">
  <li><a href = "/Home/" class="home"><img src="http://www.cbresources.co.uk/ivegotkids/wp-content/themes/thepink/images/home.png" /></a></li>
<li><a href = "/Community/" class="community"><img src="http://www.cbresources.co.uk/ivegotkids/wp-content/themes/thepink/images/community.png" /></a>
    <ul>
      <li><a href = "/Community/forums">Forums</a></li>
      <li><a href = "/Community/chat">Chat</a></li>
    </ul>
  </li>
  <li><a href = "/Classifieds/" class="classifieds"><img src="http://www.cbresources.co.uk/ivegotkids/wp-content/themes/thepink/images/classifieds.png" /></a>
    <ul>
      <li><a href = "/Classifieds/browseAds">Browse Ads</a></li>
      <li><a href = "/Classifieds/postAds">Post Ads</a></li>
    </ul>
  </li>
</ul>