Einzelnen Beitrag anzeigen
  #3 (permalink)  
Alt 26.01.2017, 18:33
interessierte interessierte ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.01.2017
Beiträge: 4
interessierte befindet sich auf einem aufstrebenden Ast
Standard

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:

Mit Zitat antworten