Dropdown menu hover new

Sunday, May 11, 2014


Annyeonghaseyo.Here is the demo.
Hahaha,so simple,demo is like mine,navigation on top.
So,here is the code.

1.Copy and paste it on your HTML Javascript.

<style type="text/css">
#t1 {
background-color:#fff;
width: 115px;
text-align: center;
display:inline-block;
font-size: 10px;
letter-spacing:3px;
font-family: 'Metrophobic', sans serif;
text-transform: uppercase;
color: #888888;
9px;transition: all 0.5s ease;
-o-transition-transition:  all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
border:1px solid #FFFFFF;
}

#t1:hover {
color:#666;
9px;transition: all 0.5s ease;
-o-transition-transition:  all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}

#t1:hover #t2 a:moo{
border-top:0px solid #fff;
 }

#t1:hover #t2{
opacity:3;
-webkit-transition-duration:.7s;
overflow:hidden;
background-color:transparent;
z-index:966666666666666666666666666666666666666669;
height:auto;
}

#t2 {
position:absolute;
overflow:hidden;
width: 115px;
height: 0px;
text-transform: uppercase;
line-height: 20px;
font-size: 7pt;
font-family: 'Lora', serif;
padding-top: 3px;
opacity:0;
transition: all 0.5s ease;
-o-transition-transition:  all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}

#t2 a{
background-color:#666;
color: #ffffff;
text-align:center;
display:block;
text-transform: lowercase;
font-style: italic;
line-height: 20px;
font-family: 'Lora', serif;
font-size: 7pt;
transition: all 0.5s ease;
-o-transition-transition:  all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}


#t2 a:hover{
text-align: right;
font-family: 'Lora', serif;
font-size: 7pt;
color:#666;
background-color:#f1f1f1;
opacity:100;
transition: all 0.5s ease;
-o-transition-transition:  all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}

#izzy {
width:910px;
text-align: center;
left: 50px;
margin-right: auto;
}

</style>

<!---- Change everything with your own! ----!>

<div id="head">
<div id="izzy">
<div id="t1">Content
<div id="t2">
<a href="/">all</a>
<a href="/search/label/life">life</a>
<a href="/search/label/friends">friends</a>
<a href="/search/label/school">school</a>
<a href="/search/label/quote">quotes</a>
<a href="/search/label/holiday">holiday</a>
<a href="/search/label/food">food</a>
<a href="/search/label/idol">idol</a>
<a href="/search/label/songs">songs</a>
<a href="/search/label/photography">photography</a>
</div>
</div>

<div id="t1">About
<div id="t2">
<a href="/search/label/about">the girl</a>
<a href="/search/label/the blog">the blog</a>
<a href="/search/label/faq">f.a.q</a>
</div>
</div>

<div id="t1">Lists
<div id="t2">
<a href="/search/label/tutorial">tutorial</a>
<a href="/search/label/wishlist">wishlist</a>
<a href="/search/label/tips">tips</a>
<a href="/search/label/challenge">challenge</a>
<a href="/search/label/award">award</a>
<a href="http://.com">affiliates</a>
<a href="http://.com">banners</a>
</div>
</div>

<div id="t1">Review
<div id="t2">
<a href="/search/label/books">books</a>
<a href="/search/label/comics">comics</a>
<a href="/search/label/anime">anime</a>
<a href="/search/label/drama">drama</a>
<a href="/search/label/movie">movie</a>
<a href="/search/label/beauty">beauty</a>
</div>
</div>

<div id="t1">Networks
<div id="t2">
<a href="https://twitter.com/">twitter</a>
<a href="https://www.facebook.com/">facebook</a>
<a href="http://tumblr.com/">tumblr</a>
<a href="http://blogskins.com">blogskins</a>
<a href="http://ask.fm">ask.fm</a>
</div>
</div>

<div id="t1">Obsessed
<div id="t2">
follow
<a href="http://blogger.com">dashboard</a>
<a href="http://.com/">extra</a>
<a href="http://.com/">extra</a>
<a href="http://.com/">extra</a>
</div>
</div></div>

<!---- Change everything with your own! ----!></div>

2.Edit your link and title,if you want.

3.Color??Change it.Its up to you.

4.Preview and save.

5.Hooray,done.