SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: CSS SubMenu

  1. #1
    SitePoint Zealot
    Join Date
    Oct 2010
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS SubMenu

    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:

    Code HTML4Strict:
      <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.

    Code CSS:
    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. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    ul.navbar li ul.fungames {
    background-image:url("http://www.cbresources.co.uk/ivegotkids/wp-content/themes/thepink/images/sl7.png");
    }
    ul.fungames li {
    float:right;
    }

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •