CSS - Css Drop Nav Li:hover Issue In Non-ie Bowsers

Hello,

This is my first post, so let my start by saying thanks and hopefully this can be of some help. I work in a college, and I'm somewhat unfamiliar with the CSS used. I also apologize in advance if my issue is simple, but I looked through the rules and resources sections and I felt my issue was somewhat specific. In an effort to save time and frustration, I'll put it in the simplest terms I can:

I'm trying to make the site I have control over have a menu that drops down upon mouseover. The site is he

www dot ccm dot edu/admissions

The menu I'd like to make expandable on mouseover is the "Things to Do" menu on the right side of the page. For example, here's how another site does it:

www dot ecc dot edu/admissions

You can see the menu on the left side of the page, "Admissions Checklist". I show that site as an example because we're using the same templates. I inquired as to how they achieved the menu on their site, but they unfortunately didn't know. If possible, I'd like to have the menu expand upon mouseover instead of a click.

Below are the copied CSS codes for each menu.

The site I want the menu to be able to expand on mouseover:

Code:

/* TodoList */

.AC-TodoList				{position:absolute;top:7px;right:-27px;background:#eeeac3;width:164px;padding:19px 13px 0px;}

.AC-TodoList DIV			{padding-bottom:14px;text-align:center;}

.AC-TodoHeader				{padding-left:21px;}

.AC-TodoHeader H4			{background:url(../images/admissions/header_thingsToDo.gif) no-repeat;width:116px;height:14;text-indent:-9999px;overflow:hidden;}



.AC-TodoList .AC-TodoCheck		{display:none;}



#zone1 .AC-TodoList A				{display:block;background:url(../images/admissions/bg_todoSm.gif) no-repeat;width:153px;height:22px;padding:8px 5px 4px;font-weight:bold;color:#8d8a6e;}

#zone1 .AC-TodoActive	A			{background-position:0px -34px;color:#fff;}

#zone1 .AC-TodoComplete A			{background-position:0px -68px;width:128px;padding-left:30px;text-align:left;}



#zone1 .AC-TodoList A.large			{background-image:url(../images/admissions/bg_todoLg.gif);height:36px;line-height:1.4em;}

#zone1 .AC-TodoActive A.large			{background-position:0px -48px;}

#zone1 .AC-TodoComplete A.large		{background-position:0px -96px;}



.AC-TodoListCt .controls		{display:none;}


 And the site that already has the effect I'd like to use: 

/* To Do List */

#AC-TodoList						{margin:0px -20px 0px -24px;background-color:#586A3E;padding-left:24px;}

#AC-TodoList INPUT					{display:none;}

#AC-TodoList .AC-Spacer				{display:none;}

#AC-TodoList .controls				{display:none;}



.AC-TodoHeader 						{display:block;width:220px;height:32px;cursor:pointer;}

.AC-TodoHeader H4					{margin:0px;padding:0px;font-size:1em;font-weight:normal;line-height:1.6em;text-transform:uppercase;color:#f9e9b6;padding:0px 0px 0px 5px}

.AC-TodoHeader H4 A					{color:#f9e9b6;}

.AC-TodoOpen H4						{background-color:#7F0000;position:absolute;width:233px;height:32px; }

.AC-TodoOpen h4 A					{width:238px;height:32px; background-color:#7F0000;}



.AC-TodoContent						{background-color:#ffffff; position:absolute;width:238px;height:0px;overflow:hidden; z-index:999; color:#F9E9B6;}



.AC-TodoIncomplete					{background:url(../images/admissions/todo_checked.gif) no-repeat 7px 8px transparent; border-bottom:solid 1px #C9C9CA;}

.AC-TodoIncomplete a				{display:block;padding:4px 10px 2px 30px;color:#7F0000;text-decoration:none;font-weight:normal;}



.AC-TodoComplete					{background:url(../images/admissions/todo_checkedCom.gif) no-repeat 4px 8px transparent; border-bottom:solid 1px #C9C9CA; background-color:#B2B3B4;}

.AC-TodoComplete a					{display:block;padding:4px 10px 2px 30px;color:#ffffff;text-decoration:none;font-weight:normal;}



.AC-TodoFooter 						{background:url(../images/admissions/todo_footer_bg.gif) no-repeat;width:238px;height:41px;cursor:pointer;}

I apologize if I'm breaking any rules, or my issue is simplistic. I especially apologize if my issue isn't well illustrated because of the no links policy. But thank you in advance to anyone that might be able to help.

HellO~! I'm current trying to code a website for someone, but I'm having some problems getting the menu to work properly in Firefox. It works great in Chrome and Safari but I have no idea how to make it work properly for firefox.

So basically, I have a drop line menu, but instead the sub links all showing up in the same spot when I hover, I want the sub links to show up under the link I'm hovering over. Now, I managed to get this working great by just changing the position of the sub ul and il hover to relative.

URL


But in Firefox, when you hover over a link, that link expands to the width of the sub navigation and pushes the other links to the right. It just looks terrible and I don't know how to fix this.

URL

I've tried searching for a solution, but no luck! I'd really appreciate if someone could enlighten me on how this could be fixed? Or if it's even possible? I'm still new to working with drop downs and would love the help!

Advance thanks for those who read this! Hopefully someone can help me out with this!

EDIT: Looks like my images wont show up after all . Hopefully you will all know what I mean.

CSS CODE:
Code:

* {
margin:0;
padding:0;
}

#nav {
	list-style:none;
	position:relative;
}

#nav li {
	float:left;
	text-align:center;
}

#nav a {
	display:block;
	text-decoration:none;
}

#nav a:active, #nav a:focus, #nav a:hover {
	background:#254563;
}

/* --------- Sub Nav --------- */
#nav li.current ul {
	left:0px;


}

#nav ul {
	position:absolute;
	left:-999em;
	list-style:none;
	padding:0 0 0;
	width: 500px;
}

#nav ul li {
	width: auto;
	margin: 3px 3px 0 0px;

}

#nav ul a {
	font-size: 12px;
	height: auto;
	padding: 5px 10px;
	background: #dfeec9;
	border-radius: 8px;
	-moz-border-radius: 8px;
	width: auto;
}

#nav li:active ul, #nav li:hover ul { 
	height: 30px;
	left: 10px;
	position: relative;
	padding: 0px 3px 5px 3px;
	background: none;
	width: 500px;
}

.navi01 {	
	display: block;
	padding-top: 0px;
	padding-left: 0px;
	width: 33px;
	height: 44px;
	text-decoration: none;
	background: url(images/navi_01.png);
	}

.navi02 {	
	display: block;
	padding-top: 0px;
	padding-left: 0px;
	width: 133px;
	height: 44px;
	text-decoration: none;
	background: url(images/navi_02.png);
	}

.navi03 {	
	display: block;
	padding-top: 0px;
	padding-left: 0px;
	width: 86px;
	height: 44px;
	text-decoration: none;
	background: url(images/navi_03.png);
	}

.navi04 {	
	display: block;
	padding-top: 0px;
	padding-left: 0px;
	width: 83px;
	height: 44px;
	text-decoration: none;
	background: url(images/navi_04.png);
	}

.navi05 {	
	display: block;
	padding-top: 0px;
	padding-left: 0px;
	width: 92px;
	height: 44px;
	text-decoration: none;
	background: url(images/navi_05.png);
	}

.navi06 {	
	display: block;
	padding-top: 0px;
	padding-left: 0px;
	width: 82px;
	height: 44px;
	text-decoration: none;
	background: url(images/navi_06.png);
	}

.navi07 {	
	display: block;
	padding-top: 0px;
	padding-left: 0px;
	width: 30px;
	height: 44px;
	text-decoration: none;
	background: url(images/navi_07.png);
	}

HTML NAV CODE:
Code:

 <ul id="nav"> 
			<li><span class="navi01">&nbsp;</span></li> 
			  <li><a href="originalart/gallery.php"><span class="navi02">&nbsp;</span></a> 
<ul> 
	  <li><a href="originalart/gallery.php">Original Art</a></li> 
	  <li><a href="fanart/gallery_fanart.php">Fan Art </a></li> 
	  <li><a href="commissions/gallery_commissions.php">Commissions</a></li> 
	  <li><a href="roughwork/gallery_roughwork.php">Rough Work</a></li> 
	  </ul> 
</li> 
			<li><a href=""><span class="navi03">&nbsp;</span></a> 
<ul> 
	  <li><a href="info.php">Info</a></li> 
	  <li><a href="http://luisarafidi.deviantart.com/journal/11831940/">FAQ </a></li> 
	  </ul> 
 
</li> 
			<li><a href="oldartwork/gallery_oldartwork.php"><span class="navi04">&nbsp;</span></a></li> 
			<li><a href="http://blog.luisarafidi.com/"><span class="navi05">&nbsp;</span></a> 
 <ul>	<li><a href="#">Old Artwork</a></li> 
	  <li><a href="#">More</a></li> 
</ul> 
</li> 
			<li><a href=""><span class="navi06">&nbsp;</span></a></li> 
			<li><span class="navi07">&nbsp;</span></li> 
</ul>	

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;
}

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?

Okay, I know this has been discussed a lot here and I did a lot of searching including reading through ie problem with drop down menu, but I'm still having a heckuva time getting mine to work.

Here it is:

http://www.jimandkris.com/test/verticalpopout.html

When viewing in IE, on any parent menu item with children, it expands downward a few pixels when hovered over.

I'm shooting for something like this:

http://sperling.com/examples/menuv/

The *html hack isn't fixing it like I hoped. What am I missing?

Second, and not as major, in FF my top border (in red) doesn't extend the entire length of the li for either the parent or the children. Thoughts on that?

Thanks again!

Hello,
I am working on a very simple task:

http://www.virtualsheetmusic.com/ztest.htm

I simply want that by passing the mouse pointer over the left cell of the table (i.e. over the "John White" name) a yellow border must appear. If you try, it works great with FireFox, Safari and IE 7.x, but it doesn't with IE 6.x. Any idea?

Thank you very much for any thoughts.

Best,

Fab.

Please look at this page -

http://www.rodstrans.com/menu.html

When you place the mouse over "Services" you will see a nice little (imho) sub menu appear. I have it working well in IE7 & IE8 but there is a small glitch I need some help with. If you carefully place your mouse in the white space between the nav bar and the submenu the submenu disappears. I tried increasing the height of the li but unless I specify a background on the li the increased height does nothing. What I am after is I would like the submenu to be positioned about 5 pixels lower than where it is now, but this issue is preventing me from doing that. In other words, I want the submenu to be seperated from the main nav bar by about 10 pixels, but if I do that then this issue will really be a problem. Thanks. Tom

Please visit this page -

http://www.brooksidetransmission.com

Put your mouse over the "Services" link to reveal a sub menu.

In FF it works fine in that you can access each of the links in the sub menu.

In IE7 though when you move the mouse around the sub menu links the who sub menu disappears.

Some background on this issue is that I am trying to incorporate two 3rd party resources into one, with one being the drop down menu, the other being a box with rounded corners.

Somewhere in my combining the two messed up the :hover for IE7

Any help would be appreciated.

Tom

Hi all,

I've had this issue for a while now and can't for the life of me get a clean fix/understanding of whats wrong. I've had a few other Designers/Developers look at it with no look either!

http://www.hoctordesign.com/csstest/test.html has the code and details. I'm mainly concerned with issue 1.

This is that i can't get control of the hover state text color. It currently inherits a color which is need in other areas of the site. I need to over ride this but can't!

The second issue is that I can't control the space between the tabs.

Can anyone help?

Thanks!
Denis

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.

For some reason, when I hover over images in the #content div of my site firefox is adding a strange little box to the bottom right hand corner of the image. The color of the box is the same color as my text hyperlinks which makes it more interesting. You can see the issue on my site. Here is the code that deals with the images in the #content div:

Code:

#content img {
margin:2px 5px 0px 0px;
}

#content a img, #content a:visited img, #content a:active img {
border:2px solid #6FA6D9;
}

#content a:hover img {
border:2px solid #ffffff;
}

This issue is only happening on the images I insert from my wpg2 gallery. The images get one of the following classes applied to them:

Code:

.g2image_float_left {
display:block;
float:left;
}

.g2image_float_right {
display:block;
float:right;
margin-left:5px;
}

Now I don't see how either of these could cause a problem but they have to be the issue considering this doesn't happen on images that don't have one of the above classes applied to them.

Any ideas what is causing this?

Thanks in advance.

Hitting the IE6 wall. The menu is pure CSS and works fine in all browsers except IE6 (and Im sure below).. It doesn't display the drop down at all in IE6..

Link to site: (for anyone who can help)
rs.vuemarketing.com

Hey all,

k, been banging my head off the desk for a while with this one.

I'm using the same coding/styling for this menu as i am with all my currently working menus, but no dice in IE.

The only difference with this, is that there are two drop-down menus...one on either side of the screen.

here's the page in question.

here's the menu;
Code:

  	<div id="leftmenu"><!-- OPEN LEFT MENU -->
		<ul id="leftnav">
			<li><a href="#" class="imglink"><img src="images/leftmenu_top.gif" alt="Hover for Menu"></a>
				<ul>
					<li><a href="#" class="menus left imglink">home</a></li>
					<li><a href="#" class="menus left imglink">member zone</a></li>
					<li><a href="#" class="menus left imglink">birthday parties</a></li>
					<li><a href="#" class="menus left imglink">group parties</a></li>
					<li><a href="#" class="menus left imglink">contests</a></li>
					<li><a href="#" class="menus left imglink">location/hours</a></li>
					<li><a href="#" class="menus left imglink">prices</a></li>
					<li><a href="#" class="menus left imglink">specials</a></li>
					<li><a href="#" class="menus left imglink">lock-ins</a></li>
					<li><a href="#" class="menus left imglink">photo gallery</a></li>
					<li><a href="#" class="menus left imglink">links</a></li>
					<li><a href="#" class="menus left imglink">contact us</a></li>
				</ul>
			</li>
		</ul>	
	</div><!-- CLOSE LEFT MENU -->
	<div id="rightmenu"><!-- OPEN RIGHT MENU -->
		<ul id="rightnav">
			<li><a href="#" class="imglink"><img src="images/rightmenu_top.gif" alt="Hover for Menu"></a>
				<ul>
					<li><a href="#" class="menus right imglink">go-karts</a></li>
					<li><a href="#" class="menus right imglink">glo golf</a></li>
					<li><a href="#" class="menus right imglink">laser tag</a></li>
					<li><a href="#" class="menus right imglink">arcade</a></li>
					<li><a href="#" class="menus right imglink">batting cages</a></li>
				</ul>
			</li>
		</ul>	
	</div><!-- CLOSE RIGHT MENU -->

the css;
Code:

#leftmenu {
float:left;
position:absolute;
left:0;
top:20px;
background:black;
height:30px;
width:150px;
z-index:200;
}

#rightmenu {
float:right;
position:absolute;
right:0;
top:20px;
background:black;
height:30px;
width:150px;
z-index:200;
}

/* CONSOLIDATED NAVIGATION */

ul#leftnav {
	list-style:none;
	width:150px;
}

ul#rightnav {
	list-style:none;
	width:150px;
}

ul li {
	position: relative;
}

#rightmenu li ul {
	position:absolute;
	right:0;
	top:30px;
	width:135px;
	display: none;
	list-style:none;
}

#leftmenu li ul {
	position:absolute;
	left:0;
	top:30px;
	width:135px;
	display: none;
	list-style:none;
	text-align:right;
}

ul li a {
	display: block;
	text-decoration:none;
	color:white;
}

#rightmenu li:hover ul, li.over ul { 
	display: block;
	border-bottom:1px solid #FD4467;
	border-left:1px solid #FD4467;
}

#leftmenu li:hover ul, li.over ul { 
	display: block;
	border-bottom:1px solid #FD4467;
	border-right:1px solid #FD4467;
}
	
a.menus {
	color:white;
	text-decoration:none;
	padding:3px 0;
}
	
a.menus:hover {
	color:black;
	text-decoration:none;
	background-color:#D9FD02;
	border-top:1px solid #FD4467;
	border-bottom:1px solid #FD4467;
	padding:2px 0;
}	

a.right:hover {
border-right:10px solid #FD4467;
}

a.left:hover {
border-left:10px solid #FD4467;
}

/* Fix IE. Hide from IE Mac \*/
* html #rightmenu ul li { float: right; }
* html #rightmenu ul li a { height: 1%; }
/* End */

/* Fix IE. Hide from IE Mac \*/
* html #leftmenu ul li { float: left; }
* html #leftmenu ul li a { height: 1%; }
/* End */

/* END MENUS */

and, just for good measure, the javascript, which is currently only setup for one side of the menu, just to get it rolling.

Code:

<script type="text/javascript">
<!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("leftnav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
//-->
</script>

any help'd be greatly appreciated.