An sich wirklich einfach. Jedoch möchte ich mittels CSS das Menü so gestalten, dass sich die zweite und dritte Ebene komplett von der ersten unterscheidet. Hintergrund ist der: Ich schreibe aktuell eine Prozesslandkarte und die erste Ebene soll danach aussehen. Innerhalb der Prozesslandkarte kann man die verschiedenen Abteilungen anwählen.
Ist das irgendwie möglich? Bisher sahen die Untermenüs genauso aus wie die erste Ebene.
Es müsste so doch ohne Probleme gehen, oder?:
Code
<style>
/* ab hier
Einstellungen für den vorderen Pfeil */
nav a:after {
content: "";
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #4060A5;
position: absolute; right: -40px; top: 0px;
}
/* Einstellungen für den hinteren Pfeil */
nav a:before {
content: "";
position: absolute;
margin-top: -30px;
border-width: 40px 0 40px 40px;
border-style: solid;
border-color: #4060A5 #4060A5 #4060A5 transparent;
left: -40px;
}
/* Wenn Maus über erste Ebene schwebt -> Mitte*/
nav a:hover {
background-color: #1abc9c;
display: block;
}
/* Wenn Maus über erste Ebene schwebt -> Vorderer Pfeil*/
nav a:hover:before {
border-color: #1abc9c;
border-left-color: transparent;
}
/* Wenn Maus über erste Ebene schwebt -> Hinterer Pfeil*/
nav a:hover:after {
border-left-color: #1abc9c;
}
/*test code
nav{
border:1px solid red;
}
ul{
border:1px solid green;
}
li{
border:1px solid blue;
}
a{
border:1px solid yellow;
}
*/
/* ab hieer fängt erst das submenue an ,alles davor ist unberührt geblieben*/
ul,li{
list-style:none;
}
nav {
margin-top: 20px;
margin-left: 70px;
}
nav li a{
display: block;
height: 50px;
background: #4060A5;
text-align: center;
padding: 30px 30px 0 30px;
position: relative;
top: 20px;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 20px;
text-decoration: none;
width:220px;
color: #fff;
}
nav ul li ul li,
nav ul li ul li ul,
nav .level1 li:hover ul li a:before,
nav .level1 li:hover ul li a:after{
display:none;
}
nav ul li ul li:hover ul,
nav ul li:hover ul li{
display:block;
}
.level2{
position:relative;
left:-50px;
}
.level3{
position:relative;
left:-40px;
}
/*ebene 2 <a> stylen*/
nav .level1 li:hover ul li a{
border:1px solid white;
background:green;
color:blue;
font-size:12px;
}
/*ebene 3 <a> Tag stylen */
nav .level2 li:hover ul li a{
border:1px solid orange;
background:red;
border-radius:20px;
color:black;
font-weight:900;
font-size:11px;
}
/* hier noch etwas basti1012 übliche spielerrei */
nav .level2 li:hover ul li a:hover{
animation:blink 1s linear infinite;
}
@keyframes blink{
0%,50%{
color:red;
}
51%,100%{
color:yellow;
}
}
nav .level2 li:hover ul li:nth-child(2) a:hover{
animation:blink2 1s linear infinite;
}
@keyframes blink2{
0%,50%{
background:red;
color:yellow;
}
51%,100%{
background:yellow;
color:red;
}
}
</style>
<body>
<nav class="nav">
<ul class="level1">
<li><a href="#">Verwaltung</a>
<ul class="level2">
<li><a href="#">level 2</a></li>
<li><a href="#">level 2 >> </a>
<ul class="level3">
<li><a href="#">level 3</a></li>
<li><a href="#">level 3</a></li>
</ul>
</li>
</ul>
</li>
<li id="test"><a href="#">Beschaffung</a></li>
</ul>
</nav>
</body>