Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 16.06.2010, 21:39
Benutzerbild von wandler
wandler wandler ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.01.2006
Beiträge: 48
wandler befindet sich auf einem aufstrebenden Ast
Standard Kindelement eines ausgeblendeten Elternelementes ansprechen

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
__________________
Coden ist keine Esoterik, also lasst uns an eurem Wissen teilhaben ihr Gurus
Mit Zitat antworten
Sponsored Links