Solved

how to get rollover background-color to occupy rollover background

Posted on 2013-11-12
2
314 Views
Last Modified: 2013-11-12
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
Comment
Question by:Eric Bourland
2 Comments
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 39642787
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
 
LVL 3

Author Closing Comment

by:Eric Bourland
ID: 39642903
That's it! I totally missed that. Thank you, kozaiwaniec. Have a great day.

Eric
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now