I looked and cannot find it.

On the left hand side of my web page I can hover over links, but there is a small gray box on the right of each link when I hover.

www.hmstechnology.com

Any chance someone could show me what I am doing wrong?

It is GREATLY appreciated, Phil

Here is the code:

<style>
<!--
body{
	background-color:#FFFFFF
}
div#Navigation{
	width:115px;
	font-family:verdana, arial, helvetica, sans-serif;
}
div#Navigation ul{
	list-style:none;
	margin:5px 0;
	padding:0;
}
div#Navigation ul li{
	display:block;
	border-style: single;
	background-color: #FF0000;
	padding-right: 5px;
    text-align: right
}
div#Navigation ul li:hover{
	display:block;
	background-color:#999999;
	padding-right: 5px;
    text-align: right
}

div#Navigation ul li a{
	color:#000000;
	text-decoration:none;
	display:block;
}
div#Navigation ul li a:visited{
	color:#333333;
	text-decoration:none
}
div#Navigation ul li a:hover{
	color:#000000;
	background:#FFFFFF;
	text-decoration:none
}

-->
</style>
</head>
<body>
<div id="Navigation">
<ul>
  <li><a href="lessons/6th/6th_main.htm" target="mainFrame">6th Grade</a></li>
  <li><a href="lessons/7th/7th_main.htm" target="mainFrame">7th Grade</a></li>
  <li><a href="lessons/8th/8th_main.htm" target="mainFrame">8th Grade</a></li>
</ul>
<ul>
  <li><a href="RC/rc.htm" target="mainFrame"><strong>Rachel's Challenge </strong></a></li>
</ul>
<ul>
  <li><a href="lessons/8th/high_school_opportunities/high_school_opportunities.html" target="mainFrame"><strong>High School Classes (8th)</strong></a></a></li>
</ul>
 <ul>
  <li><a href="keyboarding/keyboarding2.htm" target="mainFrame">Keyboarding</a></li>
  <li><a href="http://www.gaggle.net" target="mainFrame">Gaggle.net</a></li>
  <li><a href="http://ps.ksd.org/public/Home.html?Choose=false" target="mainFrame">GRADES</a></li>
  <li><a href="http://www.google.com/calendar/embed?src=tt6er5ta7fmajrv0j8b9h74lh0@group.calendar.google.com&amp;ctz=America/Los_Angeles" target="mainFrame">CALENDAR</a></li>
    <li><a href="about_mr_larsen/about_mr_larsen.htm" target="mainFrame">About Mr. L</a></li>
  <li><a href="policies/policies.htm" target="mainFrame">Class Policies</a></li>
  <li><a href="Contact/contact.htm" target="mainFrame">Contact</a></li>
 </ul>
</div>
</body>
</html>

Iv editted the code. Use this instead:

<style>
<!--
body{
background-color:#FFFFFF
}
div#Navigation{
width:115px;
font-family:verdana, arial, helvetica, sans-serif;
}
div#Navigation ul{
list-style:none;
margin:5px 0;
padding:0;
}
div#Navigation ul li{
display:block;
border-style: single;
background-color: #FF0000;
padding-right: 5px;
text-align: right
}
div#Navigation ul li:hover{
display:block;
padding-right: 5px;
text-align: right
}

div#Navigation ul li a{
color:#000000;
text-decoration:none;
display:block;
}
div#Navigation ul li a:visited{
color:#333333;
text-decoration:none
}
div#Navigation ul li a:hover{
color:#000000;
background:#FFFFFF;
text-decoration:none
}

-->
</style>
</head>
<body>
<div id="Navigation">
<ul>
<li><a href="lessons/6th/6th_main.htm" target="mainFrame">6th Grade</a></li>
<li><a href="lessons/7th/7th_main.htm" target="mainFrame">7th Grade</a></li>
<li><a href="lessons/8th/8th_main.htm" target="mainFrame">8th Grade</a></li>
</ul>
<ul>
<li><a href="RC/rc.htm" target="mainFrame"><strong>Rachel's Challenge </strong></a></li>
</ul>
<ul>
<li><a href="lessons/8th/high_school_opportunities/high_school_opportunities.html" target="mainFrame"><strong>High School Classes (8th)</strong></a></a></li>
</ul>
<ul>
<li><a href="keyboarding/keyboarding2.htm" target="mainFrame">Keyboarding</a></li>
<li><a href="http://www.gaggle.net" target="mainFrame">Gaggle.net</a></li>
<li><a href="http://ps.ksd.org/public/Home.html?Choose=false" target="mainFrame">GRADES</a></li>
<li><a href="http://www.google.com/calendar/embed?src=tt6er5ta7fmajrv0j8b9h74lh0@group.calendar.google.com&amp;ctz=America/Los_Angeles" target="mainFrame">CALENDAR</a></li>
<li><a href="about_mr_larsen/about_mr_larsen.htm" target="mainFrame">About Mr. L</a></li>
<li><a href="policies/policies.htm" target="mainFrame">Class Policies</a></li>
<li><a href="Contact/contact.htm" target="mainFrame">Contact</a></li>
</ul>
</div>
</body>
</html>

the problem is where you said

div#Navigation ul li:hover{
display:block;
background-color:#999999;
padding-right: 5px;
text-align: right
}

padding of 5px revealed the #999 background color.

Hope that helps

Max

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.