How to change color of menu hover bar

  • Hey all,

    I’m working with this site currently: https://cinemascrutiny.com/

    I cannot for the life of me figure out how to change the color of the hover bar that comes up when hovering over one of the menu options at the top.

    Any help would be greatly appreciated.

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

  • You need to manipulate the :hover pseudo class on the menu using CSS

    are you able to see anything for
    #submenu ul:hover
    in your CSS file?

    It also looks like the hover is a gradient, so you should look for any of the :hover pseudo classes with a gradient background-color on it.

    Thread Starter maskedfox

    (@maskedfox)

    I’ve found all this code for the submenu but cannot find any colors other than gray listed. Am I just missing something?

    #botmenu{
	background: url(images/menu.png) repeat-x;
	border-bottom:1px solid #000;
	border-radius: 5px 5px 0px 0px;
	height:50px;
	font-family: 'BebasRegular';
}

#submenu {
	margin: 0px 0px;
	padding:0px 0px;
	height:50px;
	}

#submenu ul {
	width: auto;
	float:left;
	list-style: none;
	margin: 0;
	padding: 0px 10px;
	}

#submenu li {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	color: #222;
	font-weight:400;
	line-height:50px;
	}

#submenu li a {
	color: #ddd;
	display: block;
    margin: 0;
	padding: 0px 10px 0px 10px;
	text-decoration: none;
	position: relative;
	}

#submenu li a:hover, #submenu li a:active, #submenu li.current_menu_item   {
	color: #eee;
	background: url(images/menua.png) repeat-x;
	}

#submenu li a.sf-with-ul {
	padding-right: 10px;
	}	

#submenu li ul li a, #submenu li ul li a:link, #submenu li ul li a:visited,
#submenu li ul li ul li a, #submenu li ul li ul li a:link, #submenu li ul li ul li a:visited,
#submenu li ul li ul li ul li a, #submenu li ul li ul li ul li a:link, #submenu li ul li ul li ul li a:visited {
	color: #eee;
	width: 148px;
	margin: 0;
	padding: 15px 10px;
	position: relative;
	font-weight:400;
	line-height:120%;
		border-top:1px solid #333;
	}

#submenu ul li ul li:first-child a,#submenu ul li ul li ul li:first-child a,#submenu ul li ul li ul li ul li:first-child a  {
	border-top:none;

}

#submenu li ul li a:hover ,#submenu li ul li ul li a:hover ,#submenu li ul li ul li ul li a:hover {
	color: #fff;
		}

#submenu li ul {
	z-index: 9999;
	position: absolute;
	left: -999em;
	height: auto;
	width: 170px;
	margin: 0px 0px 0px 0px;
	padding: 5px 5px;
	background:#222222;
	border:1px solid #333;
	}

#submenu li ul a {
	width: 150px;
	}

#submenu li ul a:hover, #submenu li ul a:active {
	background:#222;
	}

#submenu li ul ul {
	margin: -52px 0 0 175px;
	}

#submenu li:hover ul ul, #submenu li:hover ul ul ul, #submenu li.sfHover ul ul, #submenu li.sfHover ul ul ul {
	left: -999em;
	}

#submenu li:hover ul, #submenu li li:hover ul, #submenu li li li:hover ul, #submenu li.sfHover ul, #submenu li li.sfHover ul, #submenu li li li.sfHover ul {
	left: auto;
	}

#submenu li:hover, #submenu li.sfHover {
	position: static;
	}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to change color of menu hover bar’ is closed to new replies.