Kindelement eines ausgeblendeten Elternelementes ansprechen

wandler · #1 (**permalink**) 16.06.2010, 20:39

Hallo,

ich habe ein CSS Drop-Down-Menü (über eine Unsortierte Liste) für den Einsatz in WordPress.
So weit so gut, nun möchte ich aber die Liste als Widget von WordPress verwalten lassen, dummerweise produziert WordPress eine Überschrift die auch als Listenelement eingesetzt wird (oberste Ebene). Sicher ich könnte den PHP-Code im Template so ändern, dass die Liste ohne Überschrift anfängt, allerdings könnte ich dann nicht (über ein Plugin) diverse Seiten ausschließen.

Lange Rede, kurzer Frage, ich will per CSS das Kindelement eines ausgeblendeten Elternelementes ansprechen, aber wie?

Hier mein HTML-Code:

HTML-Code:

  <div id="menu">
    <ul>
      <li>
        <h4>Navigation</h4>
        <ul>
          <li><a href="http://localhost/WordPress/system/wordpress" title="Startseite">Startseite</a></li>
          <li><a href="http://localhost/WordPress/system/wordpress/seite-2/" title="Seite 2">Seite 2</a></li>
          <li><a href="http://localhost/WordPress/system/wordpress/seite-3/" title="Seite 3">Seite 3</a>
            <ul>
              <li><a href="http://localhost/WordPress/system/wordpress/seite-3/seite-4/" title="Seite 4">Seite 4</a></li>
              <li><a href="http://localhost/WordPress/system/wordpress/seite-3/seite-5/" title="Seite 5">Seite 5</a></li>
            </ul>
          </li>
          <li><a href="http://localhost/WordPress/system/wordpress/seite-6/" title="Seite 6">Seite 6</a></li>
          <li><a href="http://localhost/WordPress/system/wordpress/seite-7/" title="Seite 7">Seite 7</a>
            <ul>
              <li><a href="http://localhost/WordPress/system/wordpress/seite-7/seite-8/" title="Seite 8">Seite 8</a></li>
              <li><a href="http://localhost/WordPress/system/wordpress/seite-7/seite-9/" title="Seite 9">Seite 9</a>
                <ul>
                  <li><a href="http://localhost/WordPress/system/wordpress/seite-7/seite-9/seite-10/" title="Seite 10">Seite 10</a></li>
                  <li><a href="http://localhost/WordPress/system/wordpress/seite-7/seite-9/seite-11/" title="Seite 11">Seite 11</a></li>
                </ul>
              </li>
              <li><a href="http://localhost/WordPress/system/wordpress/seite-7/seite-12/" title="Seite 12">Seite 12</a></li>
            </ul>
          </li>
          <li><a href="http://localhost/WordPress/system/wordpress/seite-13/" title="Seite 13">Seite 13</a></li>
          <li><a href="http://localhost/WordPress/system/wordpress/seite-14/" title="Seite 14">Seite 14</a></li>
        </ul>
      </li>
    </ul>
  </div>

Und mein Stylesheet für das Menü:

Code:

#menu {
	margin: 0;
	padding: 0;
	width: 980px;
	height: 31px;
	background: #3366FF;
	font-size: 76%;
}
#menu ul {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
}
#menu li {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
}
#menu a {
	text-decoration: none;
}
#menu li a, #menu li a:link, #menu li a:visited {
	color: #66CCCC;
	display: block;
	margin: 0;
	padding: 8px 15px 8px 15px;
}
#menu li a:hover, #menu li a:active {
	background: #0000CC;
	color: #fff;
	margin: 0;
	padding: 8px 15px 8px 15px;
	text-decoration: none;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
	background: #6666FF;
	width: 150px;
	color: #77A8E8;
	float: none;
	margin: 0;
	padding: 8px 10px 7px 10px;
	border-bottom: 1px solid #293F6F;
}
#menu li li a:hover, #menu li li a:active {
	background: #0000CC;
	color: #fff;
	padding: 8px 10px 7px 10px;
}
#menu li ul {
	z-index: 9999;
	position: absolute;
	left: -999em;
	height: auto;
	width: 170px;
	margin: 0;
	padding: 0;
}
#menu li ul a { 
	width: 140px;
}
#menu li ul ul {
	margin: -28px 0 0 170px;
}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
	left: -999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul {
	left: auto;
}
#menu li:hover, #menu li.sfhover { 
	position: static;
}

Wie kann ich also das oberste Listenelement ausschließen?

Schon mal vielen Dank im Voraus
wandler

heiko_rs · #2 (**permalink**) 17.06.2010, 12:47

Rein inhaltlich ist diese Überschrift sinnvoll, also lässt Du sie nicht per display: none; verschwinden, sondern per

Code:

#menu h4 {
position: absolute;
top: -9999px;
left: -9999px;
}

wandler · #3 (**permalink**) 17.06.2010, 15:57

Hallo heiko_rs,

so geht es leider nicht, so entferne ich die erste Ebene der Unsortierte Liste, so das alle Kindelemente auch nicht mehr angezeigt werden!
Ich habe das auch so probiert, aber ich kann das Kindelement eines ausgeblendeten Elternelementes nicht spezifisch ansprechen.
Wer hat eine Lösung für so was?

heiko_rs · #4 (**permalink**) 17.06.2010, 16:01

Zitat:

Zitat von wandler

so entferne ich die erste Ebene der Unsortierte Liste

Nein, #menu h4 spricht die h4 an und sonst nix.

wandler · #5 (**permalink**) 17.06.2010, 16:11

Zitat:

Zitat von heiko_rs

Nein, #menu h4 spricht die h4 an und sonst nix.

Aber dann habe ich eine leere Liste und das Menü ist nicht mehr ansprechbar!

heiko_rs · #6 (**permalink**) 18.06.2010, 02:15

Wie kommst Du denn darauf? Die Subnavi ist doch kein Kindelement der h4! Hast Du meinen Code wenigstens mal ausprobiert? Das einzige, was er ausblendet, ist rot markiert:

Code:

  <div id="menu">
    <ul>
      <li>
        <h4>Navigation</h4>
        <ul>
          <li><a href="http://localhost/WordPress/system/wordpress" title="Startseite">Startseite</a></li>
          <li><a href="http://localhost/WordPress/system/wordpress/seite-2/" title="Seite 2">Seite 2</a></li>
          <li><a href="http://localhost/WordPress/system/wordpress/seite-3/" title="Seite 3">Seite 3</a>
            <ul>
              <li><a href="http://localhost/WordPress/system/wordpress/seite-3/seite-4/" title="Seite 4">Seite 4</a></li>
              <li><a href="http://localhost/WordPress/system/wordpress/seite-3/seite-5/" title="Seite 5">Seite 5</a></li>
            </ul>
          </li>
          <li><a href="http://localhost/WordPress/system/wordpress/seite-6/" title="Seite 6">Seite 6</a></li>
          <li><a href="http://localhost/WordPress/system/wordpress/seite-7/" title="Seite 7">Seite 7</a>
            <ul>
              <li><a href="http://localhost/WordPress/system/wordpress/seite-7/seite-8/" title="Seite 8">Seite 8</a></li>
              <li><a href="http://localhost/WordPress/system/wordpress/seite-7/seite-9/" title="Seite 9">Seite 9</a>
                <ul>
                  <li><a href="http://localhost/WordPress/system/wordpress/seite-7/seite-9/seite-10/" title="Seite 10">Seite 10</a></li>
                  <li><a href="http://localhost/WordPress/system/wordpress/seite-7/seite-9/seite-11/" title="Seite 11">Seite 11</a></li>
                </ul>
              </li>
              <li><a href="http://localhost/WordPress/system/wordpress/seite-7/seite-12/" title="Seite 12">Seite 12</a></li>
            </ul>
          </li>
          <li><a href="http://localhost/WordPress/system/wordpress/seite-13/" title="Seite 13">Seite 13</a></li>
          <li><a href="http://localhost/WordPress/system/wordpress/seite-14/" title="Seite 14">Seite 14</a></li>
        </ul>
      </li>
    </ul>
  </div>

wandler · #7 (**permalink**) 18.06.2010, 17:28

Zitat:

Zitat von heiko_rs

Wie kommst Du denn darauf? Die Subnavi ist doch kein Kindelement der h4! Hast Du meinen Code wenigstens mal ausprobiert? Das einzige, was er ausblendet, ist rot markiert:

Hallo,

ja ich habe natürlich alles ausprobiert.
Vielleicht ist das Missverständnis, dass es sich um ein "Horizontales Dropdown-Menü" handelt.
Ich habe nun mal den Code der Navigation als Beispiel abgelegt.

Ohne Überschrift H4 im Quellcode sieht es so aus (was optisch richtig ist).

Mit der Überschrift sieht es leider jetzt so aus.

Und wenn ich H4 entferne, dann habe ich eine leere Liste und das Menü ist nicht mehr ansprechbar!

Vielleicht kannst du mich so besser verstehen.
Danke

heiko_rs · #8 (**permalink**) 19.06.2010, 01:32

Dann musst Du dafür sorgen, dass li ohne die h4 nicht zusammenschrumpft - eine simple Methode wäre z.B. pos. rel. statt abs. für h4 (left bleibt).

Aber Du weißt schon, dass dieses Markup keinen Sinn ergibt? Korrekt wäre die h4 außerhalb der Navi-ul.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
zweites Kindelement ansprechen	*pi	CSS	4	29.12.2008 16:18
bestimmte input felder ansprechen	blackhawk3000	CSS	7	18.08.2008 23:08
Element label über id ansprechen	Evoli	CSS	8	28.08.2007 13:36