2 replies [Last post]
Last seen: 11 years 44 weeks ago
Joined: 2009-08-08
Posts: 1
Points: 0


I have a problem with this css in ie6

.menuPrincipal, .menuPrincipal ul 
	margin: 0;
	padding: 0;
	border: 0;
	list-style-type: none;
	display: block;

.menuPrincipal 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... */

.menuPrincipal 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 */

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

.menuPrincipal 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 */

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

.menuPrincipal 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 */
.menuPrincipal:after, .menuPrincipal ul:after {
	content: ".";
	height: 0;
	display: block;
	visibility: hidden;
	overflow: hidden;
	clear: both;
.menuPrincipal, .menuPrincipal ul {	/* IE7 float clear: */
	min-height: 0;
/* -- float.clear.END --  */

/* -- sticky.submenu --
	it should not disappear when your mouse moves a bit outside the submenu
	YOU SHOULD NOT STYLE the background of the ".menu UL" or this feature may not work properly!
	if you do it, make sure you 110% know what you do */
.menuPrincipal ul {
	background-image: url(empty.gif);	/* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */
	padding: 10px 30px 30px 30px;
	margin: -10px 0 0 -30px;
	/*background: #f00;*/	/* uncomment this if you want to see the "safe" area.
								you can also use to adjust the safe area to your requirement */
.menuPrincipal ul ul {
	padding: 30px 30px 30px 10px;
	margin: -30px 0 0 -10px;
/* -- sticky.submenu.END -- */

/* - - - ADxMenu: DESIGN styles [ OPTIONAL, design your heart out :) ] - - - */

.menuPrincipal, .menuPrincipal ul li {
	color: white;

.menuPrincipal ul {
	width: 11em;

.menuPrincipal a {
	text-decoration: none;
	color: white;
	padding: .4em 1em;
	display: block;
	position: relative;

.menuPrincipal a:hover, .menuPrincipal li:hover>a {
	color: green; 

.menuPrincipal li li {	/* create borders around each item */
	border: 1px solid #ccc;
.menuPrincipal ul>li + li {	/* and remove the top border on all but first item in the list */
	border-top: 0;

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

/* special colouring for "Main menu:", and for "xx submenu" items in ADxMenu
	placed here to clarify the terminology I use when referencing submenus in posts */
.menuPrincipal>li:first-child>a, .menuPrincipal li + li + li li:first-child>a {
	/*color: #567;*/

/* Fix for IE5/Mac \*//*/
.menu a {
	float: left;
/* End Fix */

I downloaded this code and I fixed some things (colors) for my site Smile

The site displays a floating menu. When the mouse moves over the menu shows the sub-menu Smile

This css works in Firefox but in IE6 does not show the sub-menu.

How can I fix this?

Sorry for my english Tongue


Last seen: 11 years 26 weeks ago
Timezone: GMT-7
Joined: 2009-07-30
Posts: 83
Points: 20

floating menus

It is very hard to figure out what you've got going without seeing a real page or the full code. I want to assume you are trying to create a sub menu that shows up when the main menu item is hovered. Is that right?

Tyssen's picture
Last seen: 6 years 35 weeks ago
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

IE6 needs a helping hand

IE6 needs a helping hand from javascript for these sort of menus. As you haven't shown us all of your code, I'm only guessing, but you've probably left it out.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference