Hi,
JR Colognes und Basis Meinung bin ich auch.
bzw.. brauch doch noch hilfe..
Ich habe es gestern getestet hat ja zeitweise auch funktioniert aber nun ist das Problem wieder da.
hier mein überarbeitetes script:
CSS
div#navigation
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 38px;
background-color: black;
}
ul
{
padding: 0px;
margin: 0px;
list-style-type: none;
}
li.top
{
display: inline-block;
font-weight: bold;
text-align: center;
width: 120px;
}
li.untermenu
{
list-style-type: none;
font-weight: 100;
padding-top: 5px;
width: 120px;
}
a
{
text-decoration: none;
color: aqua;
display: block;
padding: 10px 0px;
}
.untermenu a
{
color: black;
}
ul#down
{
display: none;
}
ul#down1
{
display: none;
}
ul#down2
{
display: none;
}
li.top a:hover
{
color: yellow;
background-color: gray;
}
.top:hover #down {
display:block;
background-color: blue;
position: relative;
top: -2px;
}
.top:hover #down1 {
display:block;
background-color: blue;
position: relative;
top: -2px;
}
.top:hover #down2 {
display:block;
background-color: blue;
position: relative;
top: -2px;
}
li.untermenu a:hover
{
background-color: antiquewhite;
color: black;
position: relative;
top: -5px;
}HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title> Test Webseite von Stef</title>
<link href="index.css" rel="stylesheet" type="text/css">
<link rel="icon" href="icons/favicon.jpg" type="img/jpg"> <!-- Favicon eingebunden -->
</head>
<body>
<!--Navigation -->
<div id="navigation">
<nav>
<ul class="menu">
<li class="top"><a href="#">Home</a>
<ul id="down">
<li class="untermenu"><a href="#">Über uns</a></li>
<li class="untermenu"> <a href="#">Leistungen</a></li>
<li class="untermenu"><a href="#">Websprachen</a></li>
</ul>
</li>
<li class="top"><a href="#">Slideshow</a>
<ul id="down1">
<li class="untermenu"><a href="#">Sommer</a></li>
<li class="untermenu"><a href="#">Winter</a></li>
<li class="untermenu"><a href="#">Herbst</a></li>
</ul>
</li>
<li class="top"><a href="#">Bildergalerie</a>
<ul id="down2">
<li class="untermenu"><a href="#">Lieblingsbilder</a></li>
<li class="untermenu"><a href="#">Tierbilder</a></li>
<li class="untermenu"><a href="#">Schulbilder</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>Wenn ich einnen überpunkt hover dann werden die unterpunkte aufgelistet aber die anderen überpunkte gehen da mit , siehe Bild : http://prntscr.com/bkg9f0
Ich habe gestern es schon gelöst habe aber mein script jetzt nicht gespeichert 
Wie macht man es jetzt nochmal, dass die überpunkte da bleibe wo sie sind und nicht mit runter gehen.
Stef
Habs geschaft funktioniert nun alles so wies sein soll.
Nun noch ein Anliegen ich möchte dass wenn man auf ein obermenu geht ein pfeil 90 degrees rotatet wird und dann beim verlassen diesem soll dieser pfeil wieder 90 degrees zurückrotatet werden.
Ich habe das 1. rotaten mit 90 degrees schon gemacht aber wie das zurückdrehen geht weis ich nicht wie es geht.
Wäre sehr gut wenn ihr mir da noch helfen könnt!
Meine codes:
CSS
div#navigation
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 40px;
background-color: black;
}
#navigation ul
{
padding: 0px;
margin: 0px;
list-style-type: none;
}
#navigation li.top
{
float: left;
}
.top a
{
float: left;
width: 120px;
text-align: center;
padding: 10px 0px;
color: aqua;
text-decoration: none;
}
.untermenu a
{
color: cyan;
text-decoration: none;
width: 120px;
padding: 10px 0px;
margin: 0px;
float:left;
background-color: rgba(0, 0, 0, 0.7);
clear:both;
}
.top ul
{
display: none;
}
li.top a:hover
{
color: yellow;
background-color: rgba(5, 255, 218, 0.8);
}
.top:hover ul
{
display:block;
}
li.untermenu a:hover
{
background-color: rgba(0, 0, 70, 1);
color: chartreuse;
font-weight: 900;
}
.top:hover .drop {
background-color: blue;
color: yellow;
height: 20px;
}
span.zusatz
{
position: relative;
display: block;
top: -15px;
left: 50px;
color: white;
}
a.drop:hover span
{
transition: all 0.5s ease-in;
transform: rotate(90deg);
}HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title> Test Webseite von Stef</title>
<link href="index.css" rel="stylesheet" type="text/css">
<link rel="icon" href="icons/favicon.jpg" type="img/jpg"> <!-- Favicon eingebunden -->
</head>
<body>
<!--Navigation -->
<div id="navigation">
<nav>
<ul>
<li class="top">
<a href="#" class="drop">Home <span class="zusatz">></span></a>
<div class="down">
<ul>
<li class="untermenu"><a href="#">Über uns</a></li>
<li class="untermenu"> <a href="#">Leistungen</a></li>
<li class="untermenu"><a href="#">Websprachen</a>
</li>
</ul>
</div>
</li>
<li class="top">
<a href="#" class="drop">Slideshow
<span class="zusatz">></span>
</a>
<div class="down">
<ul>
<li class="untermenu"><a href="#">Sommer</a></li>
<li class="untermenu"><a href="#">Winter</a></li>
<li class="untermenu"><a href="#">Herbst</a></li>
</ul>
</div>
</li>
<li class="top"><a href="#" class="drop">Bildergalerie <span class="zusatz">></span> </a>
<div class="down">
<ul>
<li class="untermenu"><a href="#">Lieblingsbilder</a></li>
<li class="untermenu"><a href="#">Tierbilder</a></li>
<li class="untermenu"><a href="#">Schulbilder</a></li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
</body>
</html>Gruß, Stef
