CSS - Drop Down Hover Colour

Hello. On my website 2uk2 there is a domain search in the header. I want to make that litle arrow on the domain extension box purple. Using normal CSS i cant seem to acomplish it, i have tried assigning a "class" to the box, but it has no affect on it, it only sets the background colour. I have the scrollbar colour defined aswell, but again, no affect..

If anyone knew how i could fix that I'd really appreciate it!

Regards
Steven Billings

When you make a normal drop down menu in a form tag you get your text field and then that small grey box with the down arrow in it. Is it possible to change that grey colour to some other colour? Thanks.

I developed a drop down menu for the current site I'm working on. I used several on-line tutorials and the outcome was variable. Everything seems to work great in IE after the hack to fix the :hover elements, but I have never been able to get the drop downs to work in Firefox 3, Chrome, or Safari. Unfortunately I do not have the ability to test in a previous version of Firefox at the moment so I am unsure if it is just a version issue from when the tutorials were written.

The page in progress may be viewed at clcah.org.previewdns.com The specific CSS can be found in clc_common.css under the MENU section. Any insight would be greatly appreciated as I only anticipated trouble with IE.

Hello All,

I have a left navigation bar that seems to be working perfectly in Firefox and Safari. However (I know, you've heard this before!), when I open the page in IE, there is no list appearing whatsoever. When I hover in a place outside of where the ul is supposed to be, I can find where the menu is, but it is not functioning well. Could someone please take a look and provide some insight? I have tried a few different things but they are mostly guesses as this is pushing my understanding of CSS a bit.

The menu is supposed to appear under the "Select a Tool" text...

029c92a.netsolhost.com/brushes.html

Best Regards,
Colin

Hi everyone,

I am having an issue with IE7 (imagine that) with a css drop down nav menu. On IE8 and Chrome the menus work flawlessly but in on IE7 the menu is behind the pictures on the page. The page is located at www.philadler.com/newlayout2.php.

At first I thought it may be a z-index problem but the nav bar is set to 1000 and 900 depending on the menu and the thumbnails are set to 100.

As of now the site validates on both css and xhtml 1.0 transitional.

I can list any code if needed.

Thanks for any help

Phil

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.

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

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>	

I have a drop down menu located at http://www.fieldspianos.com/new/index.php

If you hover over the menu items they turn black and white when you are right on the text but not if you are in the area surrounding it which is what I also need to occur. You can view the source on the page for the html but I will include the css below.

This is the basic layout of the menu:
Code:

<ul>
<li>About Us</li>
     <ul>
         <li><a href="#">Locations</a></li>

etc..etc..etc..


Here is the css:
Code:

/*Begin Content of drop down menu*/
a {
	outline:none;
}

* html div#dropdownmenu ul {
	float: left;
}

* {
	margin: 0;
	padding: 0;
}

div#dropdownmenu {
	float: left;
	background-color: #C8C6C6;
		font-size:11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

div#dropdownmenu ul li {
	list-style-type: none;
	float: left;
	background-color: #000000;
	position: relative;
}

div#dropdownmenu ul li:hover {
	list-style-type: none;
	background-color: #000000;
}


/*Hides drop downs when not overed over and reveals them when they are hovered over.*/
body div#dropdownmenu ul li ul {
	display: none;
}

body div#dropdownmenu ul li:hover ul {
	display: block;
}



div#dropdownmenu ul li ul {
	margin: 0;
	width: 13em;
	position: absolute;
	left: -1px;
}

div#dropdownmenu ul li ul li {
	width: 100%;
	background-color:#bdb35e;
	color: #660000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 3px;
}

div#dropdownmenu ul li ul li:first-child {
	border-top: 1px solid #000;
}

div#dropdownmenu ul li ul li:hover {
	color: #FFFFFF;
	background-color: #000000;
}

div#dropdownmenu ul li ul li a {
	color: #660000;
	text-decoration:none;
	outline: none;
}

div#dropdownmenu ul li ul li a:hover {
	color: #FFFFFF;
	background-color: #000000;
	text-decoration:none;
	outline: none;
}

div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover {
	display: block;
}

Any help is greatly appreciated, this seems like it would be a simple fix but I can't figure it out. Maybe I am overlooking some small detail. Thanks!

Is it possible to set the colour of the padding in a table cell?

I'm having trouble with my list on a site im working on.

When you hover over the link, I want it to display a background colour the full width of the box, not just the length of the text.

You can see the menu, on the left hand side - HERE.

Here's the CSS of the list.

Code:

div #leftcontent {
	padding-left: 0px;
	padding-top: 0px;
	display: block;
	font-size:90%;
	font-family:Arial, Helvetica, sans-serif;
}

#leftcontent a {
	text-decoration:none;
	padding:0px;
	color:#000066;
}

#leftcontent a:hover {
	text-decoration:none;
	background-color:#66CCFF;
	background-color-width:30px;
}


#leftcontent ul{
	margin: -10px 10px 2px 5px;
	padding: 0;
	list-style: none;
}


#leftcontent li a{
	margin: 0 0 .5em 0;
	padding: 2px 5px 5px 0px;
	line-height: 1.4em;
	font-size:100%;
	color:#FFFFFF;
}

Any help is appreciated.

Cheers.

__________________
ULTRASUK

Hi.

Is there any way to:

a) Change background color of the title box that appears when you hover over an image AND

b) Reduce the delay it takes to appear?

Thanks.

Hi, im trying to create a block of colour of various width. Im trying to do it with <span> like so

<span style="background-color:#336699; width:100px"></span>

Now why wouldnt that work and is there a better way to do what im trying to achieve?

In CSS, is it possible to define certain colours for a certain piece of text?

For example, in the site I'm doing at the moment, the paragraph font-colour is black, but when the text ''CrudeSep'' comes up, I would like The 'sep' piece of the text to be in orange. This would save me having to make an image to do this!

Any help appreciated.