Wed, 2009-08-19 17:38
I found the following CSS for a 3 tier horizontal dropdown menu. I'd like to use it on a website I'm making, but it has some issues displaying the third tier in Firefox. This is the CSS:
CSS
/* First-level expected directory tag - li */ ul.dropdown li { padding: 5px; } ul.dropdown *.dir { padding-right: 30px; background-image: none; background-position: 100% 50%; background-repeat: no-repeat; } /* Non-first level */ ul.dropdown ul *.dir { padding-right: 15px; background-image: url('nav-arrow-right.png'); background-position: 100% 50%; background-repeat: no-repeat; } ul.dropdown ul ul *.dir { background-image: url('nav-arrow-right2.png'); } /* Components override */ ul.dropdown-vertical *.dir { background-image: url('nav-arrow-right.png'); } ul.dropdown-vertical-rtl *.dir { padding-right: 15px; background-image: url("Project/images/nav-arrow-left.png"); background-position: 0 50%; } /*------------------------------------------------------------------------------------------------------/ /* ALL LEVELS (incl. first) */ ul.dropdown { font: bold 14px/normal Arial, Helvetica, sans-serif; } ul.dropdown li { background-color: #333; color: #fff; } ul.dropdown li.hover, ul.dropdown li:hover { } /* Links */ ul.dropdown a:link, ul.dropdown a:visited { color: #fff; text-decoration: none;} ul.dropdown a:hover { border-top-color: #5db1e0 !important; border-left-color: #5db1e0; background-color: #4498c7; color: #fff; } ul.dropdown ul a.dir:hover { /* proposal */ background-color: #4698ca; background-image: url('comnav-arrowon.png'); color: #fff; } ul.dropdown a:active { color: #fff; } /* NON-FIRST LEVEL */ ul.dropdown ul { left: auto; right: 0; width: 150px; margin-top: -1px; border-top: 1px solid #1a1a1a; border-left: solid 1px #4c4c4c; font: bold 11px/1em Tahoma, Geneva, Verdana, sans-serif; } ul.dropdown ul li { background-color: #3a3a3a; } ul.dropdown ul ul { top: 0; right: auto; left: 100%; margin-top: 0; border-top: none; border-left: none; font-weight: normal; } ul.dropdown ul ul li { background-color: #4c4c4c; } ul.dropdown ul ul ul li { background-color: #595959; } /* Mixed */ ul.dropdown li a, ul.dropdown *.dir { border-style: solid; border-width: 1px; border-color: #404040 #1a1a1a #1a1a1a #505050; } ul.dropdown ul li a, ul.dropdown ul *.dir { border-color: #4a4a4a #242424 #242424; border-left: none; } ul.dropdown ul ul li a, ul.dropdown ul ul *.dir { border-color: #595959 #333 #333; } ul.dropdown ul ul ul li a, ul.dropdown ul ul ul *.dir { border-color: #767676 #404040 #404040; }
Any help is appreciated, thanks!