Submenü anders gestalten
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?:
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<style>
nav{
width:100%;
height:50px;
border:2px solid red;
}
ul{
margin:0;
padding:0;
}
nav>li{
width:33%
}
/* alle level*/
li{
float: left;
list-style-type: none;
background-color: blue;
line-height:50px;
margin-right:1px;
text-align:center;
position: relative;
}
ul>li{
width:100%;
}
li > a{
text-decoration: none;
color: white;
display:block;
padding: 0 10px;
}
.level2,.level3{
display:none;
position: absolute;
font-style:italic;
}
.level1 li> a:hover{
background-color: orange;
}
.level2 li a:hover{
background-color: red;
}
.level3 li a:hover{
background-color: black;
}
.level1 > li:hover>.level2{
display:block;
}
.level2 > li:hover>.level3{
display:block;
margin-left:100px;
margin-top:-30px;
}
nav .level21 li{
border: 2px solid black;
font-size:25px;
border-radius:20px;
}
nav .level21 li>a{
color:orange;
}
nav .level22 li{
border-top: 2px solid white;
font-size:12px;
border-radius:12px;
background:green;
}
nav .level3 li>a{
color:red;
fomt-weight:900;
font-size:30px;
}
nav .level22 li .level33{
border: 5px solid red;
color:black;
font-size:12px;
border-radius:2px;
background:green;
}
</style>
<nav class="level1">
<li><a href="#">Home</a></li>
<li><a href="#">mit level 2</a>
<ul class="level2 level21">
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
<li><a href="#">level 2</a></li>
</ul> </li>
<li><a href="#">mit level 3</a>
<ul class="level2 level22">
<li><a href="#">level 2</a></li>
<li><a href="#">level 2 >> </a>
<ul class="level3 level33">
<li><a href="#">level3</a></li>
<li><a href="#">level 3</a></li>
</ul>
</li>
</ul>
</nav>