CSS SubMenu

HTML & CSS
1

Hi, looking for some very quick input from a CSS Guru since I’m quite new to the language.

I’ve created a CSS SubMenu with a little help from somebody on these forums but they’re main area of expertise is Javascript so they’ve directed me to this section of the site to get the answer to my question!

My CSS Menu can be viewed at http://www.cbresources.co.uk/ivegotkids

My question relates mainly to the final tab “Fun & Games” - You will see that when you hover over this, the submenu appears as expected. However, in order to reach the links on that menu without “falling off” you need to move the mouse down to the menu bar, then along it. My client doesn’t like this… She would like the links on this menu to be aligned to the Right of the page but only on this particular bar.

Now I do have a seperate class setup for each menu bar because of the different backgrounds I’ve used and I have tried adding an “align: right;” variable to the fun & games one but it has no effect.

Here is my code for that part:

  <li><a href = "/ivegotkids/aboutfungames/"><img src="http://www.cbresources.co.uk/ivegotkids/wp-content/themes/thepink/images/fun_games.png" height="30px" width="150px" /></a>
    <ul class="fungames">
	  <li><a href = "/ivegotkids/games">Games</a></li>
	  <li><a href = "/ivegotkids/links">External Links</a></li>
    </ul> 
  </li>

So can somebody point out where I tell it to position the submenu links to the right, I have tried adding it to the HTML and to each of the CSS Classes to no avail.

Thanks.

ul.navbar, ul.navbar ul {
  position: absolute;
  z-index: 1000;
  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: 10px; /* for space between menus but keeping hover */
  float: left;
  z-index: 1000;
}
 
ul.navbar li ul {
  position: absolute;
  width: 100%;
  left: -999em; /* hides menus of screen */
  top: 38px;
  border: none;
  background: none;
  z-index: 1000;

}

ul.navbar li ul.fungames {
	background-image: url('http://www.cbresources.co.uk/ivegotkids/wp-content/themes/thepink/images/sl7.png');
}

.navbar li:hover ul{
left: -1px;
z-index: 1000; /*brings them back on on hover*/
}
 
.navbar :hover > a{
  background-position: left;
  z-index: 1000;
}
 
ul.navbar li ul li {
  padding-bottom: 0px;
  z-index: 1000;
}
 
ul.navbar a {
position: relative;
display: block;
  text-decoration: none;
  font-weight: bold;
  color: #000000;
  z-index: 1000;
}

ul.navbar li li a {
  background: none;
  border: none;
  width: 100%;
  height: 28px; line-height: 28px;
  font-size: 14px;
  padding: 0 25px 0 25px;
  z-index: 1000;
}
2

Hi,
If you just want the list items floated right on the last link (fun & games) then set up a new selector that resets those list items to float:right

You may need to reverse the order of the two sublist items in the html if their order is important to you.

This should work:


ul.navbar li ul.fungames {
background-image:url("http://www.cbresources.co.uk/ivegotkids/wp-content/themes/thepink/images/sl7.png");
}
[B]ul.fungames li[/B] {
[COLOR=Blue]float:right;[/COLOR]
}
3

You have the <li>s in the sub-menus floated to the left. You need to have
ul.navbar ul.fungames li {float:right;}
and then reverse the order of the links in the sort code (because the list will start from the right-hand side.