www.webdeveloper.com
Results 1 to 5 of 5

Thread: problems with nav styles

Hybrid View

  1. #1
    Join Date
    Sep 2006
    Posts
    79

    problems with nav styles

    Hi,

    I have a couple of minor problems with a secondary nav menu. Please see url: http://caspca.org/2013-critterball/ and mouse over "Critter Ball Home". The first problem is, when you mouse over, you only see one list item when there are actually two.

    Style:
    Code:
    .cb_nav_sub li {
         background:#2d0858;
         display:block;
         float:none;
         position:absolute;
         top:41px;
         width:170px;
    }
    When I remove position:absolute; you can see both items but then it isn't positioned correctly (below the parent items).

    The second thing is, I want the submenus to be displayed on the <li> mouseover, not the <ul> and I don't know how to get that quite right.

    Code:
    ul:hover .cb_nav_sub {
         display:block;
    }
    - ??

    Thanks,

    John

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,111
    Remove the position off the LI and add to the UL instead:

    Code:
    .cb_nav_sub li {
    background: #2d0858;
    display: block;
    float: none;
    }
    
    .cb_nav_sub {
    display: none;
    position: absolute;
    top: 41px;
    }
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  3. #3
    Join Date
    Sep 2006
    Posts
    79
    CB,

    Thanks very much! That gets the position right, but the hover display is still on the <ul>, not the <li>. - ?

  4. #4
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,111
    To display it on hovering the LI, you'll have to move the UL into the LI (after the a).

    Then adjust your hover to something like this:

    .cb_nav li:hover ul {display: block;}
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  5. #5
    Join Date
    Sep 2006
    Posts
    79
    Thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles