Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question style menu tab bg when hover on sub_menu

    hi, on my site: here I would like yto colour the background of the .menu when I hover over a sub_menu link

    here is a section of my HTML
    Code:
    <ul class="menu" id="menu-main-menu-1"><li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-313 current_page_item menu-item-340"><a href="http://aet.inpreview.net/">AET / Home</a>
    <ul class="sub_menu">
    	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-341"><a href="http://aet.inpreview.net/aet-home/who-are-we/">Who are we</a></li>
    	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-342"><a href="http://aet.inpreview.net/aet-home/what-we-do/">What we do</a></li>
    </ul>
    </li>
    </ul>



    here is my CSS:


    Code:
    .jqueryslidemenu{
    font-family: 'Arial';
    font-size:14px;
    font-weight: bold;
    width: 100%;
    height:34px;
    }
    
    .jqueryslidemenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    border-bottom: 5px solid #179649;
    display:inline-block;
    width:100%;
    }
    
    /*Top level list items*/
    .jqueryslidemenu ul li{
    position: relative;
    display: inline;
    float: left;
    }
    
    /*Top level menu link items style*/
    .jqueryslidemenu ul li a{
    display: block;
    background: #ffffff; /*background of tabs (default state)*/
    color: #000000;
    padding: 8px 20px;
    color: #2d2b2b;
    text-decoration: none;
    }
    
    * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
    display: inline-block;
    }
    
    .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
    color: #000000;
    }
    
    .jqueryslidemenu ul li a:hover{
    background-color: #179649;
    color: #000000;
    z-index: 10px;
    }
    	
    /*1st sub level menu*/
    .jqueryslidemenu ul li ul{
    background-color: #179649;
    position: absolute;
    left: 0;
    display: block;
    visibility: hidden;
    z-index: 10px;
    }
    
    /*Sub level menu list items (undo style from Top level List Items)*/
    .jqueryslidemenu ul li ul li{
    display: list-item;
    float: none;
    z-index: 10px;
    }
    
    /*All subsequent sub menu levels vertical offset after 1st level sub menu */
    .jqueryslidemenu ul li ul li ul{
    top: 0;
    z-index: 10px;
    }
    
    /* Sub level menu links style */
    .jqueryslidemenu ul li ul li a{
    background-color: #179649;
    font-family: 'Arial';
    font-size: 12px;
    font-weight: bold;
    width: 160px; /*width of sub menus*/
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid #ffffff;
    z-index: 10px;
    margin-bottom:0px;
    color: #ffffff!important;
    }
    
    .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
    background: #ff00cc;
    color: black;
    }
    
    /* ######### CSS classes applied to down and right arrow images  ######### */
    
    .downarrowclass{
    position: absolute;
    top: 12px;
    right: 7px;
    }
    
    .rightarrowclass{
    position: absolute;
    top: 6px;
    right: 5px;
    }
    
    ul.sub_menu { bottom:0px; }

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    You just want to change the color of ".menu" nothing else?

  • #3
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    yes, I'd like to make the background of .menu green when I hover over .sub_menu


  •  

    Posting Permissions

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