Mit Javscript wäre alles einfacher (?)

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

eine Glühbirne ist eine von Wespen ausgehöhlte Frucht, in der Glühwürmchen eine Party feiern.

Immer diese Leute, die sich am Begriff für elektrisches Fallobst stoßen, tsts.

Allerhöchstens brauchst du ein Div, um die Liste mit einer Überschrift zu kombinieren.

<div id="nav">

Das 'div'-Element darf in HTML5 dann auch ein 'nav'-Element sein.

~~~html

<h3>Hier gehts lang</h3>

<ul>
    <li><a href="...">Seite1</a></li>
    <li>aktuelle Seite</li>
    <li><a href="...">Seite3</a></li>
    <li><a href="...">Seite4</a></li>
    <li id="lampe"></li>
  </ul>
</div>

>   
> Es ist wichtig, dass die Lampe als letztes in der Liste steht  
  
Warum sollte sie? Was hat sie überhaupt in der Liste zu suchen? Zusätzliches Markup für visuelle Effekthascherei? Wie uncool!  
  
~~~html
<nav>  
  <ul>  
    <li><a href="...">Seite1</a></li>  
    <li>aktuelle Seite</li>  
    <li><a href="...">Seite3</a></li>  
    <li><a href="...">Seite4</a></li>  
  </ul>  
</nav>

Stylesheet:

nav  
{  
	position: relative;  
	width: 240px;  
}  
  
nav ul  
{  
	list-style: none;  
	padding: 0;  
}  
  
nav li  
{  
	float: left;  
	margin: 0;  
	padding: 0;  
	width: 42px;  
}  
  
nav li:last-child  
{  
	float: right;  
}  
  
nav::after, nav a:hover::after  
{  
	background: url(glühbirne.png);  
	content: '\A0';  
	display: block;  
	height: 42px;  
	position: absolute;  
	right: 42px;  
	top: 0;  
	width: 42px;  
}  
  
nav a:hover::after  
{  
	background-position: 0 42px;  
	z-index: 1;  
}

Qapla'