Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 348
  • Last Modified:

how to get rollover background-color to occupy rollover background

Hi. Help me out? =) This problem has bugged me all morning. Here's what's going on:

On this page:

http://test8.ebwebwork.com/

... the rollover background color in the dropdown menus does not completely cover the background -- mouse over the menu items and you will see what I mean. I have tried using display:block to get the background color to fully occupy the rollover background.... but it's not working.

What am I missing? Thanks for your help.

Eric

HTML:

<div id="navRow" class="center">

<ul class="menu">
  
    <li><a href="/pages/Home.cfm">Home</a></li>

    <li><a href="/pages/About.cfm">About</a>
    
    <ul><li><a href="/pages/Diantha-Dow-Schull.cfm">Diantha Dow Schull</a></li></ul>  

</li>

<li><a href="/pages/Services.cfm">Services</a>

<ul>
<li><a href="/pages/Professional-Development.cfm">Professional Development</a></li>
<li><a href="/pages/50-Program-Planning.cfm">50+ Program Planning</a></li>
</ul>  

</li>

<li><a href="/pages/Publications.cfm">Publications</a></li>

<li><a href="/pages/Projects.cfm">Projects</a>

<ul>
<li><a href="/pages/50-Library-Services-Innovation-in-Action.cfm">50+ Library Services: Innovation in Action</a></li>
<li><a href="/pages/Creative-Aging-Libraries-Project.cfm">Creative Aging Libraries Project</a></li><li><a href="/pages/Reimagining-Age-Project.cfm">Reimagining Age Project</a></li>
<li><a href="/pages/Transforming-Life-After-50-Project.cfm">Transforming Life After 50 Project</a></li><li><a href="/pages/Next-Chapter.cfm">Next Chapter</a></li>
</ul>  

</li>

<li><a href="/pages/News.cfm">News</a></li>
<li><a href="/pages/Resources.cfm">Resources</a></li>
<li><a href="/pages/Contact.cfm">Contact</a></li>

</li>
</ul>  
</div>

Open in new window


CSS
/*---------------------------------
	MENU STYLES
	EDIT BELOW THIS LINE TO CUSTOMIZE
-----------------------------------*/
.menu{
background: #fff; /* Old browsers */
z-index:600;
clear:both;
width:100%;
height:43px;
max-height:43px;
max-width:1005px;
margin:0 auto;
padding:2px 0 0 0;
border:none;
font-family: 'Arimo', arial, verdana, sans-serif;
}

	.menu li{}
	
		.menu li a{
		padding:0.5em;
		text-decoration:none;
		font-size:1.2em;
		font-weight:normal;
		color:#597f05;
		text-shadow:none;
		height:auto;
		margin-right:1em;
		}
		
		.menu li.current>a,
		.menu li.current>a:hover,
		.menu li.current.hover>a{
		background-color: #597f05; /* Old browsers */
		color:#fff;
		text-shadow:none;
		cursor: default;
		height:auto;
		}
		
		.menu li a:hover,
		.menu li.hover>a{
		background-color:#597f05;
		text-shadow:none;
		color:#fff;
		height:auto;
		}
		
	/* sub menus */
	.menu ul{
	background: #fff;
	border:none;
	text-shadow:none;
	}
	
	.menu ul li{border-bottom:1px solid #597f05; border-left:1px solid #597f05;border-right:1px solid #597f05;}
	.menu ul li a{}
	
		/* sub-sub menus */
		.menu ul ul{}
		.menu ul ul li{border-bottom:1px solid #597f05; border-top:1px solid #597f05;border-right:1px solid #597f05;}
		.menu ul ul li a{}
		
	/* arrows */
	/* arrow down */  .menu li.has-menu span.arrow{border-color-top:#ccc;border-color:#ccc transparent transparent transparent;}
	/* arrow left */  .menu li li.has-menu span.arrow, .menu.vertical li.has-menu span.arrow
					   {border-color-left:#ccc;border-color:transparent transparent transparent #ccc;}
	/* arrow right */ .menu.vertical.right li.has-menu span.arrow{border-color-right:#ccc;border-color:transparent #ccc transparent transparent;}
	
	/* dividers */ 	  .menu ul li.divider{border-top:1px solid #ccc;}
					  .menu ul li.divider a{border-top:1px solid #fff;}

Open in new window

0
Eric Bourland
Asked:
Eric Bourland
1 Solution
 
Kyle HamiltonData ScientistCommented:
in reimaginingage.css, around line 210, change the margin-right to 0. That is causing the space on the right.

.menu li a {
padding: 0.5em;
text-decoration: none;
font-size: 1.2em;
font-weight: normal;
color: #597f05;
text-shadow: none;
height: auto;
margin-right: 0;
}
0
 
Eric BourlandAuthor Commented:
That's it! I totally missed that. Thank you, kozaiwaniec. Have a great day.

Eric
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now