WordPress.org

Ready to get started?Download WordPress

Forums

Submenu styling (3 posts)

  1. Jagg2637
    Member
    Posted 3 years ago #

    I am trying to get hovers to work properly on a navigation bar. The tricky part is that the "normal" navigation works fine (try the solutions drop down), but the "about" drop down with the left rounded corner I setup does not keep its rollover bg while hovering over its submenu.

    http://providential.com/dev/

    The REALLY crazy thing is that the code is identical as far as I can see, but it is rendering differently. I added in green text to highlight the issue as well. Again, my issue is that the "about" menu item is not keeping its rollover/hover bg.

    There is a lot of CSS behind this menu, but I will post what I think is relevant.

    Full CSS as of this posting is available here.

    #menu-main-navigation  li a {
        background-image: url('images/nav-bg.jpg');
        background-repeat: repeat-x;
        background-position: right;
        padding: 0px 8px;
        border-left: solid 1px #CCC;
        display: block;
        text-decoration: none;
        font-size: 15px;
        color: #000;
        line-height: 30px;
        height:30px;
        width:120px;
    }
    #menu-main-navigation #menu-item-17 a{
    	background-image: url('images/nav-bg-right.jpg');
    	width:121px;
    }
    #menu-main-navigation #menu-item-20 a{
    	background-image: url('images/nav-bg-left.jpg');
    	width:121px;
    	border:0px;
    	display: block;
    }
    #menu-main-navigation li a:hover {
    	background-image: url('images/nav-bg-hover.jpg');
    }
    #menu-main-navigation #menu-item-17 a:hover{
    	background-image: url('images/nav-bg-right-hover.jpg');
    	width:121px;
    }
    #menu-main-navigation #menu-item-20 a:hover{
    	background-image: url('images/nav-bg-left-hover.jpg');
    	width:121px;
    	border:0px;
    	display: block;
    }
    ----- SKIPPING A BUNCH OF LINES HERE -----
    #access li:hover > a{
    	background-image: url('images/nav-bg-hover.jpg') ; /*need this to work on left */
    	color: #0f0;/*interesting*/
    }
    /*change*/
    #menu-main-navigation #menu-item-20 li:hover > a{
    	background-image: url('images/nav-bg-left-hover.jpg');
    	color: #0f0;/*interesting*/
    	display: block;
    }
  2. aprylemagistro
    Member
    Posted 3 years ago #

    Have you tried removing the special cases to see if it works if you make it act exactly as Solutions?

  3. Jagg2637
    Member
    Posted 3 years ago #

    Have you tried removing the special cases to see if it works if you make it act exactly as Solutions

    What do you mean by the special cases? If you are talking about the !important that I put in the CSS, that was necessary to get the proper styles since the submenus seemed to always inherit the parents styles.

    I think I am actually going to scrap the whole nav and start over for now. If I can't get it working how I want I will just drop the rounded corners idea and go for a straight nav bar.

Topic Closed

This topic has been closed to new replies.

About this Topic