CSS - Drop Down Positioning Ie Or Could Be A Hover Issue?

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?

Hi there, im trying to make a website for a friend and im having a little diffuculty with my drop down menu

the site is here
bbk.ac.uk/~fsando01/watma/index.html

when you hover over the link entitled services in the global nav bar and proceed to hover down to the first submenu link which is abs repair, youll notice the background image i set as hover state for the services link disapears, i want it to stay there like they have got on marks and spencers website...

Please if anyone could help id be very grateful...

ive tried everthing i can think of

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.

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?

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>	

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

Hi everyone,

For years I've been using tables solely to position elements on web pages but it's come to my attention that this is now "frowned" upon in the web community so I figured if I'm going to start doing things the more common way (with DIVs) I might as well start now. I'm not a professional website developer (C programmer here...eek! haha), but I do part time web work for some important clients of mine.

So I have a very simple layout done with DIVs/CSS to start (code at the bottom). The problem is when you render it you'll see a large gap between the bottom of the layout and bottom of the page. My hypothesis is that this is due to where the "DIVs" would normally have been, except I moved them around. It sounds very similar to the problem encountered he

http://forums.devshed.com/css-help-116/how-to-remove-blank-space-at-bottom-554773.html

but I don't see what he did to solve it.

Note that ultimately what I want is only the "header" and "footer" to have a fixed width/height. The leftcol and content should have fixed widths, but height grow with what ever is in them. And it should be centered in the page the way it is now. I tried various "text-wrap" and "height: 100%" and a few different codes but no luck. I really don't want to have to give up on DIV's but I am finding them a tad frustrating .

I've altered the code from here (http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/3/). I tried "floating" them but that didn't seem to help either or is messes up my centering, plus I don't want it expanding to different resolutions.

Thanks in advance if you can give a DIV newbie a heads up.
Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>TWO-COLUM FIXED LAYOUT
WITH FIXED BOXES</title>
  <style type="text/css">
<!--
#header {
background: #0f0;
position: relative;
z-index: 1;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: relative;
z-index: 2;
top: 0px;
left: -325px;
width: 150px;
height: 600px;
}
#content {
background: #ff0;
position: relative;
z-index: 3;
top: -600px;
left: 75px;
width: 650px;
height: 600px;
}
#footer {
background: #0f0;
position: relative;
z-index: 4;
top: -600px;
left: 0px;
width: 800px;
height: 100px;
}
-->
  </style>
</head>
<body style="margin: 0pt;">
<div align="center">
<div id="header">Header
Section</div>
<div id="leftcol">Left
Section
<p align="left">
Test
</p>
</div>
<div id="content">Content
Section</div>
<div id="footer">Footer
Section</div>
</div>
</body>
</html>

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

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

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.

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