SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot Jeff Hester's Avatar
    Join Date
    May 2002
    Location
    Sunny Southern California
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help sorting CSS for menu

    I need some assistance getting these menus to work right. The site is using Drupal, and there are three CSS files. I'm trying to do two things: expand the width of the menu by about 20px; and give the flyout menu a solid background.

    The site is here: http://research.yale.edu/GOTV/

    Can anyone help me sort this out?
    Jeff Hester
    BigBlueBall | My latest project: SoCal Hiker

  2. #2
    Non-Member
    Join Date
    Sep 2006
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in your nice_menus.css make your locate

    ul.nice-menu-right ul then add .5 - 1 em (not sure what is the equivalent of 20px there but maybe you could do some trial and error on this one

  3. #3
    SitePoint Zealot Jeff Hester's Avatar
    Join Date
    May 2002
    Location
    Sunny Southern California
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! I've got the width ok, but the flyouts still have transparent gaps between each option. Any ideas on that?

    Also, the hover mode is only working for menu items that have submenu options.
    Jeff Hester
    BigBlueBall | My latest project: SoCal Hiker

  4. #4
    Non-Member
    Join Date
    Sep 2006
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is just a test... make sure that you have a back up of your files okay?

    search for ul.nice-menu-right li.menuparent:hover in the same file. then insert this

    ul.nice-menu-right li:hover

    if it went well then I have to tell you that it does not work on IE browsers, you may also want to try inserting this

    ul.nice-menu-right li a:hover

    If it gave you the same result then forget what I have said before this hehe also, you'd notice that an arrow will appear at the right side of the link so you have to put this code within your css file

    ul.nice-menu-right li(whichever you prefer) {
    background-image: none;
    }

    that will eliminate the arrow image... unless you like it then that's fine

    about the flyout... search for

    ul.nice-menu-down li

    then insert

    margin: 0;

    just after border-top: 1px solid #ccc;

  5. #5
    SitePoint Zealot Jeff Hester's Avatar
    Join Date
    May 2002
    Location
    Sunny Southern California
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much. I've got it working well in Firefox, but IE is still a little weird
    Jeff Hester
    BigBlueBall | My latest project: SoCal Hiker

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    You could hide the background of the ul thats showing through in ie and then position the sublist a bit further away.

    Code:
    ul.nice-menu li.over ul{
      display: block;
      background-color: transparent;
    }
    ul.nice-menu-right ul ul {
      width: 12.5em;
      left: 12.5em;
      top: -1px;
    }

  7. #7
    SitePoint Zealot Jeff Hester's Avatar
    Join Date
    May 2002
    Location
    Sunny Southern California
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to both of you for the quick responses. It's not perfect, but the end result met the need for our meeting otday.

    Cheers!
    Jeff Hester
    BigBlueBall | My latest project: SoCal Hiker


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
  •