Aligning back arrow with dropdown - HTML CSS CSS Form

HTML CSS examples for CSS Form:input select

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input select

Description

Aligning back arrow with dropdown

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.back-arrow-left {
   float: left;
   width: 0;
   height: 0;
   border-top: 30px solid transparent;
   border-bottom: 30px solid transparent;
   border-right:30px solid gray;
   vertical-align: top;
}
.back-arrow-left:hover {
   border-right:30px solid red;
}
#portfolio{<!--   w ww.  jav  a 2 s  . c om-->
   width: 400px;
   float: right;
}
*{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}
.float-right{
   float: right;
}
.fa{
   font-size: .8em;
   line-height: 22px !important;
}
dropdown{
   display: inline-block;
   margin: 0px 50px;
}
dropdown label, dropdown ul li{
   display: block;
   width: 200px;
   background: #ECF0F1;
   padding: 15px 20px;
}
dropdown label:hover, dropdown ul li:hover{
   background: red;
   color: white;
   cursor: pointer;
}
dropdown label{
   color: red;
   border-left: 4px solid red;
   border-radius: 0 5px 0 0;
   position: relative;
   z-index: 2;
}
dropdown input{
   display: none;
}
dropdown input ~ ul{
   position: relative;
   visibility: hidden;
   opacity: 0;
   top: -20px;
   z-index: 1;
}
dropdown input:checked + label{
   background: red;
   color: white;
}
dropdown input:checked ~ ul{
   visibility: visible;
   opacity: 1;
   top: 0;
}
$colors: #E74C3C, #0072B5, blue;
@for $i from 1 through length($colors) {
   dropdown ul li:nth-child(#{$i}) {
      border-left: 4px solid nth($colors, $i);
      .fa{
         color: nth($colors, $i);
      }
      &:hover {
         background: nth($colors, $i);
         color: white;
         .fa{
            color: white;
         }
      }
   }
}
.animate{
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -ms-transition: all .3s;
   -ms-transition: all .3s;
   transition: all .3s;
   backface-visibility:hidden;
   -webkit-backface-visibility:hidden; /* Chrome and Safari */
   -moz-backface-visibility:hidden; /* Firefox */
   -ms-backface-visibility:hidden; /* Internet Explorer */


      </style> 
 </head> 
 <body> 
  <div id="portfolio"> 
   <a href="index.html"> 
    <div class="back-arrow-left"></div> </a> 
   <dropdown> 
    <input id="toggle2" type="checkbox"> 
    <label for="toggle2" class="animate"> Portfolio <i class="fa fa-list float-right"></i> </label> 
    <ul class="animate"> 
     <li class="animate">site</li> 
     <li class="animate">Animations</li> 
     <li class="animate">test</li> 
    </ul> 
   </dropdown> 
  </div>  
 </body>
</html>

Related Tutorials