Hi, kurze Frage.
ich möchte gerne, dass in meinem vertikalem Menü, sich alle Untermenüs ausklappen, wenn ich mit dem Mauszeiger über einen Menüeintrag fahre.
Hab einen Code geschrieben, der nur leider nicht so recht funktionieren will. Habt Ihr ne Idee, was ich falsch gemacht habe?
Gruß.
CSS-Datei
Menü:
ich möchte gerne, dass in meinem vertikalem Menü, sich alle Untermenüs ausklappen, wenn ich mit dem Mauszeiger über einen Menüeintrag fahre.
Hab einen Code geschrieben, der nur leider nicht so recht funktionieren will. Habt Ihr ne Idee, was ich falsch gemacht habe?
Gruß.
CSS-Datei
CSS:
...
/*-------------------------------- Features of Main-Menu --------------------------------*/
.menu ul{
bottom: 3px;
margin: 0;
padding: 0;
width: 140px; /* width of menu */
list-style-type: none;
}
.menu ul li a{
position:relative;
z-index: 2;
top: -926px;
background: #040B66 no-repeat right top; /*color of menu by default -> kräftiges Blau*/
font: bold 17px "Lucida Grande", "Trebuchet MS", Verdana; /*Schrifttype*/
display: block;
width: 120px;
padding: 10px; /*Vertical padding for each menu link (Padding = Hhöhe)*/
text-indent: 25px; /*Schrift in Menü positionieren horizontal*/
text-decoration:none;
border-bottom: 10px solid #8AB0D9; /*bottom border of menu link. Should be equal or darker to link's bgcolor*/
}
.menu ul li a:visited, .menu ul li a:active{
color: #BDD6F0; /*Schriftfarbe des Menüs -> hellblau*/
}
.menu ul li a:hover{
background-color:#999; /*color of menu onMouseover -> hellgrau */
/*border-bottom: 6px solid #BDD6F0 ; /*bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor*/
}
/*-------------------------------- Features of Sub-Menu --------------------------------*/
.menu ul ul li a{
float:none;
position:absolute;
display: block;
top:30px;
left:100%;
background: #8AB0D9 no-repeat right top; /*color of menu by default -> hellblau*/
font: bold 17px "Lucida Grande", "Trebuchet MS", Verdana; /*Schrifttype*/
width: 130px;
padding: 5px; /* Vertical padding for each menu link (Padding = Hhöhe)*/
text-indent: 25px;
text-decoration:none;
border-bottom: 6px solid #BDD6F0; /*bottom border of menu link. Should be equal or darker to link's bgcolor*/
color:#040B66;
}
.menu ul li > ul{
display:block;
}
.menu ul li:hover > ul{
display:none;
}
.menu ul ul li a:visited, .menu ul ul li a:active{
float:none;
color:#040B66; /*Schriftfarbe des Menüs -> dunkelblau*/
}
.menu ul ul li a:hover{
float:none;
display:block;
background-color:#999; /*color of menu onMouseover -> hellgrau */
border-bottom: 6px solid #BDD6F0 ; /*bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor*/
}
...
Menü:
HTML:
...
<nav>
<div class="LogoHeader">
<img src="Image/Web-Ecke-Logo2.jpg" />
</div>
<!-- Inhalt des Layout-Headers-->
<div class="LayoutHeader">
<!--img src="apache_pb.gif" /-->
Ueberschriftenzeile
</div>
<div class="HorizontalLine"></div>
<div class="VerticalLine"></div>
<!-- Inhalt des Layout-Content-->
<div class="menu_content">
<?php
//Dateinamen aus dem Link nehmen anhängen
if(isset( $_GET['page'] ))
{
$myPage = $_GET['page'];
include($myPage);
}
?>
</div>
<!-- Menüleiste-->
<div class="menu ul">
<div class="LeftStack"></div>
<ul>
<li><a href="">Mitarbeiter</a></li>
<ul>
<li><a href="menu.php?page=Eingabe.php">Eingabe</a></li>
<li><a href="menu.php?page=MA-Update.html">Bearbeitung</a></li>
<li><a href="menu.php?page=MA-Ausgabe.php">Ausgabe</a></li>
</ul>
<li><a href="">Kategorie 2</a></li>
<li><a href="">Kategorie 3</a></li>
<li><a href="">Kategorie 3</a></li>
</ul>
</div>
</nav>
Zuletzt bearbeitet: