css - How to add a transition to a absolute positioned box on hover -
hi have created boxes overflow: hidden, on hover box drop down showing inner box.
i have created , works fine use transition on effect smoothen drop down. have added transition , not working.
any advice great on thank you.
<html> <head> <title></title> <style type="text/css"> #items {width:300px;} .item {width:100px;border:solid 1px #ccc;float:left;height:20px; z-index:0;overflow:hidden;position:relative;} .item:hover{overflow:visible;z-index:100;} .item:hover .inner{z-index: 100;} .inner{position: absolute; background: white; width: 100%; } </style> </head> <body> <div id="items"> <div class="item"><div class="inner">text 1<br>text 1<br>text 1</div></div> <div class="item"><div class="inner">text 2<br>text 2<br>text 2</div></div> <div class="item"><div class="inner">text 3<br>text 3<br>text 3</div></div> <div class="item"><div class="inner">text 4<br>text 4<br>text 4</div></div> <div class="item"><div class="inner">text 5<br>text 5<br>text 5</div></div> <div class="item"><div class="inner">text 6<br>text 6<br>text 6</div></div> <div class="item"><div class="inner">text 7<br>text 7<br>text 7</div></div> <div class="item"><div class="inner">text 8<br>text 8<br>text 8</div></div> <div class="item"><div class="inner">text 9<br>text 9<br>text 9</div></div> <div class="item"><div class="inner">text 10<br>text 10<br>text 10</div></div> </div> </body> </html>
you can build menu want css, you'll need better html structure. don't want rebuild wheel, got 1 (a simple one) done:
http://cssdeck.com/labs/pure-css3-smooth-drop-down-menu
html
<nav> <ul class="cf"> <li><a href="#">menu item 1</a></li> <li><a class="dropdown" href="#">menu item 2</a> <ul> <li><a href="#">sub-menu item 1</a></li> <li><a href="#">sub-menu item 2</a></li> <li><a href="#">sub-menu item 3</a></li> </ul> </li> <li><a href="#">menu item 3</a></li> <li><a href="#">menu item 4</a></li> </ul> </nav> css
nav ul { -webkit-font-smoothing:antialiased; text-shadow:0 1px 0 #fff; background: #ddd; list-style: none; margin: 0; padding: 0; width: 100%; } nav li { float: left; margin: 0; padding: 0; position: relative; min-width: 25%; } nav { background: #ddd; color: #444; display: block; font: bold 16px/50px sans-serif; padding: 0 25px; text-align: center; text-decoration: none; -webkit-transition: .25s ease; -moz-transition: .25s ease; -ms-transition: .25s ease; -o-transition: .25s ease; transition: .25s ease; } nav .dropdown:after { content: ' ▶'; } nav .dropdown:hover:after{ content:'\25bc' } nav li:hover { background: #ccc; } nav li ul { float: left; left: 0; opacity: 0; position: absolute; top: 35px; visibility: hidden; z-index: 1; -webkit-transition: .25s ease; -moz-transition: .25s ease; -ms-transition: .25s ease; -o-transition: .25s ease; transition: .25s ease; } nav li:hover ul { opacity: 1; top: 50px; visibility: visible; } nav li ul li { float: none; width: 100%; } nav li ul a:hover { background: #bbb; } /* clearfix */ .cf:after, .cf:before { content:""; display:table; } .cf:after { clear:both; } .cf { zoom:1; } 
Comments
Post a Comment