CSS - Css Drop Down Hover Nav Menu Issue

Hi,
This renders ok in firefox but not in IE, it places extra space between the elements. Can someone correct it for me please, i cant see where im going wrong. Thanks.

the CSS:
Code:

#menu {
	margin: 0px;
	padding: 0px;
	border-top: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
	
}
#menu ul {
	border: 0px;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	text-align: center;
}

#menu ul li {
	display: block;
	text-align: left;
	padding: 0px;
	margin: 0px;
}


#menu ul li a {
	border-top: none;
	border-bottom: 1px solid black;
	padding: 2px;
	margin: 0px;
	text-decoration: none;
	display: block;
}

#menu a:link, #menu a:visited {
	color: black;
	text-decoration: none;
}

#menu a:hover, #menu a:active {
	background-color: #fffed9;
}

the html:
Code:

<div id="menu">
  <ul>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
    <li><a href="#">item 5</a></li>
  </ul>
</div>

plug this in and view it in ie and you'll see what i mean.

Can somebody please look at the following drop-down menu and tell me why it breaks in IE...it works fine in Mozilla/FF...

In IE, the problem is that the sub-menus do not completely appear in front of their parent menus...they should be on top of their parent menus...like i said, it works in FF, so you can switch bewteen browsers to see the difference....

Thanks for any help.

__________________
R.J.
www.mediamogulsweb.com

http://www.freewebs.com/dmorand/NMI%20Web.htm

That's what I've done so far, but the drop-down menu isn't displaying in IE, but it does in Firefox. Anyone have any ideas?

Also, in Firefox I see a couple of dashes in the top left corner, that I don't see in IE.

Ok, I'm using wordpress theme SLR Lounge V2, and am trying to modify it to suit my needs. The problem I'm having is with my navigation's drop down menu. I'm currently using a custom menu (wordpress functionality, not theme).

Initially, there was no background behind the drop down at all (so you couldn't really read it), which I've managed to modify to get the colour I want, however, I don't want the gaps, and I want it all to line up flush on the right hand side. Here's a screenshot of what I'm talking about:

http://i.imgur.com/uSn1i.jpg

I've played with padding etc to no avail. Also, sometimes the navigation elements end up paired beside each other instead of a straight vertical list if I play with the padding.

Here is the css I have relating to the drop down navigation:

Code:

/* Start Menu Items */

#menu {
list-style:none;
margin:0;
padding:0;
width:1000px;
height:100%;
border:none;
}

#menu:after {
content:'';
display:block;
clear:both;
} 

#menu li.hover a,#menu li:hover a,#menu li.hover,#menu li:hover {
	position: relative;

}

#menu li.hover ul, #menu li:hover ul {
	display: block;
}

/*start drop-down menus on the top menu*/

#menu ul {
	padding:0;
	margin:0 0 0 -10px;
	list-style:none;
	width:108px;
	display: none; /*******if you delete this, your drop down menu will appear randomly on the page somewhere **/
	position: absolute;
}

#menu ul li a { /*This is the drop down stufff */
	text-align:left;
	float:right;

If you look at the main menu(Home-About MCAEC-The Academy-Adult Education-Shining Star-Giving) on this page and hover over one of the parent categories you'll see issues with the positioning of the dropdown. I adjusted the margin and it looks fine in IE but the dropdown floats over the parent tabs in Firefox and Opera. Is there a way to adjust this so it's consistent in all browsers?
Here's the code for the dropdown ul ul li a:
Code:

#dropmenu { z-index:100; position:relative;}
#dropmenu .menu ul ul {z-index:99; margin:0; width:160px; background:url(images/bg_sub.png) top left no-repeat    !important; margin: 10px 0px 0px 0px ;  position: absolute; display:none; padding-bottom:10px !important; clear:both; padding-top:13px;}	
#dropmenu .menu ul ul li { line-height:inherit; height:auto; text-align:left; width:160px; text-align:left; line-height:1.69em;}
#dropmenu .menu ul ul li a{ font-weight: normal; color:#fff; font-size:13px; text-transform:none; }	
#dropmenu .menu ul ul li a:hover {  color:#edc951; font-weight:normal; }

Thanks

I have a drop down menu that is working fine in FF 3.5 but not in IE 7. Will you please have a look at it and help me find out where the conflict is? I am thinking it is a CSS issue but it may also be a javascript issue. The menu is he

http://bit.ly/42iVkG

and the menu script I used is he

http://bit.ly/4pvcXj

Thank you.

Hello everyone,

I have a drop-down menu that is currently working well.

The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned.

I want the menu to "drop" down and to the left, so the right edges are aligned.

I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed.

Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use.

Thank you!

Here is the page: http://www.littlebuddymedia.com/site05/012.html



The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif



I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG

Here is my code:

Code:

.chromestyle{
     width: 100%;
     font-weight: bold;
     float: left;
     height: 29px;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 5px;
text-decoration: none;
font-weight: bold;
color: black;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;
}

I am a photographer for a website and I know very little about anything other than basic html. With the website lady gone on a trip around the world for a year, I ended up being the person to attempt to modify our side menu to show an additional column of subcategories. I tinkered around with the code we had and I managed to get this to work in Firefox, however in IE7 the contents of the menu shift down a few pixels when you hover over a category.

To view my problem, go to scannerparts.biz

I've messed around with this for a few days and everything has become a big confusing mess so I have no choice but give in and ask for help. I thank anyone in advance for any assistance you can offer.

-Emerson

Here is the code:

hover.css

Code:

<!--
body {
	behavior: url(/images/csshover2.htc);
}

div#categorynav ul {margin: 0px; padding: 0px;}
.submenu {
	position: relative;
	margin: 0px;
	padding: 2px 0px;
	width: 178px;
}

div#categorynav ul.level1 li a {
	position: relative;
	display: block;
	text-decoration: none;
	margin: 0px;
	padding:  0px;
}

div#categorynav ul.level2 li {
	position: relative; 
	display: block;
	text-decoration: none;
	margin: 0px; 
	padding: 0px;
}

div#categorynav ul.level3 li {
	position: relative; 
	display: block;
	text-decoration: none;
	margin: 0px; 
	padding: 0px;
}

div#categorynav ul.level1 ul.level2 a {
	background-color: #000000;
	color: #fff;
	width: 178px;
	font-weight:normal;
	padding: 4px 4px 4px 14px;
}

div#categorynav ul.level2 ul.level3 a {
	background-color: #000000;
	color: #fff;
	width: 178px;
	font-weight:normal;
	padding: 4px 4px 4px 14px;
}

html>body div#categorynav ul.level1 ul.level2 a {
	width: auto;
	padding: 0px; 
	margin: 0px;
}
html>body div#categorynav ul.level2 ul.level3 a {
	width: auto;
	padding: 0px; 
	margin: 0px;
}

div#categorynav>ul a {width:auto; padding: 0px; margin: 0px;} 
div#categorynav ul ul {position: absolute; display: none; width: 100px; z-index:900; padding: 0px; margin: 0px;}
div#categorynav ul ul li {padding: 0px; margin: 0px;}
div#categorynav ul.level1 li.submenu:hover ul.level2 {
	display: block;
	list-style-image: none;
	list-style-type: none;

	
}
div#categorynav ul.level2 li.submenu:hover ul.level3 {
	display: block;
	list-style-image: none;
	list-style-type: none;

	
}

div#categorynav ul.level2 {
	top: 0px;	
	left: 178px;
	margin: 0px;
	padding: 0px;
	width:160px;

} 
div#categorynav ul.level2 li a:hover {
	background-color: #000000;
	color: red;

}

div#categorynav ul.level3 {
	top: 0px;	
	left: 178px;
	margin: 0px;
	padding: 0px;
	width:160px;

} 
div#categorynav ul.level3 li a:hover {
	background-color: #000000;
	color: red;


}

Abbreviated Header Source (abbreviated for max character requirement, I think I left all the vital stuff there)
Code:

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>

<ss:comment><link href="hover.css" type="text/css" rel="stylesheet" media="screen"/></ss:comment>
<link href="$store.images['hover.css']" type="text/css" rel="stylesheet" media="screen"/>


<style type="text/css">
<!--
/* Style Sheet */
body {
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 30px;
	margin-left: 1px;
	background-image: url(/images/backgroundgray.jpg);
	background-repeat: repeat-x;
	background-position: center bottom;
}
html { height: 100%; margin-bottom: 1px; }
#outline{
	border :0px solid #ffffff;
	width :760px;
	}
#categories{
	background-color:#000000;
	color:#ffffff;
	text-decoration:none;
	text-align : left;
	display: block;
	padding : 5px 5px 1px 0px;
	font-weight :bold;
	font-size:9pt;
	font-family:<ss:value source=$font.paragraph.face/>;
        width :178px;
	padding: 0px; 
	}
#cat1{
	background-color:#000000;
	color: #ffffff;
	text-decoration:none;
	text-align: left;
	display: block;
	font-weight :normal;
	font-size: 9pt;
	font-family:<ss:value source=$font.paragraph.face/>;
        width: 178px;
	padding: 0px; 
	}
#cat1 a{
	background-color:#000000;
	color: #ffffff;
	text-decoration:none;
	text-align: left;
	display: block;
	font-weight: normal;
	font-size:9pt;
	font-family:<ss:value source=$font.paragraph.face/>;
        width :178px;
	padding: 0px; 
	}
#cat1 a:hover{
	background-color:#000000;
	color:#ff0000;
	text-decoration:none;
	text-align : left;
	display: block;
	font-weight: normal;
	font-size:9pt;
	font-family:<ss:value source=$font.paragraph.face/>;
        width :178px;
	padding: 0px; 
	}
.leftnav {
	background-color:#000000;
	color:#ffffff;
	text-decoration:none;
	font-weight :bold;
	font-size:9pt;
	font-family:<ss:value source=$font.paragraph.face/>;
	padding : 2px 5px 1px 0px;
	}
.leftnav A:link {
	background-color:#000000;
	border-bottom : 1px solid #666666;
	color:#ffffff;
	text-decoration:none;
	text-align : left;

	display: block;
	padding : 2px 5px 1px 0px;
	font-weight :bold;
	}
.leftnav A:visited {
	background-color:#000000;
	border-bottom : 1px solid #666666;
	color:#ffffff;
	text-decoration:none;
	text-align : left;
	display: block;
	padding : 2px 5px 1px 0px;
	font-weight :bold;
	}
.leftnav A:hover {
	background-color:#000000;
	border-bottom : 1px solid #666666;
	color:#ff0000;
	text-decoration:none;
	text-align : left;
	display: block;
	padding : 2px 5px 1px 0px;
	font-weight :bold;
	}
.leftnav A:active {
	background-color:#000000;
	border-bottom : 1px solid #666666;
	color:#ffffff;
	text-decoration:none;
	text-align : left;
	display: block;
	padding : 2px 5px 1px 0px;
	font-weight :bold;
	}
A:link {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:visited {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:hover {text-decoration:none;color:<ss:value source=$font.paragraph.color/>;}
A:active {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}

.content {font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}

.title {font-size:10pt;font-weight:bold;font-family:<ss:value source=$font.paragraph.face/>
;color:#ffffff;}

.footer {font-size:9pt;font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}

-->
</style>
</head>

<body>
<center>
<div id="outline">
<table width="760" border="0" cellspacing="0" cellpadding="0">
<!-- banner image -->
	<tr valign="top"><td colspan="4"><a href="(URL address blocked: See forum rules)"><ss:image source="$templateSet.images['header.jpg']" border="0"/></a></td></tr>

	<tr valign="top">
<!-- left nav -->
		<td bgcolor="#000000">&nbsp;&nbsp;</td>
		<td width="175" bgcolor="#000000">
			<div class="leftnav">
		<!-- store logo -->
			</div>
		
			<div class="leftnav">
				<div style="border-bottom : 0px solid #666666;">&nbsp;</div>
			<!-- home -->
				</div>
			
			<!-- categories -->
<p><font face="Arial,Helvetica,sans-serif" size="2" color="white"><b>Parts and Products:</b></font></p>
<div id="categorynav">
<div id="categories">
	<ul class="level1">                        			 
	<ss:foreach item="category" within="$catalog.categoryList()">
	<ss:sortby item="categorypriority" direction="asc"/>
	<ss:if test="$category.treeLevel == '1'">
	<ss:set name="hasSub" value="0"/>
		<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">

		<ss:set name="hasSub" value="1"/>
		</ss:foreach>
                <li class="submenu">
		<div id="cat1"><ss:link source="$category"/></div>
			<ss:if test="$hasSub == '1'">
			<ul class="level2">
			<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
			<ss:sortby item="categorypriority" direction="asc"/>

			<ss:if test="$category.treeLevel == '2'">
			<ss:set name="hasSub" value="1"/>
			<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">

                        		<ss:set name="hasSub" value="1"/></ss:foreach></ss:if>
</li>
                                 	<li class="submenu">
					<div id="cat1"><ss:link source="$subcategory"/></div>
						<ss:if test="$hasSub == '1'">
						<ul class="level3">
						<ss:foreach item="subcategory" within="$subcategory.childrenToDepth(1)">
						<li><ss:link source="$subcategory" title="$subcategory.name"/></li>
						</ss:foreach>
						</ul>
						</ss:if>
						</ss:foreach>
						</ul>
						</ss:if></ss:foreach>

					</li>

					</ss:if></ss:if></ss:foreach>
				<br>                      
			 </ul>
			</div> 
			</div>

Hi,

How do i change the colour of the background hover colour of a drop down menu? I can only seem to change the background of the normal state. Any ideas?

Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html
is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like:


Code:

. Ask.Jeeves 
. [+] Google.com 
. [+] Yahoo.com

Now clicking [+] in front of Google.com will look like.

Code:

. Ask.Jeeves 
. [-] Google.com 
     . Google.co.ie
     . Google.co.ie
     . [+] Google.co.nz 
. [+] Yahoo.com

Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e.


Code:

. Ask.Jeeves 
. [-] Google.com 
     . Google.co.ie
     . Google.co.ie
     . [+] Google.co.nz 
. [+] Yahoo.com

Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e.


Code:

. Ask.Jeeves 
. [+] Google.com 
. [+] Yahoo.com

Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting.

Here is the source for the above:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>

<style type="text/css">

ul li ul {display:none;list-style-type: none;}

#myNav li a:hover {
color: blue;
}

#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}

#myNav { list-style-image: url(page.GIF); }
</style>

<script type="text/javascript">
<!--
function initNav() {
	var navObj = document.getElementById('myNav');
	var ulCollection = navObj.getElementsByTagName('li');
	for (var loop = 0; loop < ulCollection.length; loop++) {
		if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
			/* we have an LI that contains a UL */
			if (ulCollection[loop].getElementsByTagName('span').length > 0) {
				/* there is at least one SPAN tag present */
				ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
			}
		}
	}
}
window.onload = initNav;
//-->
</script>

</head>
<body>
<ul id="myNav">
	<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
	<li><span></span><a href="http://www.google.com">Google.com</a>
		<ul>
			<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
			<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
			<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
			<ul>
			   <li>*3*</li>
			   <li>*4*</li>
			</ul>
</li>
		</ul>
	</li>

	<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
		<ul>
			<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
			<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
		</ul>
	</li>
</ul>
</body>
</html>

Any help is really appreciated thanks.

drlinklove.com/drew/index4.html

Some of the navigation items have drop-down menus. It seems that sometimes the drop-down menu disappears before the user has a chance to click one of the options.

Anyone have a guess to how I can make it more stable?

EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears.
(My drop down is vertically aligned on the left.)
(bits of the code that relate to the menu)

PHP Code:
.btn1 { position: absolute; left: 165px; top: 200px; } 
.btn2 { position: absolute; left: 165px; top: 240px; }
.btn3 { position: absolute; left: 165px; top: 280px; } 
.btn4 { position: absolute; left: 165px; top: 320px; }
.btn5 { position: absolute; left: 165px; top: 360px; } 
.btn6 { position: absolute; left: 165px; top: 400px; }
.btn7 { position: absolute; left: 165px; top: 440px; } 
.btn8 { position: absolute; left: 165px; top: 480px; }
.link1 { position: absolute; left: auto; top: 240px; }
.link2 { position: absolute; left: auto; top: 280px; }
.link3 { position: absolute; left: auto; top: 320px; }
.link4 { position: absolute; left: auto; top: 360px; }
.link5 { position: absolute; left: auto; top: 400px; }
.link6 { position: absolute; left: auto; top: 440px; }
.link7 { position: absolute; left: auto; top: 480px; }
.link8 { position: absolute; left: auto; top: 520px; }
.link9 { position: absolute; left: auto; top: 560px; }

#nav, #nav ul { padding: 0; margin: 0; list-style: none; }
#nav a { display: block; width: 100px; }
#nav li { width: 100px; }
#nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; }
#nav li:hover ul { display: block; left: 266px; z-index: 3; }
#nav li:over ul { display: block; left: 266px; z-index: 3; } 





PHP Code:
<ul id="nav">
  <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li>
  <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a>
    <ul>
      <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li>
      <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li>
      <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li>
      <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li>
      <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li>
    </ul>
  </li>
    <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a>
    <ul>
      <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li>
      <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li>
      <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li>
      <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a>
    <ul>
      <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a>
    <ul>
      <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li>
      <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li>
      <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a>
    <ul>
      <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li>
      <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li>
   <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li>
</ul> 





<script type="text/javascript" src="drop_down.js"></script>
the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later.
link: The Page

http://geoffreyrickaby.com/df-test/

i have a <div class="current-link"> setup on the home link because it's the current page being viewed, however when you scroll over it the red line over it gets brighter because my hover places that image there. How can i fix it so that a current link, and my sub menu when scrolled over don't display the hover?

I'm almost thinking its a if then statement, but i am probably wrong.

Any suggestions?

I have a website currently up made with cargo. I used a template with thumbnail buttons and added a hover feature. When I added the second row of thumbnails, the hover feature acted funny on only one of the buttons.

aaroncremona.com is the url

When hovering over yakiniku it kicks everything down a row like there isn't room and its being relative.
Anyone have a clue? Is there anything I need to supply for you guys to help me?

I am having trouble with a:hover in I.E , I have a javascript link that is using php to open a browser window. I am unable to use
<a href=""> instead I am using <a onclick=""> .

Everything works well until I test in I.E and the a:hover style is not working. Does anyone know of a fix to this problem?

the css is

a:hover {
text-decoration: underline;
}