css - How do I use the drop down box from Flat UI Kit (free)? -


i have managed include flat ui (free) css in project styled buttons , text boxes (along normal text) cannot manage style drop down button shown on demo site.

the problem if add class select-block (which in demo) select item in html, drop down isn't styled @ all.

i prefer designmodo website free drop down tutorial.

html

<div id="switch">hover me     <ul id="switch-menu">         <li><a id="ml">menu 1</a></li>         <li><a id="en">menu 2</a></li>     </ul> </div> 

css

#switch {     width: 500px;     height: 50px;     background-color: #3498db;     color: white;     cursor: pointer;     padding: 13px 10px;     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box;     -webkit-transition: background-color 0.5s ease 0s;     -moz-transition: background-color 0.5s ease 0s;     -ms-transition: background-color 0.5s ease 0s;     -o-transition: background-color 0.5s ease 0s;     transition: background-color 0.5s ease 0s; } #switch-menu {     background: #3498db;     position: absolute;     top: 48px;     left: 10px;     opacity: 0;     margin: 0;     padding-left: 0;     -webkit-transition: opacity 0.5s ease 0s;     -moz-transition: opacity 0.5s ease 0s;     -ms-transition: opacity 0.5s ease 0s;     -o-transition: opacity 0.5s ease 0s;     transition: opacity 0.5s ease 0s; } #switch-menu li {     list-style: none;     height: 0;     overflow: hidden;     -webkit-transition: height 0.5s ease 0s;     -moz-transition: height 0.5s ease 0s;     -ms-transition: height 0.5s ease 0s;     -o-transition: height 0.5s ease 0s;     transition: height 0.5s ease 0s; } #switch-menu li {     display: block;     color: white;     width: 120px;     text-decoration: none;     padding: 10px;     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box;     -webkit-transition: 0.5s ease 0s;     -moz-transition: 0.5s ease 0s;     -ms-transition: 0.5s ease 0s;     -o-transition: 0.5s ease 0s;     transition: 0.5s ease 0s; } #switch:hover ul {     opacity: 1; } #switch:hover ul li {     height: 40px;     overflow: visible; } #switch:hover ul li a:hover {     padding-left: 15px;     background-color: #4aa3df; } 

take example http://jsfiddle.net/sweetmaanu/84bvm/


Comments

Popular posts from this blog

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -