Searching...
Thursday, January 1, 2015

Animated Drop Down CSS3

January 01, 2015

Drop Down Menu Css


  <style type="text/css">

#cssmenu ul{margin:0;padding:0
}
#cssmenu li{margin:0;padding:0
}
#cssmenu a{margin:0;padding:0
}
#cssmenu ul{list-style:none
}
#cssmenu a{text-decoration:none
}
#cssmenu{
height:70px;
background-color:#232323;
box-shadow:0 2px 3px rgba(0,0,0,0.4);
width:auto
}
#cssmenu > ul > li{float:left;
margin-left:15px;
position:relative
}
#cssmenu > ul > li > a{
color:#a0a0a0;
font-family:Verdana,'Lucida Grande';
font-size:15px;
line-height:70px;
padding:15px 20px;
-webkit-transition:color .15s;
-moz-transition:color .15s;
-o-transition:color .15s;
transition:color .15s
}
#cssmenu > ul > li > a:hover{color:#fff
}
#cssmenu > ul > li > ul{opacity:0;visibility:hidden;padding:16px 0 20px 0;
background-color:#fafafa;text-align:left;position:absolute;
top:55px;
left:50%;
margin-left:-90px;
width:180px;
-webkit-transition:all .3s .1s;
-moz-transition:all .3s .1s;
-o-transition:all .3s .1s;
transition:all .3s .1s;
-webkit-border-radius:5px;-moz-border-radius:5px;
border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);
box-shadow:0 1px 3px rgba(0,0,0,0.4)
}
#cssmenu > ul > li:hover > ul{
opacity:1;
top:65px;
visibility:visible
}
#cssmenu > ul > li > ul:before{
content:'';
display:block;
border-color:transparent transparent #fafafa transparent;
border-style:solid;border-width:10px;
position:absolute;top:-20px;
left:50%;
margin-left:-10px
}
#cssmenu > ul ul > li{position:relative
}
#cssmenu ul ul a{color:#323232;font-family:Verdana,'Lucida Grande';
font-size:13px;
background-color:#fafafa;padding:5px 8px 7px 16px;
display:block;
-webkit-transition:background-color 0.1s;
-moz-transition:background-color 0.1s;
-o-transition:background-color 0.1s;
transition:background-color 0.1s
}
#cssmenu ul ul a:hover{background-color:#f0f0f0
}
#cssmenu ul ul ul{visibility:hidden;
opacity:0;
position:absolute;
top:-16px;
left:206px;
padding:16px 0 20px 0;
background-color:#fafafa;
text-align:left;
width:180px;
-webkit-transition:all .3s;
-moz-transition:all .3s;
-o-transition:all .3s;
transition:all .3s;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);
box-shadow:0 1px 3px rgba(0,0,0,0.4)
}
#cssmenu ul ul > li:hover > ul{
opacity:1;
left:190px;
visibility:visible
}
#cssmenu ul ul a:hover{background-color:#cc2c24;
color:#f0f0f0
}
  </style>

menus Links

<div id="cssmenu">
<ul>
<li class="active"><a href="#"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li><a href="#"><span>Widgets</span></a></li>
<li><a href="#"><span>Menus</span></a></li>
<li class="last"><a href="#"><span>Products</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Company</span></a>
<ul>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Location</span></a></li>
</ul>
</li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>

div css

  <style type="text/css">
#div {

padding: 0px 25px 25px;
background: #fff;
box-shadow:
0px 0px 0px 5px rgba( 255,255,255,0.4 ),
0px 4px 20px rgba( 0,0,0,0.33 );
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
display: table;
margin: 20px 300px 100px 200px;
width: 1150px;
height:400px;
}
  </style>

edit this div

<div  id="div">
<h1>Div Middle <br>WRITE YOUR WEBSITE CONTENT HERE </h1>

<img src="https://lh6.googleusercontent.com/-xA2R1yIkZXA/VKV2H9EUruI/AAAAAAAAAKw/0Ro-IhzLXMA/w1142-h516-no/java9r.png"/>

</div>



0 comments:

Post a Comment

ads2