Druckbare Version
Ich habe ein Problem mit dem Suckerfish Menu. Scheinbar steh ich gerade auf dem Schlauch. Die Seite darf ich hier leider noch nicht posten, hänge aber ein Bild zur Verdeutlichung an.
Also, die #suckerfish ul.level_1 span hat ein width: auto; damit die Menupunkte gleiche Entfernung zueinander haben. Das Drop-Down Level_2 soll jetzt rechtsbündig und nicht wie standard linksbündig aufklappen.
Jemand ne Idee, wie man das positionieren kann?
Viele Grüße!
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;
}