[[[[Please Help]]]] Navigation Bar Hover not Working!

Discussion in 'CSS' started by jb439, Jun 19, 2008.

0
  1. #1
    Hi, I'm using Joomla to create a site and the nav bar has issues.

    First, when I hover over the tab, the middle part gets cut off.
    (I'm attaching an image of the nav bar)

    Second, when I try to hover the submenu, the whole hover part disappears,
    and I can't access the submenus. If I drag the mouse though, I could get to the submenus.

    I've been working on this for so long and I really need help~
    Could someone kindly direct me where to go from here. Thank you.

    This is what I have in the CSS file:

    /* menu stuff */

    #horiz-menu a {
    color: #369889;
    line-height: 26px;
    color: #75797c;
    }

    #horiz-menu li li {
    border-bottom: 1px solid #9A9A9A;
    background: url(../images/menu-active-indicator.png) 50% 0 no-repeat;
    color: #0287C2;
    }

    #horiz-menu li.active {
    background: url(../images/menu-active-r.png) 100% 0 no-repeat;

    }

    #horiz-menu li.active span {
    background: url(../images/menu-active-l.png) 0 0 no-repeat;
    }

    #horiz-menu li.active a {
    background: url(../images/menu-active-indicator.png) 50% 0 no-repeat;
    color: #0287C2;

    }

    #horiz-menu li:hover span,
    #horiz-menu li.sfHover span {
    background: url(../images/style5/right.jpg) 100% no-repeat;

    }

    #horiz-menu li:hover a,
    #horiz-menu li.sfHover a {
    background: url(../images/style5/left.jpg) 0 0 no-repeat;
    color: #fff;

    }

    #horiz-menu li:hover span.topdaddy,
    #horiz-menu li.sfHover span.topdaddy {
    background: url(../images/style5/menu-over-r.png) 100% no-repeat;

    }

    #horiz-menu li:hover span.topdaddy a,
    #horiz-menu li.sfHover span.topdaddy a {
    background: url(../images/style5/menu-over-l.png) 0 0 no-repeat;
    color: #fff;

    }

    #horiz-menu li:hover ul,
    #horiz-menu li.sfHover ul {
    background: #787878;

    }

    #horiz-menu li:hover span.topdaddy a,
    #horiz-menu li.sfHover span.topdaddy a {
    background: url(../images/style5/menu-over-l.png) 0 0 no-repeat;
    color: #fff;
    }

    #horiz-menu li li:hover,
    #horiz-menu li li.sfHover {
    background: #636363;
    background: #6c6a6e;

    }

    #horiz-menu li:hover li a.daddy,
    #horiz-menu li.sfHover li a.daddy,
    #horiz-menu li.active:hover li a.daddy,
    #horiz-menu li.active.sfHover li a.daddy {
    background: url(../images/menu-children.png) 100% 50% no-repeat;
    }
     

    Attached Files:

    • 1.jpg
      1.jpg
      File size:
      37.5 KB
      Views:
      94
    jb439, Jun 19, 2008 IP
  2. rikun

    rikun Peon

    Messages:
    85
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #2
    For some reason, I can't see attachments so I'm not sure if this will solve your problem; but I don't think using li:hover works on all browsers. I'm pretty sure one of those browsers is internet explorer. Maybe that's what's happening with you, I dunno.

    You can check one of my tutorials on a pure CSS drop down menu if you would like:

    http://www.csswoes.com/2008/04/21/creating-drop-down-menus-with-only-css/

    The original CSS isn't mine, I just simplified it so that it'll be easier to see. It can get pretty complicated, but it's almost like yours so you should be able to handle it.
     
    rikun, Jun 20, 2008 IP