انجمن کدستانMoisrex

<li class="dropdown"> <h2>sample<span class="bullet"></span></h2> <div><p>sample</p></div> </li>

<li class="dropdown"> <h2>sample<span class="bullet"></span></h2> <div><p>sample </p></div> </li>

<li class="dropdown"> <h2>sample<span class="bullet"></span></h2> <div> <p> </p><div><p>sample </p></div> <p></p> </div> </li>

<li class="dropdown"> <h2>sample<span class="bullet"></span></h2> <div><div><p>sample </p></div> </div></li></ul>

<style>

@import: url(http://fonts.googleapis.com/css?family=Enriqueta:700);

body { margin: 0; background: color: #fff; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300;}

ul { list-style: none; width: 400px; margin: 20px auto; background: rgba(0,0,0,0.15); padding: 20px; /*border-radius*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}

h2 { font-size: 18px; color: #587b83; text-shadow: 0px 1px 1px rgba(255,255,255,0.5); background: rgba(255,255,255,0.2); border-radius: 5px; padding: 10px 15px; margin: 0;}

ul li span.bullet { border-color: transparent transparent transparent #587b83; border-style: dotted; /* 'dotted' or 'dashed' is better than'solid' for triangles, try to change 'dotted' -> 'solid' see the ugliest triangle ever !*/ border-width: 5px; display: inline-block; height: 0; width: 0; margin-left: 10px; margin-top: -5px;}

ul li div { height: 0px; opacity: 0; margin-left: 8px;

-webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}

ul li div { font-size: 12px;}

ul li:last-child:hover div { height: 150px }

ul li:hover div { opacity: 1; height: 50px;}

ul li.dropdown:hover span.bullet { /*transform*/ -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);}

fieldset { border: 0px; margin: 0px; padding: 0px; display: inline;}

input[type="text"] { width: 50px; background: #fff; border: 1px solid rgba(0, 0, 0, .2); padding: 2px;}

input[type=text]:focus { outline: none; border-color: #000; color: #F00; font-weight: bold;}

input[type="submit"] { width: 50px; background: #F00; border: 1px solid #F00; /*border-radius*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #FFF; padding: 4px; margin-left: 5px; /*box-shadow*/ -webkit-box-shadow: inset 0px 0px 15px 0px rgba(0, 0, 0, 0.7); -moz-box-shadow: inset 0px 0px 15px 0px rgba(0, 0, 0, 0.7); box-shadow: inset 0px 0px 15px 0px rgba(0, 0, 0, 0.7);}