Hi,
Ich weiß garnicht genau wo ich im Code was ändern muss um ein Dropdown Menü zu erstellen. Mein bestes Ergebnis ist das:
CSS
Code:
nav
.outer{
width: 150px;
height: 55px;
margin: 0px;
overflow-x:hidden;
position: relative;
float: left;
margin-right: 10px;
border-radius:50px;
}
.inner{
width: 300px;
height: 55px;
margin: 0px;
font:bold 16px/50px "arial";
position: absolute; right: 0;
color:white;
text-align: right;
text-decoration: none;
white-space: pre;
transition: width .7s, color .7s;}
.inner2{
position: absolute;
width: 300px;
height: 55px;
font:bold 16px/50px "arial";
margin: 00px;
right: 0;
color:white;
text-align: right;
text-decoration: none;
white-space: pre;
transition: width .7s, color .7s;float: none;
display: block;}
.inner ul ul li{
float: none;
display: block;}
.inner:before{
content:"";
position: absolute;
width: 178px;
height: 45px;
right: 5px;
top: 5px;
border-radius:50px;
border:1px dashed #333;
}
.inner2:before{
content:"";
position: absolute;
width: 178px;
height: 45px;
right: 5px;
top: 5px;
border-radius:50px;
border:1px dashed #333;
}
.color1{background:linear-gradient(60deg, deepskyblue 150px,#333 180px, #333);}
.inner:hover{
width: 200px;
color: black;}
.inner2:hover{
width: 200px;
color: black;}
und
HTML-Code:
<nav>
<ul>
<ul class="outer">
<li><a href="#" class="inner color1">menu Item 1 </a></div>
</li>
<ul>
<li><a href="#" class="inner2 color1">menu Item 1,1 </a>
</li>
</div>
</ul>
</nav>
dann sieht es so aus: