The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Conditional hover image for navigation menus with sub menus.

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #35660

    Hi there,

    I’ve tried to search for answers to my problem but am finding it difficult to describe to a search engine exactly what it is that I am trying to do…

    I have a vertical navigation bar set up and some of those main menus have sub menus and some of them don’t. At the moment it is set up so that an arrow (image) appears on rollover of all of the main menu items, but I only want this arrow to display for menu items that have a sub menu i.e. I need a conditional hover of sorts.

    Here is the code that I believe needs adjusting:

    #navbar li span.hover_arrow
    {width: 30px;
    height: 30px;
    display: none;
    background: url(images/menu_hover_arrow.png) no-repeat top left;
    position: absolute;
    top: 10px;
    left: 150px;

    {background: url(images/menu_hover_arrow.png) no-repeat center right;

    #navbar li:hover ul
    {display: block;}

    #navbar li ul li:first-child
    {border-top: none;
    background: url(images/menu_hover_arrow.png) no-repeat center right;}


Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.