Hi,
eigentlich dachte ich, meine Idee ist relativ einfach umzusetzen, jedoch habe ich mich geirrt, deshalb bitte ich um eure Hilfe.
Ich habe eine Liste mit Elementen (wird gefloatet und hat einen Rahmen) und in diesem Elementen gibt es eine Box, welche über die aktuelle und das nächste Element erscheinen soll.
Folgenden Code verwende ich hierfür:
HTML-Code:
<html>
<head>
<style>
li{
float:left;
list-style:none;
border:1px blue solid;
padding:15px;
position:relative;
z-index:5;
background-color:yellow;
}
li div {
background-color:red;
height:30px;
width:30px;
position:absolute;
z-index:10;
right:-10px;
}
</style>
</head>
<body>
<ul>
<li>Menu1<div></div></li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
</body>
</html>
Leider erscheint aber die Box UNTER dem nächsten Element (Siehe Screenshot). Habt ihr irgendwelche Tricks auf Lager? Bitte zu beachten, dass der HTML-Code nicht geändert werden kann, bzw. nicht soll.
LG & vielen, vielen Dank im Voraus,
Oliver