WordPress.org

Forums

change menu hover background color (2 posts)

  1. manubonin
    Member
    Posted 3 years ago #

    I see a lot of posts on how to change the menu hover text color, but none on how to change the main menu background hover color. I am trying to customize the Twenty-eleven theme, and am able to change the text color of all the menus and the background color of the submenus, but have not managed to change the background color of the items in the main menu when the mouse rolls on it. It always remains the original grey. What code should I use to change the hover background color of the main menu (and once again, I am not talking about the background color of the menu in general, this I can change)?
    Here is my code for now:

    /* =Menu
    -------------------------------------------------------------- */
    
    #access {
    	background: #222;
    	background: /*-moz-linear-gradient(#006184, #88A9BA)*/ #88B8CA;
    	background: -o-linear-gradient(#252525, #0a0a0a);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a));
    	background: -webkit-linear-gradient(#252525, #0a0a0a);
    	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    	box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    	clear: both;
    	display: block;
    	float: left;
    	margin: 0 auto 6px;
    	width: 100%;
    }
    
    #access ul {
    	font-size: 13px;
    	list-style: none;
    	margin: 0 0 0 -0.8125em;
    	padding-left: 0;
    }
    #access li {
    	float: left;
    	position: relative;
    }
    /* en tete de menu */
    
    #access a {
    	color: #29809C;
    	display: block;
    	line-height: 2em;
    	padding: 0 1.2125em;
    	text-decoration: none;
    }
    
    #access a:hover { background: #FF0000 }
    
    #access ul ul {
    	/*-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    	box-shadow: 0 3px 3px rgba(0,0,0,0.2);*/
    	display: none;
    	float: left;
    	margin: 0;
    	position: absolute;
    	top: 2em;
    	left: 0;
    	width: /*188px*/ 120px;
    	z-index: 99999;
    }
    #access ul ul ul {
    	left: 100%;
    	top: 0;
    }
    #access ul ul a {
    	background: #88B8CA;
    
    	border-bottom: 1px dotted #ddd;
    /*couleur du texte du sous-menu*/
    	color: #8AABB;
    	font-size: 13px;
    	font-weight: normal;
    	height: auto;
    	line-height: 1.4em;
    	padding: 0px 0px;
    	width: 168px;
    }
    #access li:hover > a,
    #access ul ul :hover > a,
    #access a:focus {
    	background: #efefef;
    }
    #access li:hover > a,
    #access a:focus {
    	background: #f9f9f9; /* Show a solid color for older browsers */
    	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
    	background: -o-linear-gradient(#f9f9f9, #e5e5e5);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
    	background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);*/
    	color: #373737;
    }
    #access ul li:hover > ul {
    	display: block;
    }
    #access .current_page_item > a,
    #access .current_page_ancestor > a {
    	font-weight: bold;
    }
  2. Tara
    Volunteer Moderator
    Posted 3 years ago #

    you might get more specific help if publish your site's url, and poit to the area in question.

Topic Closed

This topic has been closed to new replies.

About this Topic