Flyout-Menü mit Current stauts

Flyout-Menü mit Current stauts

Beitragvon rizzoo » 24.05.2011, 09:05

Hallo Liebes Forum,

also ich bin nicht der absolute Crack mit CSS, aber meistens bekomme ich es irgendwie hin!

Aber nun, weiß ich nicht weiter:
Ich habe mir ein FLYOUT-Navigations-Menu gebaut (mit großer Hilfe hier ausm Forum und über andere Seiten).
Nun habe ich den Links/Seiten, auf der der User sich befindet, eine ID=current verpasst. Sie werden nun auch farblich anders dargstellt, wenn der User sich dort befindet. Allerdings schaffe ich es nicht, dass das FLYOUT-MENU (wo es auch Unterpunkte gibt) auch sichtbar bleibt (ohne dass man mit der Maus drüber hovert).

Ich bekomms leider nicht hin, und dachte vielleicht kann mir hier jemand helfen.

Hier mal CSS:
Code: Alles auswählen
#container {
    width:695px;
    padding:0px;
}
#menu {
    font-family: "News Gothic MT", Helvetica, Arial, sans-serif;
    width:120px;
    position:relative;
    margin:0;
    font-size:10px;
}
#menu ul li a,
#menu ul li a:visited {
    display:block;
    text-decoration:none;
    color:#000;
    width:120px;
    border-width:0px 0px 1px 0;
    background:#fff;
    font-size:10px;
    padding-left:10px;
    height: 15px;
    line-height: 15px;
}
#menu ul {
    padding:0;
    margin:0;
    list-style-type: none;
}
#menu ul li {
    float:left;
    position:relative;
    border-bottom: solid #000 thin;
}
#menu ul li ul {display: none;}

#menu table {border-collapse:collapse; border:0; margin:0; padding:0;}

#menu ul li:hover a,
#menu ul li a:hover {
    color:#000000;
    border-bottom: solid #000 thin;
}

#menu ul li:hover ul,
#menu ul li a:hover ul {display:block; position:absolute; top:0; left:130px; width:565px; background: transparent;}

#menu ul li:hover ul li,
#menu ul li a:hover ul li {float:left;}

#menu ul li:hover ul li a,
#menu ul li a:hover ul li a {display:block; color:#999999; width:130px; float:left;}

#menu ul li:hover ul li a.sub,
#menu ul li a:hover ul li a.sub {color:#000;}

#menu ul li:hover ul li a:hover,
#menu ul li a:hover ul li a:hover {color:#000;}

#menu ul li:hover ul li ul,
#menu ul li a:hover ul li a ul {visibility:hidden; position:absolute; width:200px;}

#menu ul li:hover ul li:hover ul,
#menu ul li a:hover ul li a:hover ul {visibility:visible; left:-1px; top:31px; color:#000;}

#menu ul li:hover ul li:hover ul li a,
#menu ul li a:hover ul li a:hover ul li a {display:block; width:200px; color:#000; border-left:1px solid #eee;}

#menu ul li:hover ul li:hover ul li a:hover,
#menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}

#menu ul li a#current,
#menu ul li a#current:link,
#menu ul li ul a#current,
#menu ul li ul a#current:link
{
    color: #000000;
    cursor: default;
    font-weight: bold;
    border-bottom: 1px solid #000;
    visibility:visible;
    display:block
}

#menu ul li a#current:hover
{
    border-bottom: 1px solid #000;
    color: #000000;
}


und die html:
Code: Alles auswählen
<div id="navcontainer">
            <div id="menu"><ul>
            <li id="active"><a href="vita.html" title="VITA" id="current">V I T A<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a href="vita_basics.html" title="BASICS">B A S I C S</a></li>
        <li id="active"><a href="vita_theater.html" title="THEATER" id="current">T H E A T E R</a></li>
        <li><a href="vita_film.html" title="FILM">F I L M</a></li>
        <li><a href="vita_sprache.html" title="AUDIO">S P R A C H E</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="demo.html">D E M O S
      <!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a href="demo_film.html" title="FILM">F I L M</a></li>
        <li><a href="demo_audio.html" title="AUDIO">A U D I O</a></li>
        </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="photos.html">P H O T O S <!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a href="photos_portrait.html" title="PORTRAITSPHOTOS">PORTRAITS</a></li>

        <li><a href="photos_theater.html" title="THEATERPHOTOS">THEATER</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="kontakt.html">K O N T A K T <!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    </ul>
</div>
    </div>


Da vor allem in der css sicher Fehler drinnen sind, wäre ich froh über Hinweise

Danke schon mal

LG
*R
rizzoo
neu hier
 
Beiträge: 2
Registriert: 14.05.2011, 11:06

Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "Flyout-Menü mit Current stauts"

Zurück zu: CSS für Fortgeschrittene

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste