✔ Problem beim Stylen von zweitem Listenpunkt

[Jan-Frederik Stieler]

Hi,
hab mal wieder ein Problem was ich nicht verstehe.
Warum wird der zweite Listenpunkt nicht mit dem entsprechenden PNG versehen sondern mit dem des darüber liegenden Listenpunktes?

<div class="moduletable">
<ul id="mainlevel">
<li>
<a id="active_menu" class="mainlevel_current" href="/joomla1.5_birkenhof/index.php?option=com_content&view=section&id=1&Itemid=56">LANDWIRTSCHAFT.</a>
</li>
<li>
<a class="mainlevel" href="/joomla1.5_birkenhof/index.php?option=com_content&view=section&id=2&Itemid=62">HOFLADEN.</a>
</li>
</ul>
</div>

ul#mainlevel
{
	list-style-type: none;
}

ul#mainlevel li, ul#mainlevel li li
{
	display: inline;
	float: left;
}

ul#mainlevel li a.mainlevel
{
	display: block; 
	padding: 10px 0 10px 7px; 
	color: #000;
	text-decoration: none;
	
	background-image: url(http://localhost/joomla1.5_birkenhof/images/menue_images/id56.png);
	background-repeat: no-repeat;
}

ul#mainlevel li a.mainlevel:hover, ul#mainlevel li a.mainlevel_current
{
	display: block; 
	padding: 10px 0 10px 7px; 
	color: #000;
	text-decoration: none;
	
	background-image: url(http://localhost/joomla1.5_birkenhof/images/menue_images/id56_hover.png);
	background-repeat: no-repeat;
}

ul#mainlevel li li a.mainlevel
{
	display: block; 
	color: #000;
	padding: 10px 0 10px 7px; 
	text-decoration: none;
	background-image: url(http://localhost/joomla1.5_birkenhof/images/menue_images/id62.png);
	background-repeat: no-repeat;
}

ul#mainlevel li li a.mainlevel:hover, ul#mainlevel li li a.mainlevel_current
{
	display: block; 
	padding: 10px 0 10px 7px; 
	color: #000;
	text-decoration: none;
	background-image: url(http://localhost/joomla1.5_birkenhof/images/menue_images/id62_hover.png);
	background-repeat: no-repeat;
}

Viele Grüße

 

[Maik]

Hi,

dieser Selektor

ul#mainlevel li li a.mainlevel

setzt voraus, dass das <li>-Element ein <li>-Element als Nachfolgeelement besitzt, in dem ein <a>-Element mit der Klasse mainlevel eingebettet ist.

Dem ist aber nicht so, sondern beide <li>-Elemente sind benachbarte Elemente im <ul>-Element.

mfg Maik

 

[Jan-Frederik Stieler]

Achso das funktioniet also nur wenn das zweite <li> im ersten <li> verschachtelt ist.
Gibts ne Möglichkeit das zweite <li> anzusprechen ohne das es eine zusätzliche Klasse bzw. ID bekommt?

Gruß

 

[Maik]

Hierfür gibt's den Selektor für benachbarte Elemente.

ul#mainlevel li + li  a.mainlevel

mfg Maik

 

[Jan-Frederik Stieler]

Dankeschön wieder was gelernt. Und hoffentlich nicht so bald wieder vergessen .

Grüße
Jan

 

[Maik]

Ansonsten nochmal artig mit dem Finger schnippen

Falls du hier den IE6 berücksichtigen willst, sei darauf hingewiesen, dass er u.a. auch diesen Selektor nicht unterstützt.

Abhilfe schafft hier aber ie7-js.

mfg Maik