CSS - Simple Menu Button Not Working

Hi, I have a simple rollover navigation, which is as follows:: Code:

<ul id="nav">   <li><a href="about.html" class="about"></a></li>   
<li><a href="guestpics.html" class="guestPics"></a></li>  
<li><a href="staff.html" class="staff"></a></li>  
<li><a href="webcams.html" class="webcams"></a></li> 
<li><a href="parties.html" class="parties"></a></li>  
<li><a href="contact.html" class="contact"></a></li> 
</ul> 

Here is the CSS for the about link::
Code:

#nav a.about{ background-image:url(images/nav/about_off.gif); width:77px; height:18px; } 
#nav a.about:hover { background-image:url(images/nav/about_on.gif);}

I don't see what I am doing wrong? Can someone help?

thanks

I am redesigning a web application . I want to introduce color themes in it. When i click on a particular theme i want a new look to appear including buttons. For this i m using the below css code which uses only 3 button images(single image sliced in 3)wherin only the background color is to be changed thru css and new button gets created.


Code:

body {
margin: 0;
padding: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
.btn {
float: left;
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
margin: 5px 0;
}
.btn a{
float: left;
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 0 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
float: left;
width: 10px;
height: 40px;
}
.btn_addtocart { background-color: green; }


HTML code:

<div class="btn btn_addtocart"><a href="#>Submit</a><span></span></div>
<div class="clear"></div>
Background Color: Red

For eg in a login screen
The earlier web application used:

<input type="image" onclick="javascript:return validate()>
wherin the validate function includes

Code:

function validate()
{
var user = document.login.loginid.value;
var pwd = document.login.loginid.value;

if(document.login.loginid.value.length==0)
{
alert("Enter user name");
return false;
}
if(document.login.password.value.length==0)
{
alert("Enter password");
document.login.password.focus();
return false;
}
return true;
}

I am not able to use javascript:return validate() with this new html code
i.e.
<div class="btn btn_addtocart">
<a href="#>Submit</a><span></span></div>
<div class="clear"></div>
Background Color: Red


Please help me with a similar css to run the above javascript or an alternative javascript to run the above css code.

Hey any idea why submit button at this page is not working???

http://www.ajilanyureq.com

Hi there,

I am trying to style a button with inline css, however, it is not working. I think it is the background images and the single quotes.

This is my code:

PHP Code:
 $options .= '<input style=\"margin-top: 5px;background-image: url(\'button_bg.jpg\'); background-repeat:repeat scroll 0%;background-color: #71d63e;border:0px #234B69 solid;color:#ffffff;font-family: arial, Verdana;font-size:11px; font-weight: bold;height:26px;padding:5px;width: 40px;vertical-align: middle\"  type="submit" name="upgrade" value="Upgrade"></form>'; 





Any ideas what I have wrong?

Hi ! Me again :P

So this is a simple test i made to try this out. But I ran into a problem. Take a look for yourself:

(view-source for xhtml and css)

http://fotoz.hit.bg/test/menu.html

The problem is that annoying flickering that happens when you roll over. Any ideas how to fix it ?

And most importantly why does it occur?

Thanks!

p.s

I should explain what i wanted to do here. Basicly 1 big background image to the <div>. It will be holding the "over" state of all the buttons. At the same time the <a> elements will be holding images of the "normal" state buttons, and when you hover over them they will disappear and you will see the "hover" state below.

It works but I get the flickering with visibility:hidden and even if i just move the img out of the way

On my sitehttp://northshorewebdesign.net/testsite/ I have a horizontal menu with text and one image link. The menu is under the slideshow. There are 4 text links and an image link. I am trying to line up the text and image horizontally. Can anyone see what I am doing wrong? Here's the code:
Code:

.homepage-sub-menu {float: left; width: 960px; height: 70px;overflow: hidden; position: relative; margin: 10px 0px;}

.homepage-sub-menu ul{list-style-type: none; margin: 0; padding: 0; overflow:hidden;}

.homepage-sub-menu ul li {float: left; vertical-align:middle; width: 180px;}

.homepage-sub-menu ul li a:link,a:visited {display: block; width: 180px; font-family: Calibri,Arial, Helvetica, sans-serif; padding: 10px 4px; font-size: 20px;color: #ffffff; text-decoration:none; vertical-align:middle;display:table-cell;line-height: 70px;}

.homepage-sub-menu ul li a:hover,a:active{text-decoration: underline; vertical-align:middle;}

Thank you

When I add a gradient image to my submit button it works fine in IE but won't depress in Firefox or Netscape. The form action works OK, but it's just the button doesn't do anything on screen with the mouse click...What am I doing wrong?

input.btn{
border-style: outset;
border-width: thin;
border-color:#CCFFFF;
color:black;
font-size: 60%;
font-weight:bold;
background: url(images/gradient.jpg) repeat-x;
}

hi there, I have a website design which is all fine and I'm happy with although when I view the website in ie6 the menu becomes unusable. Any advice on how to hack at the markup etc will be greatly appreciated :-D

The domain name is psweb.co.uk

also any feedback on the website is welcome :-)

Thanks,

Paul

http://cyclingforpositivity.com/blog/

check this in IE 8 check the tab 'Expedition' it has a drop down. It is working fine firefox, chrome and IE6 but not in IE 8.

dawuster.com/test/index2.htm

I can't figure out why my "Manufacturers" css drop menu on the left side doesn't work. It works it its own .htm document when i was developing it but once I stick it in to a pre-existing page, it won't function. Thanks in advance!

I have a pure css menu that I like but it does not work with IE. works exactly as I want in firefox.
in IE when I hover over the menu bar the list do not become visible
any one know what I need to do to make it work?
Thanks
BadIdea

The page code is
Code:

<html>
<head>
	<meta name="author" content="Jeffrey Bourque">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="cache-control" content="no-cache">
	<link rel="stylesheet" type="text/css" href="menuCss.css" />
	<title>Operations Control</title>
</head>

<body>

<div class="mainheader">
	<table>
		<tr><td><img src="img/sitelogo.png" width="135" height="59"/></td><td><h1>Operations Control</h1></td></tr>
		<tr><td colspan="2"><?php echo "Welcome! $useid "; ?> -- <a href="../logout.php" class="nh"> Log Out</a></td></tr>
	</table>
</div>

	<div id="navMenu">

	<ul>
		<li><a href="#">Home</a>
			<ul>
				<li><a href="#">My Evaluations</a></li>
				<li><a href="#">My Approvals</a></li>
				<li><a href="#">My Actions</a></li>
				<li><a href="#">Phone List</a></li>
				<li><a href="#">Training</a></li>
				<li><a href="#">Change Password</a></li>
			</ul> <!-- end inner ul -->
		</li> <!-- end main li -->
	</ul> <!-- end main ul -->

	<ul>
		<li><a href="#">Manufacturing</a>
			<ul>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
			</ul> <!-- end inner ul -->
		</li> <!-- end main li -->
	</ul> <!-- end main ul -->

	<ul>
		<li><a href="#">Quality</a>
			<ul>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
			</ul> <!-- end inner ul -->
		</li> <!-- end main li -->
	</ul> <!-- end main ul -->

	<ul>
		<li><a href="#">Engineering</a>
			<ul>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
			</ul> <!-- end inner ul -->
		</li> <!-- end main li -->
	</ul> <!-- end main ul -->

	<ul>
		<li><a href="#">Planning</a>
			<ul>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">My Actions</a></li>
				<li><a href="#">Phone List</a></li>
				<li><a href="#">Change Password</a></li>
			</ul> <!-- end inner ul -->
		</li> <!-- end main li -->
	</ul> <!-- end main ul -->

	<ul>
		<li><a href="#">Accounting</a>
			<ul>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
			</ul> <!-- end inner ul -->
		</li> <!-- end main li -->
	</ul> <!-- end main ul -->

	<ul>
		<li><a href="#">Materials</a>
			<ul>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
			</ul> <!-- end inner ul -->
		</li> <!-- end main li -->
	</ul> <!-- end main ul -->

	<ul>
		<li><a href="#">Engineering</a>
			<ul>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
				<li><a href="#">Search Data</a></li>
			</ul> <!-- end inner ul -->
		</li> <!-- end main li -->
	</ul> <!-- end main ul -->

	<br class="clearFloat" />
	</div> <!-- end navMenu -->


</body>
</html>

The Css is
Code:

body
	{
		margin:0;
		padding:0;
		background:#D0E2DD;
	}

.mainheader
	{
		background:#F2F2F2;
		margin:0;
		padding-left:30px;
		padding-top:20px;
		padding-bottom:5px;
		padding-right:10px;
	}

.mainheader h1
	{
		color:#000000;
		font-size:36px;

	}

.navBar
	{
		background:#7777BB;
		color:#2554C7;
		line-height:30px;
	}

.endBar
	{
		clear:both;
		background:#FFFFFF;
		padding:0px 10px;
		border-bottom:1px solid #808080;
	}

.floatR
	{
		float:right;
	}

#navMenu
	{
		margin:0;
		padding:0;
		
	}

#navMenu ul
	{
		margin:0;
		padding:0;
		line-height:30px;
	}

#navMenu li
	{
		margin:0;
		padding:0;
		list-style:none;
		float:left;
		position:relative;
		background:#7777BB;
	}

#navMenu ul li a
	{
		text-align:center;
		font-family:"Comic Sans MS", cursive;
		text-decoration:none;
		height:30px;
		width:150px;
		display:block;
		color:#ffffff;
		border:1px solid #ffffff;
		text-shadow:1px 1px 1px #000000;
	}

#navMenu ul ul
	{
		position:absolute;
		visibility:hidden;
		top:32px;
	}

#navMenu ul li:hover ul
	{
		visibility:visible;
	}


#navMenu li:hover
	{
		background:#aaaaaa;
	}

#navMenu ul li:hover ul li a:hover
	{
		background:#F2F2F2;
		color:#000;
	}

#navMenu a:hover
	{
		color:#0088ff;
	}

.clearFloat
	{
		clear:both;
		margin:0;
		padding:0;
	}

Hi All,

I have a site

PHP Code:
 hopevalleycamp.com 





which features a three box floating menu over a single background image.

The menu "works" in Firefox and Safari, but not in IE8. I'm not sure if there is a"fix" I can apply for IE or not.

The code for the menu css can be viewed here...
PHP Code:
* {
    font-family: Arial,Helvetica,sans-serif;
}
.yuimenubar {
    position: static;
    visibility: visible;
}
.yuimenu .yuimenu, .yuimenubar .yuimenu {
    left: -10000px;
    position: absolute;
    top: -10000px;
    visibility: hidden;
}
.yui-menu-shadow {
    position: absolute;
    visibility: hidden;
    z-index: -1;
}
.yuimenubar ul, .yuimenu ul {
    list-style-type: none;
}
.yuimenubar ul, .yuimenu ul, .yuimenubar li, .yuimenu li, .yuimenu h6, .yuimenubar h6 {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}
#productsandservices {
    overflow-x: hidden;
    overflow-y: hidden;
    padding-left: 0;
    position: relative;
    z-index: 1;
}
.yuimenuitemlabel, .yuimenubaritemlabel {
    white-space: nowrap;
}
.hide-scrollbars * {
    overflow-x: hidden;
    overflow-y: hidden;
}
.hide-scrollbars select {
    display: none;
}
.yuimenu.show-scrollbars {
    overflow-x: visible;
    overflow-y: visible;
}
.yui-skin-sam .yuimenubar > .bd > ul:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}
.yui-skin-sam .yuimenubaritem {
    float: left;
}
.yui-skin-sam .yuimenubarnav .yuimenubaritem {
    line-height: 1.42em;
    margin-right: 11px;
}
.yui-skin-sam .yuimenubaritemlabel {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    color: #FFFFFF;
    display: block;
    line-height: 1.42em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}
.yui-skin-sam .yuimenubaritemlabel-selected, .yui-skin-sam .yuimenubaritem a.active, .yui-skin-sam .yuimenubaritem-hassubmenu-selected {
    color: #FFFFFF;
}
.yui-skin-sam .yuimenubarnav .yuimenubaritemlabel {
    font-size: 34px !important;
    font-weight: bold;
    line-height: 1.42em;
}
.yui-skin-sam .yuimenu .bd {
    left: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    top: 0;
    width: 151px;
}
.yui-skin-sam .yuimenu ul {
    padding-bottom: 10px;
    padding-left: 19px;
    padding-right: 19px;
    padding-top: 10px;
}
.yui-skin-sam li.first-of-type a.active, .yui-skin-sam li.first-of-type a.yuimenubaritemlabel-selected {
}
.yui-skin-sam .yuimenuitemlabel {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    line-height: 25px;
    padding-left: 12px;
    text-decoration: none;
    text-transform: uppercase;
}
.yui-skin-sam .yuimenuitemlabel-selected, .yui-skin-sam .bd .yuimenuitem a.active {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/drop-hover.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    color: #AF4B3E;
    display: block;
    overflow-x: hidden;
    overflow-y: hidden;
}
#yui-gen0 {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/bg-li.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    width: 210px;
}
#yui-gen0 a.yuimenubaritemlabel {
    height: 115px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 95px;
}
#yui-gen0 .bd {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/bg-li-drop.png");
    background-origin: padding-box;
    background-position: 0 bottom;
    background-repeat: no-repeat;
    background-size: auto auto;
    margin-top: -12px;
    width: 210px;
}
#yui-gen0 .yuimenuitemlabel-selected, #yui-gen0 .bd .yuimenuitem a.active {
    color: #95D4B5;
}
#yui-gen1 {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/bg-li2.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    width: 210px;
}
#yui-gen1 a.yuimenubaritemlabel {
    height: 115px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 95px;
}
#yui-gen1 .bd {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/bg-li2-drop.png");
    background-origin: padding-box;
    background-position: 0 bottom;
    background-repeat: no-repeat;
    background-size: auto auto;
    margin-top: -12px;
    width: 210px;
}
#yui-gen1 .yuimenuitemlabel-selected, #yui-gen1 .bd .yuimenuitem a.active {
    color: #F7C609;
}
#yui-gen2 {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/bg-li3.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    margin-right: 0;
    width: 210px;
}
#yui-gen2 a.yuimenubaritemlabel {
    height: 115px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 95px;
}
#yui-gen2 .bd {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("images/bg-li3-drop.png");
    background-origin: padding-box;
    background-position: 0 bottom;
    background-repeat: no-repeat;
    background-size: auto auto;
    margin-top: -12px;
    width: 210px;
}
#yui-gen2 .yuimenuitemlabel-selected, #yui-gen2 .bd .yuimenuitem a.active {
    color: #C01349;
}
.first-of-type a, .first-of-type li a.active, a.yuimenubaritemlabel {
    color: #FFFFFF;
    font-size: 34px;
    text-transform: uppercase;
} 





All help appreciated in advance!

Greetings, I sure would appreciate some help integrating a css dropdown menu into a site. If you visit www.mts-diesel.com in FF, the drop down works find, If you open it in IE9 the dropdown does not work, BUT if you open this page www.mts-diesel.com/menu.html in IE9 the dropdown works. This leads me to think that it might be some type of z-index issue perhaps but I cant put my finger on it. Thanks for any help. Tom

Hi, I'm totally new to css so all help appreciated

First, here's my site: www. hornet .edu .hk /dev

As you can probably see, I'm trying to edit a template for joomla. The drop down menu for 'Test 1' is split up, so once I hover beyond 'Sub Test 1' the menu disappears. I want my submenu items to stick together so that it'll work, but I don't know where to start. can anyone help? thanks!

templace.css:
/*****************************/
/*** Core html setup stuff ***/
/*****************************/

html {
height: 100%;
margin-bottom: 1px;
}

form {
display:inline;
}

body {
margin: 0px 0px 0px 0px;
width: 100%;
display: table;
background:url(../images/bg_page.png) #DDDDDD top repeat-y;
}

body, td{
font-family: "Trebuchet MS";
font-size: 13px;
color: #000;
line-height: 1.3em;
}

a:link, a:visited {
text-decoration: none;
font-weight: normal;
}

a:hover {
text-decoration: underline;
font-weight: normal;
}

input.button { cursor: pointer; }
input.inputbox{
background:#FFF;
font-size: 11px;
color: #000;
border: 1px solid #DBDBDB;
height: 17px;
padding:2px;
-webkit-border-radius: 4px; -moz-border-radius: 4px;
}

p { margin-top: 0; margin-bottom: 5px; }

img { border: 0 none; margin:0px; }

/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/
#page_bg {
padding: 0px;
margin: 0px;
}

div#top_menu{
height:54px;
margin:0px auto;
width: 980px;
}

#topnav{ height: 54px; width:980px; margin: 0px; padding:0px; margin-top:8px; font-weight: bold; text-transform:uppercase; }
#topnav ul { margin: 0px; padding: 0px 20px; width: auto; float: left; list-style-type:none; }
#topnav ul li{ margin: 0px; padding: 0px; height: 42px; float: left; position: relative; margin-top:7px; margin-left:7px; }
#topnav ul li a{ color: #000; font-weight: bold; text-decoration: none; padding: 0px 12px 0px 12px; height:42px; line-height:35px; display: block; float: left; -webkit-border-radius-topright: 8px; -webkit-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-topleft: 8px; }
#topnav ul li a:hover{ background-color: #444444; text-decoration: none; font-weight: bold; color: #fff; }
#topnav ul li ul ul { margin: -50px 0 0 297px; z-index: 100; }
#topnav ul li li { width:auto; height: 30px; margin-left:0px; -webkit-border-radius: 8px; -moz-border-radius: 8px;}
#topnav ul li li a { color: #FFFFFF; text-transform: none; display: block; background: none; width: 277px; border-left: 0px; padding: 0px 10px 0px 10px; height:30px; line-height:30px; -webkit-border-radius: 8px; -moz-border-radius: 8px; }
#topnav ul li li a:hover{ background: none; background-color: #FFFFFF; left: 0; width: 277px; padding: 0px 10px 0px 10px; height:30px; }
#topnav ul li ul { left: -999em; top: 26px; left: 0; display: block; height: 36px; width: 277px; position: absolute; z-index: 99; left: -999em; clear: left; margin-top: 0px; margin-left: 0px; padding-left:0px; }
#topnav ul li:hover ul ul, #topnav ul li:hover ul ul ul { left: -999em; }
#topnav ul li:hover ul, #topnav ul li li:hover ul, #topnav ul li li li:hover ul { left: auto; }

#topnav ul.menu li{
background-image:none;
}

div#main_bg{
margin:0px auto;
width: 980px;
text-align:left;
}

div#h_area{
margin:0px auto;
width: 980px;
height:559px;
text-align:left;
padding-top:10px;
}
div#h_area img{
margin-left:14px;
}
.logo{
display: block;
float:left;
padding-top:5px;
margin-bottom:10px;
margin-left:10px;
width:520px;
}
a.logo,a.logo:link,a.logo:hover, a.logo:visited{
font-size:37px;
line-height: 58px;
color:#000;
text-decoration:none;
font-weight:normal;
font-family: "Trebuchet MS";
}

div#position0{
float:right;
text-align:left;
margin-right: 20px;
margin-top: 10px;
}

div#position0 div.search{
width: 222px;
height:46px;
text-align:left;
background: url(../images/search_bg.gif) top left no-repeat;
}
div#position0 div.search .inputbox {
background:#FFF;
width: 156px;
height: 17px;
font-size: 11px;
color: #000;
margin:10px 0px 0px 50px;
border: 1px solid #DBDBDB;
padding:5px 2px 2px 4px;
-webkit-border-radius: 4px; -moz-border-radius: 4px;
}
div#position0 label{
display:none; /* joomla 1.6 update */
}



#leftcolumn{
margin-left:9px;
padding:0px;
width:205px;
float:left;
}
#rightcolumn{
margin-right:9px;
padding:0px;
width:205px;
float:right;
}

#maincolumn{
width:520px;
float:left;
margin:0px 10px 0px 10px;
padding:0px;
overflow:hidden;
}
#maincolumn_middle{
width: 730px;
float:left;
margin:0px 10px 0px 10px;
padding:0px;
overflow:hidden;
}
#maincolumn_big{
width: 957px;
float:left;
margin:0px 10px 0px 10px;
padding:0px;
overflow:hidden;
}

div.path{
margin:10px 0 0 0px;
padding: 5px;
padding-left:30px;
background:url(../images/breadcrumbs_bg.png) top left no-repeat;
}

div.nopad {
float:left;
padding:0 0px 15px 0px;
}

div.nopad ul {
clear: both;
}

/*joomla 1.6 update start */
.item-separator {
height:10px;
line-height:10px;
}
.items-more {
border:1px solid #0F0;
}

table.category{
border:1px solid #CCC;
width:100%;
text-align:center;
}
table.category th,table.category td{
padding:2px 6px;
}
table.category thead{
background:#EEE;
}
.jcat-children ul,.jcat-children li{
margin:0;
list-style:none;
}
.jcat-children li a{
background:url(../images/bullet_green_arrow.png) no-repeat 0 12px;
display:block;
padding:5px 5px 5px 15px;
font-size:0.9em;
}
.image-left
{
float:left;
margin:0 15px 5px 0;
}
/*joomla 1.6 update end */

#leftcolumn div.moduletable_menu, #leftcolumn div.moduletable_menu, #leftcolumn div.moduletable, /* joomla 1.6 update */
#leftcolumn div.module_menu, #leftcolumn div.module{
margin: 10px 0px 0px 0px;
padding:0px;
width: 205px;
}
.article_column {
padding-right:10px;
}
#rightcolumn div.moduletable_menu, #rightcolumn div.moduletable, #rightcolumn div.moduletable_text{
margin: 10px 0px 0px 0px;
padding: 0px 0px 3px 0px;
width: 205px;
}
div.bannergroup_text {
margin:0px 13px 15px 13px;
}
.bannerheader {
font-weight:bold;
margin-bottom:10px;
}
.banneritem_text {
margin-bottom:10px;
}
.bannerfooter_text {
margin-bottom:10px;
}
#leftcolumn div.module_menu, #rightcolumn div.module_menu, /* joomla 1.6 update */
#leftcolumn div.moduletable, #rightcolumn div.moduletable, /* joomla 1.6 update */
#leftcolumn div.moduletable_menu, #rightcolumn div.moduletable_menu, /* joomla 1.6 update */
#leftcolumn div.module_menu div div div, #leftcolumn div.module div div div,
#rightcolumn div.moduletable_menu, #rightcolumn div.moduletable, #rightcolumn div.moduletable_text{
background: url(../images/rub_bottom.png) center bottom no-repeat;
}
#leftcolumn div.module_menu div div div, #leftcolumn div.module div div{
margin: 0px;
padding: 0px;
padding-bottom:5px;
width: 205px;
height:auto;
}

#leftcolumn div.module_menu div div div div, #leftcolumn div.module div div div div{
background: none;
padding:4px 8px;
}
#leftcolumn h3,
#rightcolumn h3{
text-align: left;
padding-left:15px;
height: 42px;
width: 190px;
line-height: 40px;
color:#FFFFFF;
font-size:19px;
margin:0px;
font-weight:normal;
text-shadow: #1F1616 1px 1px 1px;
}
table.poll thead td {
text-align: left;
padding-left:10px;
}
table.poll td {
text-align: left;
}
#leftcolumn ul.menu li ul{
list-style: none;
}
.pollstableborder {
margin: 5px 0px 10px 0px;
}
.poll td div{
display:inline;
}


/* forms

#leftcolumn .moduletable ul,
#rightcolumn .moduletable ul {
margin: 6px 0;
list-style: none;
}

#leftcolumn .moduletable ul li,
#rightcolumn .moduletable ul li {
margin: 0;
padding: 0 2px;
}
.moduletable ul {
padding:5px 10px 5px 12px;
margin:0px;
}

.moduletable ul li {
padding:0px 10px 5px 15px;
margin:0px;
line-height:18px;
}*/
#leftcolumn ul.menu li#current ul li,
#rightcolumn ul.menu li#current ul li {
margin: 0px;
padding: 0px;
}
ul.menu {
padding:5px 10px 5px 12px;
margin:0px;
}
ul.menu li{
padding:0px 10px 5px 15px;
margin:0px;
}

ul.menu li ul {
padding:0px 0px 5px 0px;
margin:0px;
}
ul.menu li ul li{
padding:0px 0px 0px 15px;
border:none;
}
ul.menu li#current ul li a{
margin-left:15px;
text-decoration:none;
}
ul.mostread {
padding:5px 10px 5px 12px;
margin:0px;
}
ul.mostread li{
padding:0px 10px 5px 15px;
margin:0px;
line-height:18px;
}
ul.latestnews, ul.weblinks {
padding:5px 10px 5px 12px;
margin:0px;
}
ul.latestnews li, ul.weblinks li{
padding:0px 10px 5px 15px;
margin:0px;
line-height:18px;
}
div.componentheading{
font-size:16px;
font-size:19px;
margin:7px auto;
}
td.contentheading{
font-weight:normal;
vertical-align:top;
font-size:19px;
height:30px;
color:#363636;
background: url(../images/contentheading_ico.png) left top no-repeat;
}
table.contentpaneopen td.contentheading{
padding-left:34px;
}
table.contentpaneopen{
border-collapse: collapse;
margin-left:5px;
}
td.buttonheading{
padding:0px 2px 0px 2px;
}
table.contentpaneopen td{
padding:0px;
}
.contentpaneopen p{
line-height:22px;
}
span.small, td.createdate, td.modifydate{
font-size:11px;
color:#999999;
}
span.pagination span, span.pagination a{
padding:5px;
}

form#login-form { /* joomla 1.6 update */
padding: 0px;
margin: 0px;
}
fieldset.userdata { /* joomla 1.6 update */
border: none;
margin: 0px;
padding:10px 10px 10px 20px;
}

form#login-form ul { /* joomla 1.6 update */
margin:0px 0px 20px 0px;
width:120px;
}
form#login-form ul li{ /* joomla 1.6 update */
padding: 0px;
margin: 0px;
list-style: disc;
background-image:none;
}

form#login-form ul li a { /* joomla 1.6 update */
text-align: left;
font-size: 10px;
color: #858585;
}
#login-form #modlgn-username, #login-form #modlgn-passwd{
width:150px;
}
div#bottom {
width:100%;
margin:0px auto;
background:#000000;
float:left;
}

div#f_area{
background:#757575;
margin:0px auto;
width: 960px;
text-align:left;
margin-bottom:3px;
}

#f_area div.newsflash {
color:#FFF;
padding:5px 10px;
}
#f_area div.moduletable, #f_area div.moduletable_menu{
float: left;
margin:10px 5px 10px 5px;
width: 309px;
}
#f_area h3{
text-align: left;
vertical-align:bottom;
height: 35px;
width: 294px;
color:#FFFFFF;
font-size:21px;
font-family:"Trebuchet MS", Tahoma, Verdana;
font-weight:normal;
margin:0px;
padding-left: 10px;
padding-top:15px;
}

/* joomla 1.6 update start */
/* pagenav */
#main ul.pagenav {
list-style-type:none;
padding:0;
overflow:hidden
}
ul.pagenav li
{
display:inline-block;
padding:0px;
margin:0;
}
#main ul.pagenav li
{
line-height:2em
}
ul.pagenav li a
{
border: 1px solid #ccc;
display:inline;
background:#eee;
padding:2px;
text-decoration:none
}
ul.pagenav li.pagenav-prev {
float:left
}
ul.pagenav li.pagenav-next {
float:right
}

.article-info
{
margin:10px 0 10px 0px;
font-size:0.9em;
}

.article-info-term
{
display:none
}

/* ++++++++++++++ icons ++++++++++++++ */

ul.actions
{
text-align:right;
padding:0 ;
width:100%;
margin:0
}

ul.actions li
{
display:inline
}

ul.actions a
{
text-decoration:none
}

/* ++++++++++++++ items more ++++++++++++++ */

.items-more
{
padding-top:10px;
}

.items-more h3
{
font-weight:normal;
margin:0;
padding:5px 5px 5px 5px;
font-size:1.4em
}

.items-more ol
{
line-height:1.3em;
list-style-type:none;
margin:0;
padding:10px 0 10px 2px;
}

.items-more ol li
{
padding:2px;
}

.items-more ol li a
{
display:inline;
margin:0;
font-weight:normal;
padding:5px 5px 5px 20px;
}

.items-more ol li a:hover,
.items-more ol li a:active,
.items-more ol li a:focus
{
font-weight:normal;
padding:5px 5px 5px 20px;
text-decoration:none
}


/* ++++++++++++++ pagination ++++++++++++++ */

#main .pagination
{
margin:10px 0 ;
padding:10px 0 10px 0px;

}

#main .pagination ul
{
list-style-type:none;
margin:0;
padding:0;
text-align:left;
}

#main .pagination li
{
display:inline;
padding:2px 5px;
text-align:left;
border:solid 0px #eee;
margin:0 2px
}

.pagenav
{padding:2px}

#main .pagination li.pagination-start,
#main .pagination li.pagination-next,
#main .pagination li.pagination-end,
#main .pagination li.pagination-prev
{border:0}

#main .pagination li.pagination-start ,
#main .pagination li.pagination-start span
{
padding:0

}
p.counter
{
font-weight:bold;
}

/* ++++++++++++++ blog ++++++++++++++ */

.cols-1
{
display: block;
float: none !important;
margin: 0 !important;
}

.cols-2 .column-1
{
width:46%;
float:left;
}

.cols-2 .column-2
{
width:46%;
float:right;
margin:0
}

.cols-3 .column-1
{
float:left;
width:46%;
padding:0px 5px;
margin-right:4%

}
.cols-3 .column-2
{
float:right;
width:46%;
margin-left:0;
padding:0px 5px
}
.cols-3 .column-3
{
float:left;
width:100%;
padding:0px 5px
}

.items-row
{
overflow:hidden;
margin-bottom:10px !important;
}

.column-1,
.column-2,
.column-3
{
padding:10px 5px
}

.column-2
{
width:55%;
margin-left:40%;
}

.column-3
{
width:30%
}

.blog-more
{
padding:10px 5px
}

/* ++++++++++++++ readmore ++++++++++++++ */
.readmore a:link,.readmore a:visited,a.readmo link,a.readmo visited
{
color: #ccc;
background: #222;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: none;
padding:4px 8px;
margin-top:10px;
}

.readmore a:hover,.readmore a:active,.readmore a:focus,a.readmore a:hover,a.readmore a:active,a.readmore a:focus
{
background: #333;
color: #fff;
}

a.readmo hover,a.readmo active,a.readmo focus {
background: #333;
color: #fff;
}


/* joomla 1.6 update end */

/* System Standard Messages */
#system-message { margin-bottom: 20px; }

#system-message dd.message ul { background: #C3D2E5 url(../../system/images/notice-info.png) 4px center no-repeat;}

/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;}

/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E;}

#syndicate{
float:left;
padding-left: 25px;
}




/* --- slider --- */
#slider{
width: 960px;
height:415px;
margin-top:5px;
margin-left:10px;
background:url(../images/loading.gif) no-repeat 50% 50%;
}

#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}

.nivo-controlNav {
position:absolute;
left:860px;
bottom:10px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(../images/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}

.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(../images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}

.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}

/* --- end slider --- */

Hello, and thanks so much in advance for any assistance you could offer.

Let me start by stating that I have limited computer knowledge. I'm having problems with a drop-down menu, but if you really don't think the drop-down menu is good (I got it from somewhere else and then tweaked it through guess-and-check work), then I'll listen if you can recommend me a better one. But I'm afraid to spend the high amount of hours it would take me to switch to a different type of drop-down menu, only for someone else to tell me the new one isn't good, so please don't suggest an alternative unless you're positive it's much better.

The problem with my drop-down menu is that it doesn't work well in IE9. Note that it's designed to work when you hover over an image, as opposed to over text, and I'd like to keep it this way. The problem is that only the first item on the first drop-down level appears in IE9. Or, if you're in compatibility view, everything works except the margin or padding seems to throw off the background-color highlight when you hover over with your cursor, instead of highlighting the whole item it just gives a bar of highlight at the top of the item. I'm not overly concerned about the highlighting issue, but I realize many people won't have compatibility mode on in their browsers, so it won't work for them at all.

Here is the CSS code for the drop-down menu, followed by an example of it in use:

Code:

ul#css3menu,ul#css3menu ul{
	list-style:none;border-width:0px;}
ul#css3menu ul{
	display:none;position:absolute;98%;right:1px;-moz-box-shadow:0.7px 1px 1px #777777;-webkit-box-shadow:0.7px 1px 1px #777777;box-shadow:0.7px 1px 1px #777777;background-color:#FDFCDC;padding:0px 0px 0px 0px;border:1px solid #0D0D0D;}
ul#css3menu li:hover>*{
	display:block;}
ul#css3menu li:hover{
	position:relative;background-color:transparent;}
ul#css3menu ul ul{
	position:absolute;top:-2px;right:100%;}
ul#css3menu{
	display:block;font-size:0;float:left;}
ul#css3menu li{
	display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
	margin:0;}
ul#css3menu ul>li{
	margin:0;}
ul#css3menu a:active, ul#css3menu a:focus{
	outline-style:none;}
ul#css3menu a{
	display:block;text-align:right;font:bold 15px "arial narrow";color:#FF0000;background-color:#0D0D0D;border-width:0px;border-style:none;}
ul#css3menu ul li{
	float:none;margin:0;}
ul#css3menu ul a{
	text-align:right;padding:3px 0px 3px 0px;background-color:#0D0D0D;border-width:0px;border-style:none;font:bold 15px "arial narrow";color:#FF0000;padding-right:6px;padding-left:6px;}
ul#css3menu li:hover>a{
	background-color:#FFFF99;border-style:none;font:bold 15px "arial narrow";color:#FF0000;}
ul#css3menu span{
	display:block;overflow:visible;}
ul#css3menu ul li:hover>a{
	background-color:#FFFF99;border-style:none;font:bold 15px "arial narrow";color:#FF0000;}
ul#css3menu._>li>a{
	padding:0;}

So here is an example of the drop-down menu. This is only part of it, as the whole thing is very long. I think you can understand how it works like a tree, but let me know if you want more details.

Code:

<div style="position:absolute; top:53px; right:130px; z-index:6;">
<span class="menu"><ul id="css3menu">
	<li class="toplast"><span><a class="noyellow" href="http://www.themetaldiscourser.com/aggregator/index.php"><img src="http://www.themetaldiscourser.com/images/menulink-aggregator-2.png" style="filter:alpha(opacity=90); opacity:0.90; width:123px; height:18px;"></a></span>
	<ul>
		<li><a href="#"><span><a href="http://www.themetaldiscourser.com/aggregator/business-career-and-technology-index.php">Business, career & technology</a></span></a>
		<ul>
                        <li><a href="#"><span><a href="/aggregator/accolades.php">Accolades</a></span></a></li>
			<li><a href="#"><span><a href="/aggregator/charity.php">Charity</a></span></a></li>
			<li><a href="#"><span><a href="/aggregator/instructional.php">Instructional</a></span></a></li>
			<li><a href="#"><span><a href="/aggregator/legal-controversy.php">Legal controversy</a></span></a></li>
			<li><a href="#"><span><a href="/aggregator/miscellaneous-business-and-career.php">Miscellaneous business and career</a></span></a></li>
			<li><a href="#"><span><a href="/aggregator/live-performance.php">Live performance</a></span></a>
                                <ul>
                                <li><a href="#"><span><a href="/aggregator/incidents.php">Incidents</a></span></a></li>
                                </ul>
                        </li>
			<li><a href="#"><span><a href="/aggregator/marketing.php">Marketing</a></span></a></li>
			<li><a href="#"><span><a href="/aggregator/popularity.php">Popularity</a></span></a></li>
			<li><a href="#"><span><a href="/aggregator/technology.php">Technology</a></span></a>
			        <ul>
                                <li><a href="#"><span><a href="/aggregator/instrumentation.php">Instrumentation</a></span></a></li>
			        <li><a href="#"><span><a href="/aggregator/internet.php">Internet</a></span></a></li>
			        <li><a href="#"><span><a href="/aggregator/production.php">Production</a></span></a></li>
			        <li><a href="#"><span><a href="/aggregator/radio.php">Radio</a></span></a>
                                        <ul>
                                        <li><a href="#"><span><a href="/aggregator/internet-radio-stations.php">Internet radio stations</a></span></a></li>
                                        </ul>
			        <li><a href="#"><span><a href="/aggregator/video.php">Video</a></span></a></li>
			        <li><a href="#"><span><a href="/aggregator/video-games.php">Video games</a></span></a></li>
                                </ul>
                        </li>
			<li><a href="#"><span><a href="/aggregator/stores.php">Stores</a></span></a>
                                <ul>
			        <li><a href="#"><span><a href="/aggregator/store-reviews.php">Store reviews</a></span></a></li>
                                </ul>
                        </li>
		</ul>
		</li>

		<li><a href="#"><span><a href="http://www.themetaldiscourser.com/aggregator/genre-qualification-and-discourse-index.php">Genre qualification & discourse</a></span></a>
		<ul>
			<li><a href="#"><span><a href="/aggregator/academia.php">Academia</a></span></a>

I then bring in this drop-down menu on every page with:

Code:

<?php include("header.html"); ?>

I'm really so grateful for any suggestions. I recall the drop-down menu had problems in earlier versions of IE, which I managed to fix thanks to the help of others, so I though the problems were settled. I definitely don't have enough knowledge to fix this on my own, but if you truly believe I should switch to a new type of drop-down menu then I'm very willing to take your advice about that and put in the work. Ideally I already have a good drop-down menu that just needs to be tweaked, but hey, who knows.

PS - I do have this at the top of my page, which in similar situations I see is often cited as being the problem if it's missing:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">