menu colors

  • Resolved AJ's WebCreations

    (@dna-webdesign)


    13 years, 10 months ago

    I have looked and there are a lot of post about this, but none seem to work for me. I am using raindrops theme and I want to create rollover effects on my menu. I have got the text to change color on rollover but can not get the background to change color. I tried putting in a background-color code for each part of the code but none of them change the background color of the buttons. Here is the code for my menu.

    #access {
	display: block;
	float: left;
	margin: 0 auto;
	width:99%;
	margin-left:0.5%;

	margin-top:5px;
}
.ie8 #access {
	margin-left:0;
	width:100%;
	margin-top:0;
}

.ie6 #access,/*ie6*/
.ie7 #access{/*1e7*/
	width:100%;
	margin-top:0;
}
.debug #access{
	border:1px solid red;
}
#access ul{
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
#access li{
	margin:0;
	list-style-type:none;
}
#access a {
	display: block;
	line-height: 3em;
	padding: 0 0.4em;
	text-decoration: none;
}
div.menu ul {
	list-style: none;
	margin: 0;

}
#access .menu-header li,
div.menu li {
	float: left;
	position: relative;
	padding:0;

}
#access .menu-header li a,
div.menu li a{
	margin:0;
	width:100%;
	display:block;

}
#access ul ul {
	display: none;
	position: absolute;
	/*top: 38px;*/
	top: 3em;
	left: 0;
	float: left;
	width: 10em;
	z-index: 99;
	text-align:center;

}
#access ul ul li {
	min-width: 10em;
	margin:0;

}
#access ul ul ul {
	left: 100%;
	top: -1px;
	text-align:center;

}
#access ul ul ul.left {
	left: -100%;
	top: -1px;
	text-align:center;

}
#access ul ul a {
	line-height: 1em;
	padding:0.8em 0;
	height: auto;

}
#access .children:hover > a,
#access li:hover > a,
#access ul ul :hover > a {
	/* color:red;	for ie9 */
	<strong>color: #ff0404;<--this is where I got the rollover text color to work</strong>

}

#access ul li:hover > ul {
	display:block;

}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	margin:0;
	width:100%;
	height:100%;

}
.ie6 #access ul li.current_page_item a,
.ie6 #access ul li.current-menu-ancestor a,
.ie6 #access ul li.current-menu-item a,
.ie6 #access ul li.current-menu-parent a,
.ie6 #access ul li a:hover {
}
#access .menu-header,
div.menu{
	margin: 0 auto;

}
#access .menu-header,
div.menu {
	font-size: 100%;
	margin-left: 1%;
	width: 99%;

}
#access .menu-header ul,
div.menu ul {
	list-style: none;
	margin: 0;

}
div.menu li {
	float: left;
	position: relative;

}
#access .menu,
#access div.menu ul{
	font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;

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

    (@alchymyth)

    13 years, 10 months ago

    please post a link to your site to illustrate the problem;

    have you tried working with Firebug http://getfirebug.com/ or a similar browser tool to identify which styles to edit?

    Thread Starter AJ's WebCreations

    (@dna-webdesign)

    13 years, 10 months ago

    It was not so much of a problem as it was wanting to change some of the look and feel of the menu buttons. After a couple more hours last night I figured it out now I just have to decide what look I want them to have lol.

    For anyone else looking to do this it turned out to be the same code area that changes the text hover color.

    #access .children:hover > a,
#access li:hover > a,
#access ul ul :hover > a {
	/* color:red;	for ie9 */
	color: #ff0404;
	background: #082865;
}

    Also the code to change the background color for all non-active menu buttons is here.

    /*all non-active buttons background color*/
#access .menu-header li a,
div.menu li a{
	margin:0;
	width:100%;
	display:block;
	background: #082865;
}

    And then I had to add this code to work with the color of the active button. Don’t know if it was all needed but used it all anyway. I might try removing some down to just what I need later.

    /*background-color active menu button*/
#access ul li.current-menu-ancestor a, #access ul li.current-menu-item a, #access ul li.current-menu-parent a, #access ul ul a {
	background: #082865 !important;
	}

    Thanks for your reply I am sure I will have other questions soon.

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

The topic ‘menu colors’ is closed to new replies.