WordPress Hosting
Free Photos
WordPress Themes

Drop Down Menu with Search Box, only CSS3 and HTML

HTML
<ul class="nav"> <li id="settings"> </li> <li> <a href="#">Application</a> </li> <li> <a href="#">Board</a> </li> <li id="search"> <form action="" method="get"> <input type="text" name="search_text" id="search_text" placeholder="Search"/> <input type="button" name="search_button" id="search_button"></a> </form> </li> <li id="options"> <a href="#">Options</a> <ul class="subnav"> <li><a href="#">Settings</a></li> <li><a href="#">Application</a></li> <li><a href="#">Board</a></li> <li><a href="#">Options</a></li> </ul> </li> </ul> <script src="prefixfree-1.0.7.js" type="text/javascript"></script>
CSS
@import url(http://fonts.googleapis.com/css?family=Montserrat); * { margin: 0; padding: 0; } .nav { background: #232323; height: 60px; display: inline-block; } .nav li { float: left; list-style-type: none; position: relative; } .nav li a { font-size: 16px; color: white; display: block; line-height: 60px; padding: 0 26px; text-decoration: none; border-left: 1px solid #2e2e2e; font-family: Montserrat, sans-serif; text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); } .nav li a:hover { background-color: #2e2e2e; } #settings a { padding: 18px; height: 24px; font-size: 10px; line-height: 24px; } #search { width: 357px; margin: 4px; } #search_text{ width: 297px; padding: 15px 0 15px 20px; font-size: 16px; font-family: Montserrat, sans-serif; border: 0 none; height: 52px; margin-right: 0; color: white; outline: none; background: #1f7f5c; float: left; box-sizing: border-box; transition: all 0.15s; } ::-webkit-input-placeholder { /* WebKit browsers */ color: white; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: white; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: white; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: white; } #search_text:focus { background: rgb(64, 151, 119); } #search_button { border: 0 none; background: #1f7f5c; width: 60px; float: left; padding: 0; text-align: center; height: 52px; cursor: pointer; } #options a{ border-left: 0 none; } #options>a { background-position: 85% center; background-repeat: no-repeat; padding-right: 42px; } .subnav { visibility: hidden; position: absolute; top: 110%; right: 0; width: 200px; height: auto; opacity: 0; transition: all 0.1s; background: #232323; } .subnav li { float: none; } .subnav li a { border-bottom: 1px solid #2e2e2e; } #options:hover .subnav { visibility: visible; top: 100%; opacity: 1; }
JAVASCRIPT
Expand for more options Login