CSS - Change List Menu Arrow To My Errow ?

http://testarea.sensationdesigns.com/triexa/

The dropdown menu... at the top...

Okay so three main questions:

1) At 800x600, the last item shows up off the screen. Is there anyway to have it automatically not show off the screen?
2) Is it bottom to have the bounding boxes of each of the subitems be aligned to the right edge of the text rather than the left?
3) Is it possible to have the whole row clickable, rather than just the text?

I'm having troubles with a list menu.

The first problem I have is that the menu options dont fill the whole of the menu but do in Firefox.

The second problem is that the padding is different in IE and Firefox and I would like them to be the same.

If anyone could help that would be great.

http://departments.brooklands.ac.uk/wine/example/

Jemes

I am having problems with a horizontal list menu. If you take a look at the link below I'm trying to get the top picture, menu and the main content area to all line up vertically.

http://www.willisemail.co.uk/skill/

I may be wrong but the list menu seems to be the problem as it never lines up.

Any help would be great or a suggestion on how to go about this another way.

Thanks

Jemes


html {
padding:0px;
margin:0px;
}

body {
background-color: #F5F5F5;
font-size: 12px;
color: #564b47;
text-align:center;
margin:0px;
padding:0px;
}


/* Site Holder Start */
#box {
width: 750px;
margin: 0px auto;
padding: 0px;
text-align: left;
border: 1px solid #979696;
background-color: #FFFFFF;
background-image:url(../Images/mid.jpg);
}
/* Site Holder End */


/* Site Holder Start */
#box2 {
margin-left: 49px;
margin-right: 50px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
text-align: left;
}
/* Site Holder End */


/* Content Start */
#content {
width: 461px;
padding:0px;
background-color:#FFF;
overflow: hidden;
}
/* Content End */


/* Content Start */
#content2 {
margin-left: 14px;
margin-right: 15px;
margin-top: 0px;
margin-bottom:0px;
padding:0px;
background-color:#FFF;
overflow: hidden;
}
/* Content End */


/*Right Menu Start*/
#right {
width: 178px;
padding:0px;
float:right;
background-color:#FFF;
overflow: auto;
}
/*Right Menu End */

.imgRight {
text-align:center;
margin-top: 10px;
}

.imgMain {
text-align:center;
margin-top:10px;
border: 1px solid #979696;
}

.Menu {
margin-top:10px;
padding: 0px;
}

.Menu ul
{
padding: 0px;
margin:0px;
list-style-type:none;
}

.Menu li
{
display: inline;
list-style-type:none;
padding: 1px;
margin:0px;
}

.Main {
margin: 0px;
border: 1px solid #979696;
margin-top:8px;
margin-bottom:10px;
}

im trying out zope, and im trying to add a THEME section to my site like the themes on PHPNuke.. i have allready designed all the diffrent css sheets.. lets call thes 1.css 2.css 3.css 4.css how would i refrence the sheets in my header, and create a dropdown menu that would change the css layout?

Hi Folks

This is my first post here, hopefully I'll keep to etiquette I'm always ready to be corrected if I step out of line.

Anyway, I have an unusual problem I can't seem to solve. I am making a menu with drop downs using lists, I have it working in my HTML editor (CoffeeCup). When I try to view it in Firefox or IE7 the sub lists show and push the tabs I made to the side.

Here is the CSS I'm trying to use, some I've taken from tutorials, some of my own (which is where the problem possibly lies)

Code:

/*1. Taken from http://www.sohtanaka.com/web-design/liquid-color-adjustable-css-buttons/ with thanks */
.btn {
	float: left;
	background: url(images/btn_left.png) no-repeat;
	margin: 5px 0;
}
.btn a{
	float: left;
	height: 40px;
	width:100px;
	background: url(images/btn_stretch.png) repeat-x left top;
	line-height: 40px;
	color: #fff;
	font-size: 1em;
	text-decoration: none;
	padding-bottom:25px;
padding-left:10px;
}
.btn span {
	background: url(images/btn_right.png) no-repeat;
	float: left;
	width: 10px;
	height: 40px;
}
.btn_home { background-color: #575757;padding-left:10px; }
.btn_e1 { background-color: #575757;padding-left:10px; }
.btn_e2 { background-color: #575757;padding-left:10px; }
.btn_e3 { background-color: #575757;padding-left:10px; }
.btn_e4 { background-color: #575757;padding-left:10px; }
.btn_e5 { background-color: #575757;padding-left:10px; }
.btn_home:hover { background-color: #DC134C; }
.btn_e1:hover { background-color: #DC134C; }
.btn_e2:hover { background-color: #FF00FF; }
.btn_e3:hover { background-color: #DC134C; }
.btn_e4:hover { background-color: #DC134C; }
.btn_e5:hover { background-color: #DC134C; }
/*End of 1*/
/*My random scrawlings*/
#navigation {
	height:35px;
	width:787px;
	position:relative;
	margin:0 auto 0 auto;
	z-index:100;
}

#navmenu, #navmenu ul {
	padding:0;
	margin:0;
	list-style-type:none;
}

#navmenu {
	margin:0;
}

#navmenu li {
	float:left;
	position:relative;
	text-align:center;
}

#navmenu li a, #navmenu li a:visited {
	width:101px;
	font-size:1em;
	font-family:Arial;
	height:16px;
	text-decoration:none;
	
}



#navmenu li li a, #navmenu li li a:visited {
	display:block;
	width:122px;

	color:#fff;
	height:15px;
	text-decoration:none;
	z-index:100;
	margin-left:-1px;
}

#navmenu li:hover > a {
	background-color:;
	color:#fff;
	text-decoration:underline;
	
}

#navmenu li li:hover > a {
	background-color:#DC134C;
	color:#fff;
	text-decoration:underline;
	}

#navmenu li ul {
	display: none;
}
#navmenu li:hover > ul {
	display: block;
	position: absolute;
	top:0;
	left:203px;
}

#navmenu > li:hover > ul {
	left:0;
	top:35px;
}
/*End of my random scrawling*/

And here is the HTML I'm using the create my lists

Code:

<div id="navigation">
  <ul id="navmenu">
    <li class="btn btn_home"><a>Home</a><span></span></li>
    <li class="btn btn_e1"><a>Element 1</a><span></span></li>
      <ul>
        <li><a>Sub 1</a></li>
        <li><a>Sub 2</a></li>
        <li><a>Sub 3</a></li>
        <li><a>Sub 4</a></li>
      </ul>
  	<li class="btn btn_e2"><a>Element 2</a><span></span></li>
      <ul>
        <li><a>Sub 5</a></li>
        <li><a>Sub 6</a></li>
        <li><a>Sub 7</a></li>
        <li><a>Sub 8</a></li>
        <li><a>Sub 9</a></li>
      </ul>
  	<li class="btn btn_e3"><a>Element 3</a><span></span></li>
  	<li class="btn btn_e4"><a>Element 4</a><span></span></li>
  	<li class="btn btn_e5"><a>Element 5</a><span></span></li>
  </ul>
</div>

Any help in where I've been going wrong would be greatly appreciated.

Thanks


Dave

Hi, I'm trying to make a simple rollover menu with a <ul><li> list.

Here's my stylesheet: Code:

.navigation{
	width:768px;
	height:26px;
	padding: 94px, 0px, 10px, 5px;	
	z-index:999;
}

.navigation ul.nav li {display:inline}

.navigation ul.nav li a.link: hover{
color:#fbe8be;
font-family:times, serif;
font-size: 14pt;
text-decoration:none;
}

.navigation ul.nav li a.link:active{
text-decoration:none;
color:#bac4a1;
font-family:times, serif;
font-size: 14pt;
}

And here's my XHTML: Code:

<div class="navigation">
<ul class="nav">
<li><a href="index.php" class="link">Home</a></li> |
<li><a href="ScopeofServices.php" class="link">Scope of Services</a></li> |   
<li><a href="BaselineFees.php" class="link">Baseline Fees</a></li> |   
<li><a href="BaslineProcedures.php" class="link">Baseline Procedures</a></li> |   
<li><a href="Qualifications.php" class="link">Qualification<a></li> |   
<li><a href="contact.php" class="link">Contact Us</a></li> |
<li><a href="considerations.php" class="link">Key Considerations & Pre-Conditions</a></li>
</ul>
</div>

Here's the page: http://www.caillouette.com/SelvanSite/index.php

Can anyone tell me why my rollovers don't work?

thanks
-

I'm trying to create a menu using 'list' but so far without much success :-(

Problems?

Not displaying horizontally in browser.

Can't center text in box.

Adding 'padding' didn't work.

Any help would be much appreciated,

Mike

P.S. Please ignore the colors ;-)

//paste.pocoo.org/show/207718/

Please add http to the above - I'm not yet allowed to ..

Hi;
I got two problem in my code.
1) a list of menu could not sit in the center.

2) a list menu has a gap from top in the Firefox, but there is not gap from top from IE browser. And in the IE Browser, the list of menu sit too hight on the top.
How could i sit the list of menu in the center and there are about 1px gas or not
gas between the top and the menu bar in IE and Firefox.

my code as following;

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"> 
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
  body {
         font: 80% arial, helvetica, sans-serif;
         background: white;
         margin: 0;
       }
#container{
   
    position: relative;
    width: 780px;
    w\idth: 780;
    border: solid #036;
    border-width: 0 3px;
    margin: auto;
 }

#navlist
{
  color: white;
  text-align: center;
  list-style-type: none;
  padding-bottom: 1px;
 
     
}

#navlist li
{
  bacground-color: #4c56d9;
  margin-left: 1px;
  display: inline;
  border: 3px solid #4c56d9;
  padding: 1px;
  
}

#navlist li a
{
  text-decoration: none;
  border: 2px solid #737be4;
  padding: 2px;
  color: white;
  margin-left: 1px;
  background-color: #4c56d9;
}
  


	
	
</style>
</head>

<body>
<div id="container">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">Contact Us </a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</body>

</html>

Hi,

I am working on this website atm: www.powys.gov.uk

I have a problem with the menu, the problem is when you scale the browser window and the menu links(on the left column) are forced to wrap, the indentation of the link isnt the same e.g:

Code:

   My Menu Link
Has been wrapped

I want it to be like:

Code:

  My Menu Link
  Has been Wrapped

The problem only occurs in IE, it looks perfect in Mozilla, can anyone offer any help on how I might fix this? I am out of ideas.


Regards,
Graham

I've been hit with a problem that I think isn't possible, but I'm hoping that someone else here might be able to offer some sort of solution. It's a bit complicated to explain, so I'll try and give as much detail as I can.

I have a menu system set up on a site, and it's styled correctly for the way that one section works. It's a standard unordered list.

FIRST MENU:
Code:

<ul>
    <li>
        <a href="page1.html">Link 1</a>
        <ul>
            <li><a href="page1.1.html">Link 1.1</a></li>
            <li><a href="page1.2.html">Link 1.2</a></li>
        </ul>
    </li>
    <li>
        <a href="page2.html">Link 2</a>
        <ul>
            <li><a href="page2.1.html">Link 2.1</a></li>
        </ul>
    </li>
</ul>

SECOND MENU:
Code:

<ul>
    <li>
        <a href="page1.html">Link 1</a>
    </li>
    <li>
        <a href="page2.html">Link 2</a>
    </li>
</ul>

My problem is that I also need to style another menu match this - but the second menu has to have it's first-level links look like the second-level links in the first menu.

This wouldn't be a problem normally as I'd be able to use different selectors, ID's or something else, but with this system, the menu is output from a closed function that I can't change. There's no ID's on the lists, and the classes are all the same. I can't change this, and I can't change the system to add anything else around each list to give it a better identifier. This means that both menus use the same CSS.

The only way that I can see that I can do this is to set up a CSS rule that styles the list item either only of it contains another<ul> item, or if it doesn't contain another <ul> item. As far as I know that's not possible to do.

Does anyone out there have an idea of where I can start with this?

I'm embedding menumatic into a joomla 1.6 based website.
Menumatic is just a slick css suckerfish menu with some mootools effects. http://greengeckodesign.com/menumatic

Anyway, I've edited the CSS to look ALMOST right. The only problem is that I cannot get the menu as a whole to center correctly on the page.

Anybody have any ideas about how i can do this?
(In addition to the 100's of things I've tried, I've tried putting it in another set of div's and centering that div, but it didn't work )

below is all the code. I left the JS out, since it also runs (a bit less prettily) on pure css. Also, I have verified the CSS at w3. There are four lines that are not standard, but they are to do with the rounded corner borders, not the spacing or alignment.

Edit: A bit more playing around and I have think it is a conflict with floating the items left. They need to display:block in order to display correctly so they also need to float (left) since they would otherwise be on separate lines (I think).

Anybody have an idea about how to get around this?

I tried to justify the text (that would be fine for my purposes), but it didn't work either.


CSS:

Code:

#mainMenu{
background-color: #036;
padding: 0px;
font-size: medium;
text-align: center;
}

/* Based partially on Matthew Carroll's keyboard accessible flavor of Suckerfish 
 * Dropdowns by Patrick Griffiths and Dan Webb. 
 * http://carroll.org.uk/sandbox/suckerfish/bones2.html
 */

/* ----[ LINKS ]----*/

/* all menu links */
.menuMain a, #subMenusContainer a{
	text-decoration:none;
	display:block;
	padding:10px 20px;
	background-color:#036 ;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
}

/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
.menuMain a{
	margin:0;
	float:left;
        color:#fff;
        
}

/* Just sub menu links */
#subMenusContainer a, .menuMain li li a{
	
}

/* All menu links on hover or focus */
.menuMain a:hover, .menuMain a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, .menuMain a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused{
	background-color:#06c ;
	color:#FFF;
}

/* sub menu links on hover or focus */
#subMenusContainer a:hover, 
#subMenusContainer a:focus, 
.menuMain a.mainMenuParentBtnFocused, 
#subMenusContainer a.subMenuParentBtnFocused,
.menuMain li a:hover,
.menuMain li a:focus{
	background-color:#06c ;
	color:#FFF;
}

/* Parent Sub Menu Links ---[javascript users only]*/
.subMenuParentBtn{ 
	background: url(../ottest/templates/ot_template/images/arrow_right.gif) right center no-repeat;  
}

/* Parent Sub Menu Links on hover or focus ---[javascript users only]*/
.subMenuParentBtnFocused{ 
	background: url(../ottest/templates/ot_template/images/arrow_right_over.gif) right center no-repeat;  
}

/* Parent Main Menu Links ---[javascript users only]*/
.mainMenuParentBtn{	
	 background: url(../ottest/templates/ot_template/images/arrow_down.gif) right center no-repeat; 
}

/* Parent Main Menu Links on hover or focus ---[javascript users only]*/
.mainMenuParentBtnFocused{	
	background: url(../ottest/templates/ot_template/images/arrow_down_over.gif) right center no-repeat; 
}

/* ----[ OLs ULs, LIs, and DIVs ]----*/

/* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
.smOW{ 
	display:none; 
	position: absolute; 
	overflow:hidden; 
	/*the 2px left & right padding lets you have a 1px border 
	  on the ul or ol inside since overflow is set to hidden*/
	padding:0 2px;
	margin:0 0 0 -2px;
}


/* All ULs and OLs */
.menuMain, .menuMain ul, .menuMain ol, #subMenusContainer ul, #subMenusContainer ol { 
	padding: 0;
	margin:0 20px 0 0;
	list-style: none;
	line-height: 1em;
}

/* All submenu OLs and ULs */
.menuMain ol, .menuMain ul, #subMenusContainer ul, #subMenusContainer ol {	
	/*border around submenu goes here*/	 
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	background:#036;	
	left:0;
}


/* List items in main menu --[for non-javascript users this applies to submenus as well]  */
.menuMain li { 

	/*great place to use a background image as a divider*/
	display:block;
	list-style:none;
margin:0 5px;
	position:relative;
	float:left;

}

#subMenusContainer li{
	list-style: none;
}

/* main menu ul or ol elment */
.menuMain{
	display:block;
	list-style:none;
	margin-top:0px;
	margin-bottom:0px;
	margin-left:40px;
	margin-right:auto;
	z-index:5;
	text-align: center;
	display:block;
}

#subMenusContainer{	display:block; 	position:absolute;	top:0;	left:0;	width:100%;	height:0;	overflow:visible;	z-index:1000000000; }


/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
.menuMain li li{	float:none; }

.menuMain li li a{ /* Just submenu links*/	
	position:relative;
	float:none;
}

.menuMain li ul { /* second-level lists */
	position: absolute;
	width: 10em;
	margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	margin-top:2.2em;
}

/* third-and-above-level lists */
.menuMain li ul ul { margin: -1em 0 0 -1000em; }
.menuMain li:hover ul ul {	margin-left: -1000em; }

 /* lists nested under hovered list items */
.menuMain li:hover ul{	margin-left: 0; }
.menuMain li li:hover ul {	margin-left: 10em; margin-top:-2.5em;}

/* extra positioning rules for limited noscript keyboard accessibility */
.menuMain li a:focus + ul {  margin-left: 0; margin-top:2.2em; }
.menuMain li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
.menuMain li li a:focus {left:0;  margin-left:1000em; width:10em;  margin-top:0;}
.menuMain li li li a:focus {left:0; margin-left: 2010em; width: 10em;  margin-top:-1em;}
.menuMain li:hover a:focus{ margin-left: 0; }
.menuMain li li:hover a:focus + ul { margin-left: 10em; }

The menu html (an excerpt)
Code:

<html>
<head>
<link rel="stylesheet" href="MenuMatic.css" type="text/css" />
</head>
<body>
<div id="mainMenu" style="width:950px;">
					
<ul class="menuMain"> 

	<li id="item-101" class="current active"><a href="/ottest/" >Home</a></li>
	<li id="item-102" class="deeper parent"><a href="/ottest/currentissuemenu" >Current Issue</a>
		<ul>
			<li id="item-133"><a href="/ottest/currentissuemenu/test-item-menu" >Test item menu</a></li>
		</ul>
	</li>
	<li id="item-103"><a href="/ottest/otblogmenu" >OT Blog</a></li>
	<li id="item-104"><a href="/ottest/previousissuesmenu" >Previous Issues</a></li>
	<li id="item-105"><a href="/ottest/classifiedsmenu" >Classifieds</a></li>
	<li id="item-124"><a href="/ottest/contact-us" >Contact Us</a></li>
</ul> 
	
</div>
</body>
</html>

Hello;

I'm trying to create a dropdown nav menu which drops down into in three levels. When I put a mouseover on my main nav, it changes it's image. However when I move away from it to a lower level of the menu it changes back.

I want to main nav to stay the same image when I move down to lower levels of the menu.

Thank you



Here is my code:
Code:

body {
	font-family:verdana, arial, helvetica, sans-serif;
	font-size:76%;
	color:#000;
	padding:0;
	border:0;
	margin:0;
	background:#fff repeat-x 0 0px;
	text-align:left;
}
.clear {
	clear:both;
}
.play {
	font-family:"trebuchet ms", sans-serif;
}
.hiddenfromview {
	display:none;
}
/* control mouseover functions for main menu navs */



	#menu1 a {
	width:129px;
	background: url("1.jpg") 0 0 no-repeat;
}
#menu1 a:hover {
	display:block;
	background: url("1-1.jpg") 0 0 no-repeat;
}
#menu2 a {
	width:129px;
	background: url("2.jpg") 0 0 no-repeat;
}
#menu2 a:hover {
	display:block;
	background: url("2-1.jpg") 0 0 no-repeat;
}
#menu3 a {
	width:129px;
	background: url("3.jpg") 0 0 no-repeat;
}
#menu3 a:hover {
	display:block;
	background: url("3-1.jpg") 0 0 no-repeat;
}
#menu4 a {
	width:129px;
	background: url("4.jpg") 0 0 no-repeat;
}
#menu4 a:hover {
	display:block;
	background: url("4-1.jpg") 0 0 no-repeat;
}
#menu5 a {
	width:127px;
	background: url("5.jpg") 0 0 no-repeat;
}
#menu5 a:hover {
	display:block;
	background: url("5-1.jpg") 0 0 no-repeat;
}
#menu6 a {
	width:129px;
	background: url("6.jpg") 0 0 no-repeat;
}
#menu6 a:hover {
	display:block;
	background: url("6-1.jpg") 0 0 no-repeat;
}
.menu {
	font-size:0em;
	position:relative;
	z-index:100;
	border-right:1px solid #000;
}
/* hack to correct IE5.5 faulty box model */
* html .menu {
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
	padding:0;
	margin:0;
	list-style-type:none;
}
.menu ul ul {
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
	float:left;
	position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
	display:block;
	font-size:11px;
	text-decoration:none;
	font:arial;
	font-weight:550;
	height:40px;
	border:0px solid #b17323;
	border-width:0px 0 0px 0px;
	padding-left:0px;
	line-height:0px;
}
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
	background:#798fb1 url(arrow1.gif) bottom right no-repeat;
}
/* style the second level hover */
.menu ul ul a.drop:hover {
	background:#ffffff url(arrow1.gif) bottom right no-repeat;
}
.menu ul ul :hover > a.drop {
	background:#ffffff url(arrow2.gif) bottom right no-repeat;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
	background:#ffffff;
	color:#3d4058;
	width:160px;
}
/* style the third level hover */
.menu ul ul ul a:hover {
	background:#de9639;
	color:#ffffff;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
	visibility:hidden;
	position:absolute;
	height:0;
	top:25px;
	left:0;
	border-top:1px solid #798fb1;
}
/* another hack for IE5.5 */
* html .menu ul ul {
	top:25px;
	t\op:25px;
}
/* position the third level flyout menu */
.menu ul ul ul {
	left:126px;
	top:-1px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
	left:-60px;
}
/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {
	position:absolute;
	top:0;
	left:0;
	border-collapse:collapse;
	;
}
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
	background:#798fb1;
	color:#ffffff;
	height:auto;
	line-height:1em;
	padding:5px 10px;
	width:105px;
	border-width:0 1px 1px 1px;
}
/* style the second level links */
.menu2 ul ul a, .menu2 ul ul a:visited {
	background:#f4eed3;
	color:#b17323;
	height:auto;
	line-height:11em;
	padding:5px 10px;
	width:100px;
	border-width:0 1px 1px 1px;
}
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {
	width:100px;
	w\idth:100px;
}
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover {
	color:#3d4058;
	background:#ffffff;
}
.menu :hover > a, .menu ul ul :hover > a {
	color:#3d4058;
	background:#ffffff;
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul, .menu ul a:hover ul {
	visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul {
	visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul {
	visibility:visible;
}

Hi. I am having dificulty getting a menu item to change colour and background colour when mouse over

http://www.des-otoole.co.uk/HC2010/holidayclub.php

any reason as it is at the end of the style sheet code

Code:

#tabnav a:hover
{
	background: #bfbfbf; 
	color: #f05320;
}

hi all,

need help to change this from vertical to horizontal menu.

code:
<html>

<head>
<title>Test</title>


<script language="JavaScript" type="text/javascript">
// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
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>


<style type="text/css">


body {
font: normal 11px verdana;
}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}

/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: red; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

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

ul li a:hover { color: #E2144A; background: green; } /* Hover Styles */

li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

li:hover ul, li.over ul { display: block; } /* The magic */
</style>

</head>

<body>

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>

</ul>
</body>
</html>

any help would be appreciated! Thanks!!