Schwierigkeiten mit parent menu

kris9k

Hallo,

ich habe ein menü mit 2 unterpunkten also:

Hauptmenü (topnav)

-Untermenü 1 (ul)

-Untermenü 2 (ul ul)

Die css sieht so aus:

Code

Hauptmenü { 
background-color: #ff9900;
}
Hauptmenü a {
color: #fff;
}


Hauptmenü a:hover {
color: #878787;
background-color: #fff;


Untermenü 1 {
background-color: #fff;
}


Untermenü 1 a {
color: #878787;
}


Untermenü 1 a:hover {
color: #ff9900;
}


Untermenü 2 {
background-color: #fff;
}


Untermenü 2 a {
color: #878787;


Untermenü 2 a:hover {
color: #ff9900;
}


}

Alles anzeigen

Nun möchte ich, dass wenn eine Seite in den Untermenüs ausgewählt ist, die Eltern Menüpunkte die jeweilige "hover" Formatierung haben.

Meine bisherigen Gehversuche:

Code

#topnav .current-menu-ancestor {background-color: #fff;}
#topnav .current-menu-ancestor a {color: #878787;}
#topnav ul li .current-menu-item a {color: #ff9900;}
#topnav .current-menu-item {background-color: #fff;}
#topnav .current-menu-item a {color: #878787;}

Klappt so nur leider überhaupt nicht gut...

Ich hoffe ihr könnt mir dabei helfen,

mfg kris

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

kris9k

*Push*

Ich bekomme das einfach nicht zum funktionieren... Hat jemand vl. Ideen oder Ansätze für mich?

Nevery

Hast Du vielleicht mal einen Link zur Seite?
Normalerweile arbeite ich in Wordpress dabei mit current_page_item und current_page_parent, aber je nachdem wie Dein Menu erstellt wird...

kris9k

Leider nicht, die Seite werkelt in xampp.

Hier aber der gesamte Code des Menüs:

HTML

<div id="topnavi_wrap">
            <div id="topnavi">
                <ul class="menu" id="topnav"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-336" id="menu-item-336"><a href="http://localhost/testpage/">Startseite</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-733" id="menu-item-733"><a href="http://localhost/testpage/edv-losungen">EDV Lösungen</a>
<ul class="sub-menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-513" id="menu-item-513"><a href="http://localhost/testpage/edv-losungen/edv-dienstleistungen">EDV Dienstleistungen</a>
    <ul class="sub-menu">
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69" id="menu-item-69"><a href="http://localhost/testpage/edv-losungen/edv-dienstleistungen/beratung">Beratung</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-233" id="menu-item-233"><a href="http://localhost/testpage/edv-losungen/edv-dienstleistungen/support">Support</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-763" id="menu-item-763"><a href="http://localhost/testpage/edv-losungen/edv-dienstleistungen/hard-software">Hard- &amp; Software</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76" id="menu-item-76"><a href="http://localhost/testpage/edv-losungen/edv-dienstleistungen/netzwerktechnik">Netzwerktechnik</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-121" id="menu-item-121"><a href="http://localhost/testpage/edv-losungen/edv-dienstleistungen/it-sicherheit">IT-Sicherheit</a></li>
    </ul>
</li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-514" id="menu-item-514"><a href="http://localhost/testpage/edv-losungen/services">Services</a>
    <ul class="sub-menu">
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-623" id="menu-item-623"><a href="http://localhost/testpage/edv-losungen/services/systembetreuung">Systembetreuung</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-721" id="menu-item-721"><a href="http://localhost/testpage/edv-losungen/services/datenrettung">Datenrettung</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-722" id="menu-item-722"><a href="http://localhost/testpage/edv-losungen/services/virenentfernung">Virenentfernung</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-241" id="menu-item-241"><a href="http://localhost/testpage/edv-losungen/services/home-media">Home Media</a></li>
    </ul>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current_page_ancestor menu-item-has-children menu-item-35" id="menu-item-35"><a href="http://localhost/testpage/web-design">Web Design</a>
<ul class="sub-menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-515" id="menu-item-515"><a href="http://localhost/testpage/web-design/homepage">Homepage</a>
    <ul class="sub-menu">
        <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1166 current_page_item menu-item-1169" id="menu-item-1169"><a href="http://localhost/testpage/web-design/homepage/design">Design</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-516" id="menu-item-516"><a href="http://localhost/testpage/web-design/homepage/redesign-relaunch">Redesign &amp; Relaunch</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-290" id="menu-item-290"><a href="http://localhost/testpage/web-design/homepage/betreuung-wartung">Betreuung &amp; Wartung</a></li>
    </ul>
</li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-517" id="menu-item-517"><a href="http://localhost/testpage/web-design/online-marketing">Online Marketing</a>
    <ul class="sub-menu">
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-292" id="menu-item-292"><a href="http://localhost/testpage/web-design/online-marketing/suchmaschinenoptimierung">SEO</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-946" id="menu-item-946"><a href="http://localhost/testpage/web-design/online-marketing/suchmaschinenmarketing">SEM</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-518" id="menu-item-518"><a href="http://localhost/testpage/web-design/online-marketing/social-media">Social Media</a></li>
    </ul>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66" id="menu-item-66"><a href="http://localhost/testpage/unternehmen">Unternehmen</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19" id="menu-item-19"><a href="http://localhost/testpage/kontakt-anfrage">Kontakt &amp; Anfrage</a></li>
</ul>            </div>
            <div class="clear"></div>    
</div>

Alles anzeigen

Code

/*============================ TOP NAVI ============================*/
#topnavi_wrap {
    position: relative;
    width: 1000px;
    left: 50%;
    margin-left: -500px;
    background-color: #ff9900;
    z-index: 3;


}


#topnavi {
    margin: 0 auto;
    width: 1000px;
}


#topnav {
    margin: 0;
    list-style-type: none;
    list-style-position: outside;
    position: relative;
}


#topnav li{
    float:left;
    display:block;
}


#topnav a{
    display:block;
    font-size: 14px;
    text-decoration: none;
    color: #fff;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;
}


#topnav a:hover{ 
    color: #878787; 
    background-color: #fff;
}




#topnav ul {
    background-color: #FFF;
    display:none;
    z-index: 2;
    position: absolute;
    margin-left:-1px;
    width:385px;
    height: 170px;
    padding-top:10px;
    padding-right: 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
    border-bottom:6px solid #ff9900;
}


#topnav ul li {
    width: 50%;
}


#topnav ul a {
    color: #878787;
    text-transform:none;
    padding-left:0px;
    padding-right:45px;
    margin-left:20px;
    font-size:13px;
    border-bottom:1px solid #ff9900;
}


#topnav ul a:hover { 
    color:#ff9900;
    background-color:transparent;
}


#topnav ul ul { 
    width: 360px;
    height: 0px;
    background-color:transparent;
    border-bottom:0px;
}


#topnav ul ul li {
    display:block;  
    clear:left;
}


#topnav ul ul a { 
    font-size:11px;
    text-transform:none;
    border-bottom: none;
    
}






#topnav li:hover ul ul {display:block;}
#topnav li:hover ul ul ul {}
#topnav li:hover ul ul ul ul {}


#topnav li:hover ul {display:block; float:left;}
#topnav li li:hover ul {}
#topnav li li li:hover ul {}
#topnav li li li li:hover ul {}  










#topnav .current-menu-ancestor {background-color: #fff;}
#topnav .current-menu-ancestor a {color: #878787;}
#topnav ul li .current-menu-item a {color: #ff9900;}
#topnav .current-menu-item {background-color: #fff;}
#topnav .current-menu-item a {color: #878787;}






/*---------Menübuttons ID call--------*/


#menu-item-733 {border-left: 1px solid #fff;}
#menu-item-35 {border-left: 1px solid #fff;}
#menu-item-241 {border-left: 1px solid #fff;}
#menu-item-1037 {border-left: 1px solid #fff;}
#menu-item-66 {border-left: 1px solid #fff;}
#menu-item-19 {border-left: 1px solid #fff;}

Alles anzeigen

Nevery

Naja, aber vom CSS auf den PHP-/HTMLCode zu schliessen ist einfach nicht machbar.

Hast Du denn - wenn Du im Quelltext nachsiehst - die von mir erwähnten Klassen?

kris9k

Habe den Quelltext hinzugefügt.

current-menu-item und current-page-parent sind vorhanden.

Nevery

Dann ist doch alles super - die aktuelle Auswahl bekommst Du über current_page_item, den übergeordneten dazugehörigen Menüpunkt über current_page_parent, d.h. Du ergänzt current_page_parent um das gewünschte Aussehen. Soweit verständlich? :)

kris9k

ja, aber ich habe ja zwei übergeordnete Menüpunkte.

Mit current-page-parent wird hier immer nur der genau übergeordnete Menüpunkt per css formatiert. Weiters beschert mir .current-menu-item a {color:} dass die gesamte Spalte die Schriftfarbe erhält wenn ich etwas im #topnav oder im #topnav ul auswähle. Bei #topnav ul ul funktioniert es...

Ist das ab 2 übergeordneten Menüpunkten überhaupt machbar per css oder muss da eine Abfrage rein?

Nevery

Ach, die dritte Ebene habe ich völlig übersehen.
Naja, in solchen Fällen erstelle ich die Navigation von Hand und weise entsprechende CSS-Klassen zu, ne bessere Idee ist mir dazu auch noch nicht eingefallen.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Schwierigkeiten mit parent menu

Jetzt mitmachen!