sub menus appear elusive

Community Forums Forums General Discussion sub menus appear elusive

This topic is: not resolved

This topic contains 1 reply, has 2 voices, and was last updated by  David Chu 1 year, 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #32464

    sugarbeatbc
    Participant
    Post count: 5

    Morning! I have an odd question. I’ve set up a Focus child theme on http://notjustoliveoil.com and several of the menus items have submenus. The first time a user clicks on a submenu item, it works, the second time, the submenu seems to be elusive and difficult to click on unless you are really fast with your mouse. If you refresh the screen, you get one more easy click, followed by elusiveness.

    I realize this seems like an odd problem, but does anyone have any suggestions on how I can deal with this?

    Thanks,

    Barb

     

    #32533

    David Chu
    Participant
    Post count: 1314

    Hi,
    That’s an interesting conundrum. I can barely get the dropdown/flyouts to work at all, much less once. It’s very hard to see without doing a lot of testing. Dropdown CSS can be horrifically complex.

    But I do have one path to look at. You have list items that are 140px wide, and links below those that are 128px wide. I think that could be made to work smoothly with everything set just right. But I notice that when I try get to the edges of the dropdown links, I “fall off the edge”, and have nothing to click on. You do have padding of 5px at the sides of the links, and if I’m not mistaken that will get you a total of 138, just short of 140. I wonder if 6px at the sides might fix it.

    That’s my best guess… good luck! This is a very precise operation. :-)

    Code sample:

    [css]
    .menu-primary li li a, .menu-primary li li a:link, .menu-primary li li a:visited, .menu-secondary li li a, .menu-secondary li li a:link, .menu-secondary li li a:visited, #header .menu li li a, #header .menu li li a:link, #header .menu li li a:visited {
    background: none;
    border-bottom: 1px dotted #E3EAEE;
    border-top: medium none;
    color: #244C5E;
    font-size: 13px;
    font-weight: normal;
    padding: 7px 5px;
    position: relative;
    text-transform: none;
    width: 128px;
    }
    [/css]

    Dave


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.