Code:
@charset "UTF-8";
body{
background:#eee;
}
#suckerfish {
position: static;
width: auto;
clear:both;
float: right;
margin-top: -25px;
margin-right:-10px;
padding-right: 1px;
}
*+html #suckerfish {
margin-top: -20px;
padding-bottom:15px;
}
#suckerfish ul,
#suckerfish li,
#suckerfish .submenu {
border: none;
margin: 0;
padding: 0;
}
/** * overwrite some values from typolight.css, neccessary for <= IE7 */
#header .inside {
position: static;
}
/** * clear the suckerfish floating in the element that follows suckerfish,
* not neccassary for TL standard situations
#container {
clear: left;
}
*/
/** * some background color for testing */
#suckerfish li {
}
/** *
* horizontal suckerfish menu based on
* http://htmldog.com/articles/suckerfish/dropdowns/
* up to 4 levels, change the 22px and 140px values that it fits your need
* give the navigation module in the BE the ID 'suckerfish' !!! not Class
*/
#suckerfish ul.level_1,
#suckerfish ul.level_1 ul {
z-index: 9999;
line-height: 22px;
padding: 0;
margin: 0;
list-style: none;
}
#suckerfish ul.level_1 li ul ul {
margin: -22px 0 0 140px; /** * adjust top-value if you have padding and/or borders */
}
#suckerfish ul.level_1 a,
#suckerfish ul.level_1 span {
display: block;
width: auto; /** * adjust value if you have padding and/or borders */
font-size: 10px;
color: #797C7F;
padding: 0 10px 0 10px;
text-decoration:none;
text-align:left;
border-right: 1px solid #FFF;
}
#suckerfish ul.level_1 a:hover {
background-position: right;
color:#015385;
border-right: 1px solid #797C7F;
}
#suckerfish ul.level_1 li:hover a
{
border-right: 1px solid #797C7F;
}
#suckerfish ul.level_1 li.active {
}
#suckerfish ul.level_1 li:hover ul.level_2 a,
#suckerfish ul.level_2 li:hover a{
border-right:none;
}
#suckerfish ul.level_1 li {
float: left;
width: auto;
}
#suckerfish ul.level_1 li ul {
position: absolute;
width: 180px;
left: -999em; /** * change to 'auto' for testing */
}
/** * IE7 workaround */
*:first-child+html #suckerfish ul.level_1 li ul {
display: none; /** * change to 'block' for testing */
}
/** * up to 4 levels */
#suckerfish ul.level_1 li:hover ul ul,
#suckerfish ul.level_1 li.sfhover ul ul,
#suckerfish ul.level_1 li:hover ul ul ul,
#suckerfish ul.level_1 li.sfhover ul ul ul {
left: -999em; /** * change to 'auto' for testing */
}
/** * IE7 workaround */
*:first-child+html #suckerfish ul.level_1 li:hover ul ul,
*:first-child+html #suckerfish ul.level_1 li.sfhover ul ul,
*:first-child+html #suckerfish ul.level_1 li:hover ul ul ul,
*:first-child+html #suckerfish ul.level_1 li.sfhover ul ul ul {
display: none; /** * change to 'block' for testing */
}
#suckerfish ul.level_1 li:hover ul,
#suckerfish ul.level_1 li.sfhover ul,
#suckerfish ul.level_1 li li:hover ul,
#suckerfish ul.level_1 li li.sfhover ul,
#suckerfish ul.level_1 li li li:hover ul,
#suckerfish ul.level_1 li li li.sfhover ul {
left: auto;
}
/** * IE7 workaround */
*:first-child+html #suckerfish ul.level_1 li:hover ul,
*:first-child+html #suckerfish ul.level_1 li.sfhover ul,
*:first-child+html #suckerfish ul.level_1 li li:hover ul,
*:first-child+html #suckerfish ul.level_1 li li.sfhover ul,
*:first-child+html #suckerfish ul.level_1 li li li:hover ul,
*:first-child+html #suckerfish ul.level_1 li li li.sfhover ul {
display: block;
}
/* Level 2 */
#suckerfish ul.level_2,
#suckerfish ul.level_2 ul {
z-index: 9999;
line-height: 20px;
padding: 0;
margin: 0;
list-style: none;
}
#suckerfish ul.level_2
{
border: 1px solid #797C7F;
border-top:none;
padding: 0 10px;
background:#FFF;
}
#suckerfish ul.level_2 li ul ul {
margin: -22px 0 0 140px; /** * adjust top-value if you have padding and/or borders */
}
#suckerfish ul.level_2 a,
#suckerfish ul.level_2 span {
display: block;
width: 160px; /** * adjust value if you have padding and/or borders */
font-size: 9px;
padding: 0;
color: #797C7F;
text-decoration:none;
border-bottom: 1px solid #ccc;
border-right:none;
}
#suckerfish ul.level_2 li.last a
{
border:none;
}
#suckerfish ul.level_2 a:hover {
color:#015385;
}
#suckerfish ul.level_2 li {
float: left;
width: 140px;
margin: 0 10px;
}
#suckerfish ul.level_2 li a:after {
content:" »";
}
#suckerfish ul.level_2 li ul {
position: absolute;
width: 180px;
left: -999em; /** * change to 'auto' for testing */
}
/** * IE7 workaround */
*:first-child+html #suckerfish ul.level_2 li ul {
display: none; /** * change to 'block' for testing */
}
/** * up to 4 levels */
#suckerfish ul.level_2 li:hover ul ul,
#suckerfish ul.level_2 li.sfhover ul ul,
#suckerfish ul.level_2 li:hover ul ul ul,
#suckerfish ul.level_2 li.sfhover ul ul ul {
left: -999em; /** * change to 'auto' for testing */
}
/** * IE7 workaround */
*:first-child+html #suckerfish ul.level_2 li:hover ul ul,
*:first-child+html #suckerfish ul.level_2 li.sfhover ul ul,
*:first-child+html #suckerfish ul.level_2 li:hover ul ul ul,
*:first-child+html #suckerfish ul.level_2 li.sfhover ul ul ul {
display: none; /** * change to 'block' for testing */
}
#suckerfish ul.level_2 li:hover ul,
#suckerfish ul.level_2 li.sfhover ul,
#suckerfish ul.level_2 li li:hover ul,
#suckerfish ul.level_2 li li.sfhover ul,
#suckerfish ul.level_2 li li li:hover ul,
#suckerfish ul.level_2 li li li.sfhover ul {
left: auto;
}
/** * IE7 workaround */
*:first-child+html #suckerfish ul.level_2 li:hover ul,
*:first-child+html #suckerfish ul.level_2 li.sfhover ul,
*:first-child+html #suckerfish ul.level_2 li li:hover ul,
*:first-child+html #suckerfish ul.level_2 li li.sfhover ul,
*:first-child+html #suckerfish ul.level_2 li li li:hover ul,
*:first-child+html #suckerfish ul.level_2 li li li.sfhover ul {
display: block;
}
Lesezeichen