Menü bei aktivem Element des Dropdowns ausgeklappt lassen

Caphalor · 16.07.2010

Hallo miteinander,

ich habe gerade folgende Situation: Ich habe eine horizontale Navigation in Joomla, beim Hover über einen Link wird ein Submenü ausgeklappt.

Wenn ein Link im Submenü angeklickt wird (und man sich dann auf der entsprechenden Seite befindet) bekommt der Link eine ID zugeteilt, nämlich #current.

(Hier ein Beispiel, dass ich eben noch gefunden habe: http://www.cssplay.co.uk/menus/dropl...-override.html, jedoch ist das nicht mit Joomla sondern "manuellem" Code )

Ich hätte jetzt gerne, dass das Menü immer offen bleibt sobald im Submenü die ID #current zugeteilt wurde.

Hier mal mein CSS:

Code:

#main_nav {
    float:right;
    margin-top:47px;
    }

    
#main_nav .menu {
    margin:0px;
    list-style: none;
    }

#main_nav .menu li{
    float:left;
    margin:13px;
    }

#main_nav .menu #current {
    background: url(../images/navi_head_active.jpg    );
     background-repeat:no-repeat;
    background-position:bottom center;
    font-weight:normal;
    }

#main_nav .menu a {
    display:block;
    text-align:center;
    padding: 1em;
    color:#ffffff;
    text-decoration:none;
    text-transform: uppercase;
    font-size:11px;
    background: url(../images/bg_navi_head.jpg);
     background-repeat:no-repeat;
    background-position:right;
    }

    
#main_nav .menu a:hover {    
    color:#dedede;
    background: url(../images/bg_header_aktiv.jpg);
    background-repeat:no-repeat;
    background-position:center bottom;
    }
    
    
#main_nav .menu li{
    position: relative;
    }    
    
/*SUB NAVIGATION */         
#main_nav .menu ul{ /* Submenü ausblenden */
    position:absolute;
    right:9999px;
    list-style: none;
    width:800px;
    }
    
    
#main_nav .menu li:hover ul{ /* Submenü einblenden */
    right:0;
    }    
    
    
#main_nav .menu ul li{
    float:right;
    margin:0px;
    padding:0px;
    }
    
#main_nav .menu ul li a{    
    display:block;
    margin:0px;
    padding: 8px 12px 0 12px;
    color:#333027;
    background: #ffffff;
    text-transform:none;
    height:23px;
    border-right:1px solid #efefef;
    }

#main_nav .menu li ul  #current {
    right:0;
    }
    
#main_nav .menu ul .item51 a, 
#main_nav .menu ul .item51 a:hover{
    background: #ffffff url(../images/bg_header_sub_left.jpg);
     background-repeat:no-repeat;
    background-position:left top;
    }
    
#main_nav .menu ul .item48 a, 
#main_nav .menu ul .item48 a:hover{
    background: #ffffff url(../images/bg_header_sub_right.jpg);
     background-repeat:no-repeat;
    background-position:right top;
    }
    
#main_nav .menu ul li a:hover{    
    background: #ffffff;
    color:#4d6268;
    }

#main_nav .menu ul #current{
    background:#ffffff;
    font-weight:bold;
    }

Aus Joomla wird folgender HTML-Code generiert:

HTML:

<div id="main_nav">
    <div class="moduletable_main_nav">
        <ul class="menu">
            <li class="parent active item2"><a href="#"><span>Die Sendung</span></a>
                <ul>
                    <li class="item48"><a href="#"><span>Informationen zur Sendereihe</span></a></li>
                    <li id="current" class="active item49"><a href="#"><span>Sendungsvorschau</span></a></li>
                    <li class="item50"><a href="#"><span>Sendungsarchiv</span></a></li>
                    <li class="item51"><a href="#"><span>Sendetermine</span></a></li>
                </ul>
            </li>
            <li class="item3"><a href="#"><span>Item</span></a></li>
            <li class="item4"><a href="#"><span>Item2</span></a></li>
            <li class="item5"><a href="#"><span>Hörfunk</span></a></li>
        </ul>
    </div>
</div>

Ich habe bisher folgendes versucht, jedoch vollkommen ohne Wirkung :

Code:

#main_nav .menu li ul  #current {
    right:0;
    }

#main_nav .menu li ul #current {

Code:

right:0;
position:absolute;
    }

Wäre nett wenn mir jemand weiterhelfen könnte.

Stefan · 17.07.2010

Hallo Caphalor,

was spricht dagegen, einfach

Code:

#main_nav .menu li[B].active[/B] ul{
    right:0;
}

zu verwenden?

Menü bei aktivem Element des Dropdowns ausgeklappt lassen

Caphalor

Stefan

Menü bei aktivem Element des Dropdowns ausgeklappt lassen

ANGEBOTE & SPONSOREN

Neueste Beiträge

Statistik des Forums