CSS - Help With Css List Menu Wich Keep Active Color Always

I am working in Drupal and have a menu with secondary levels. I have coded css on the menu a tag with borders and no background.

.primary-menu-inner ul.sf-menu a {
color: #FFFFFF;
display:block;
border-left:1px solid #ffcc33;
border-right:1px solid #6f4c23;
}

I am trying to override the .primary-menu-inner ul.sf-menu li.active-trail

.primary-menu-inner ul.sf-menu li.active-trail {
background: url(../images/nav.png) no-repeat right -64px;
border-bottom:1px solid #a67c52;
border-right:1px solid #a67c52;
border-left: 1px solid #38230b;
visibility: visible;
}

to where the borders settings on the a tag does not show up on the li.active trail.

Any suggestions would be great...

Hello,

I am working on my HW problem with CSS, it's about rounded and angular corners in menu (active or hover).

I can't post picture (not permitted), but probably you know what i mean, rounded corners are created with image and angular are created with padding by CSS.
Angular is ready, now i have to do rounded, which is more hard.

I have 3 pictures, left rounded side, middle and right rounded side. But i really dont know how to add it to a.active or a:hover elements. Middle picture will be repeated depending on text long, so i can't do 1 picture.

Thank you for your help.

Hello everone, i just joined today in this community and looking forward to enjoying here for a quite long time as i want to develop myself with css.

I have a horizontal menu which is based on an image that has three layers: unvisited link, hover link, active link.

but somehow i cant get my active links to work and cant understand where im making a mistake. you can find php and css codes below. and i appreciate any single comments suggestions.

PHP code:
Code:

<?php

$block = ( is_front_page() ? 'h1' : 'div' );

// arguments for wp_list_pages
$list_args = k2_get_page_list_args(); // this function is pluggable

?>

<?php echo "<$block class='blog-title'>"; ?>
	<a href="<?php echo get_option('home'); ?>/" accesskey="1"><?php bloginfo('name'); ?></a>
<?php echo "</$block>"; ?>

<p class="description"><?php bloginfo('description'); ?>


<ul id="menu">
   <li id="home"><a href=""<?php if(is_home() || is_single() || is_category() || is_tag() || is_author() || is_year() || is_month()) { echo ' class="active"'; }?>>home</a></li>
		 <li id="archives"><a href="?page_id=2"<?php if(is_page('archives')) echo ' class="active"'; ?>>archives</a></li>
         <li id="news"><a href="?page_id=35"<?php if(is_page('news')) echo ' class="active"'; ?>>news</a></li>
         <li id="contact" class="last<?php if(is_page('contact')) echo ' active"'; ?>"><a href="?page_id=31">contact</a></li>

CSS code:
Code:

#menu {
     list-style: none;
     padding: 0;
     margin: -105px 25px;
     width: 332px;
     height: 30px;
     background: url('images/menu.gif');
     position: relative;
}

	ul#menu li { width: 80px;
	            height: 30px;
				padding: 0 4px 0 0;
				text-indent: -900px;
				float: left;
				}

	ul#menu li.last { padding: 0; }

		ul#menu li a, ul#menu li a:visited, ul#menu li a:hover { display: block; width: 80px; height: 30px; background: transparent url('images/menu.gif') no-repeat; outline: none; }

			ul#menu li#home a, ul#menu li#home a:visited { background-position: 0 0; }	

			ul#menu li#archives a, ul#menu li#archives a:visited { background-position: -84px 0; }

			ul#menu li#news a, ul#menu li#news a:visited { background-position: -168px 0; }

			ul#menu li#contact a, ul#menu li#contact a:visited { background-position: -252px 0; }

				ul#menu li#home a:hover { background-position: 0 -30px; }

				ul#menu li#archives a:hover { background-position: -84px -30px; }

				ul#menu li#news a:hover { background-position: -168px -30px; }

				ul#menu li#contact a:hover { background-position: -252px -30px; }

			.home ul#menu li#home a, .home ul#menu li#home a:visited, .home ul#menu li#home a:hover { background-position: 0 -60px; cursor: default; }

			.archives ul#menu li#archives a, .archives ul#menu li#archives a:visited, .archives ul#menu li#archives a:hover { background-position: -84px -60px; cursor: default; }

			.news ul#menu li#news a, .news ul#menu li#news a:visited, .news ul#menu li#news a:hover { background-position: -168px -60px; cursor: default; }

			.contact ul#menu li#contact a, .contact ul#menu li#contact a:visited, .contact ul#menu li#contact a:hover { background-position: -252px -60px; cursor: default; }

i think the problem may be with the last 4 lines of CSS code because they are related to the active links but dont know how i can find out the problem.

thank you for any single suggestions and comments.

Hey Guys, was hoping someone could look at my code and tell me what is wrong. My website (http://www.ecbsa.co.za/) refuses to show what page i am on in the menu by highlighting it etc. Here is the CSS:

Code:

/* - - - BASIC styles [ MANDATORY ] - - - */

.menu, .menu ul {
margin: 0;
padding: 0;
border: 0;
font-family: arial, Calibri, "Trebuchet MS", sans-serif;
font-size: 11px;
line-height:1.3em;
list-style-type: none;
display: block;
height:44px;
}

.menu li {
margin: 0;
padding: 0;
border: 0;
display: block;
float: left;	/* move all main list items into one row, by floating them */
position: relative;	/* position each LI, thus creating potential IE.win overlap problem */
z-index: 5;		/* thus we need to apply explicit z-index here... */
}

.menu li:hover {
z-index: 10000;	/* ...and here. this makes sure active item is always above anything else in the menu */
white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}

.menu li li {
float: none;/* items of the nested menus are kept on separate lines */
}

.menu ul {
visibility: hidden;	/* initially hide all submenus. */
position: absolute;
z-index: 10;
left: 0;	/* while hidden, always keep them at the top left corner, */
top: 0;		/* 		to avoid scrollbars as much as possible */
}

.menu li:hover>ul {
visibility: visible;	/* display submenu them on hover */
top: 100%;	/* 1st level go below their parent item */
}

.menu li li:hover>ul {	/* 2nd+ levels go on the right side of the parent item */
top: 0;
left: 100%;
}

/* -- float.clear --
force containment of floated LIs inside of UL */
.menu:after, .menu ul:after {
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.menu, .menu ul {	/* IE7 float clear: */
min-height: 0;
}
/* -- float.clear.END --  */

/* -- sticky.submenu -- */
.menu ul {
background-image: url(empty.html);	/* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */
padding: 10px 20px 20px 20px;
margin: -10px 0 0 -20px;
/* background: #fcfcfc;*/	/* uncomment this if you want to see the "safe" area.
you can also use to adjust the safe area to your requirement */
}
.menu ul ul {
padding: 20px 20px 20px 10px;
margin: -30px 0 0 0px;
}
/* -- sticky.submenu.END -- */


/* - - - DESIGN styles - - - */

/* main upper bar */
#main-nav {
background: url(img/_ui/main_nav.jpg) left top no-repeat;
width:967px;
height:44px;
text-align: center;
}

.menu {
width:967px;
}

/* main upper bar */
.menu, .menu ul li {
color: #ff6600;
}

.menu ul {
width: 45em;
}


.menu a:active{
text-shadow: #006699 1px 1px 2px;
color: #ff6600;
padding: .5em 3.5em;
display: block;
position: relative;
}

.menu a {
text-shadow: #006699 1px 1px 2px;
color: #fff;
padding: .5em 3.5em;
display: block;
position: relative;
}


.top-level {
width:59px;
margin-top: 5px;
/*padding-top:2.0em;*/
line-height: 1.1em;
font-size:11px;
}

.menu ul li a ul li {
text-align: left;
}

.menu a:hover, .menu li:hover {
text-shadow: #006699 1px 1px 2px;
display: block;
color: #FAA93B;
}

.menu a:active {
text-shadow: #006699 1px 1px 2px;
color: #ff6600;
padding: .5em 3.5em;
display: block;
position: relative;
}

/* submenu hover colours */
.menu li li a:hover {
display: block;
color:  #F89624;
background-color:#D9D4CE;
}


.menu ul>li + li {	/* and remove the top border on all but first item in the list */
border-top: 0;
}

.menu li li:hover>ul {	/* inset 2nd+ submenus, to show off overlapping */
top: 5px;
left: 90%;
}

#lhs {
	background-image: url(img/_ui/lhs_bg_20080401.jpg);
	background-position: right top;
	background-repeat: repeat-y;
}

.lhs_div {
height:1px;
text-align:right;
	background-image: url(img/_ui/lhs_dotted_div_333.png);
	background-position: right middle;
	background-repeat: no-repeat;
}

And here is the HTML:

Code:

<!-- menu updated 20091218 -->
<div id="main-nav">
<ul class="adxm menu">

<li><a class="top-level"  a href="<%=getCurrentAttribute('site','homepageurl')%>"><b>Home<br>Page</b></a>

</li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level" href="http://www.ecbsa.co.za/FAQ"><b>FAQ<br>(Questions)</b></a></li>

<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level" href="http://www.ecbsa.co.za/Information"><b>Info<br>(Information)</b></a></li>

<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level" href="http://www.ecbsa.co.za/New-Contractors"><b>New<br>Contractors</b></a>

<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level" href="http://www.ecbsa.co.za/Contact-Us"><b>Contact<br>Us</b></a></li>

<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level"><b><br></b></a></li>

<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#506169; "></li>
<li style="height: 40px; margin-top:2px; padding:0; width: 1px; background-color:#82A2B1; "></li>
<li><a class="top-level" href="https://checkout.netsuite.com/app/center/nlvisitor.nl/c.1123442/n.1/sc.6/.f"><b>My<br>Account</a></b></li>

</ul>
</div>


<!-- menu updated 20091218 -->
 

<br><br>

</td></tr>
<!-- LOGOS AND TABS -->	
</table>
</div>

Hi

I am creating a navigation bar using unsorted list and CSS.
I have given my CSS and HTML code here


Code:

#navcontainer 
{
width: 200px;
margin-top:150px; 
}

#navcontainer ul#navlist
{
width:200px;
clear:left; 
text-align:left; 
margin-left:0; 
padding-left:0; 
list-style:none;
font-size: 12px;
font-weight:bold;
line-height: 14px;

}

#navcontainer ul#navlist li
{
margin-left:0; 
padding: 0px;
display: block;
list-style:none; 
border-bottom: 1px solid gray;
}

#navcontainer ul#navlist li.last
{
border-right: 0;
background:none;
}

  a.linkText {
    padding: 10px;
    display: block;

    color : #444444;
    font-family : arial;
    font-size : 11px;
    font-weight : bold;
    text-decoration : none;
    height:25px;

    }
    a.linkText:link {
    color : Aqua;
    /* you can define other styles if necessary */
    }
    
    a.linkText:visited {
    color : Maroon;
    /* you can define other styles if necessary */
    }
    
    a.linkText:hover {
    color : Blue;
    }
    
    
    
    </style>
</head>
<body>
<div id="navcontainer">
    <ul id="navlist">
        <li><a class="linkText" href="#">Item One</a></li>
        <li><a class="linkText" href="#">Item two</a></li>
        <li><a class="linkText" href="#">Item three</a></li>
        <li><a class="linkText" href="#">Item four</a></li>
        <li><a class="linkText" href="#">Item five</a></li>
    </ul>
</div>

The problem is, when I select the next list item, previously selected list item should come to the original color.

Is there any way I can achieve this? Your guidence will be appreciated. Many thanks

We have a page which contains an iFrame.
The page which contains the iFrame opens up half way down and not at the top.

is there a way in css to open up the page at the top?

This is the code which calls the iFrame:

Code:

<iframe src="Page1.aspx#myAnchor" width="975" height="180">

If I remove the #myAnchor from the url - it does work ok.
But we want the anchor tag there to open up the iFrame window at that point.

(Its the parent page which we need to open up at the top).

thanks.

Hi,
I have asp menu in my aspx page. There are 3 menu items. If the user clicks on a menu item, I want to highlight the menu with a different color and by default the other menu items should have another color.

So only the currently selected menu, should have the different color, and the other menu items should have the default color.

How to achieve this?

Thank you

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

Alright - so I just changed my Java Script based navigation menu over to a CSS based menu for better search engine crawling and easy of use.

Here's what I want, and can't seem to do: The original font color of a the links is "white". Easy enough. When you mouse over the link it turns light grey. Looks great! This part works wonders.

Here's the problem...When you visit a page in the navigation, the "hover: change color to grey" doesn't work anymore. Instead of remains solid white.

Is there a fix/trick to making it work so that always always when you hover over these links they change to grey. Whether the link is active, or already visited, it turns grey during hover.

Thank for your help! To see this in action visit Window Film and More.com and take a look at the left navigation.

Hi,

Is there any way to change the color of the menu text for that current page? For example when I'm on the 'About Us' page on my website, I want the text to be blue or #00175d to be precise.

I am not very good at coding or editing HTML/CSS, so I don't know how to do this.

All I know is that my website has a class on the body, and each menu item has a unique ID.

My website is: http://firstcareambulance .org/
Any help is appreciated.

Thanks

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

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

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'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>