Create a Drop Down Menu with Search Box in CSS3 and HTML

• 3 minutes READ

Topic: CSS3
Difficulty: Intermediate
Estimated Completion Time: 45 min

In this tutorial, we will be creating a flat style navigation with a search box and dropdown menu from the Square UI.

Flat menu


The navigation is made up of an unordered list (.nav) containing various types of elements inside them:

  • List items(LIs) which contain normal links do not have any id/class.
  • #settings contains an image based link.
  • #search contains the search field along with a submit button.
  • #options contains a link as well as an unordered list (.subnav) which acts as a dropdown.

At the end we include prefixfree which lets us use only unprefixed CSS properties everywhere.

<ul class="nav">
	<li id="settings">
		<a href="#"><img src="settings.png" /></a>
		<a href="#">Application</a>
		<a href="#">Board</a>
	<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>
	<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>

<script src="prefixfree-1.0.7.js" type="text/javascript"></script>


1. Basic Styles

@import url(;

* {
	margin: 0;
	padding: 0;

We start with a basic CSS reset and import a custom font ‘Montserrat’ from Google Fonts.

2. Navigation and List Items

.nav {
	background: #232323;
	height: 60px;
	display: inline-block;

.nav li {
	float: left;
	list-style-type: none;
	position: relative;

The main navigation element has a dark grey background and a fixed height. The list items are floated left and are positioned relatively so that they can contain the dropdown menu which is absolutely positioned later on.

Online Email Template Builder

With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

Try FreeOther Products

3. Links

.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;

The links have basic styling. They use the Montserrat font we imported earlier from Google Fonts. A subtle white glow is added to make the text smooth and bold. The links have a 60px line height which is same as that of .nav.

The links also have a hover effect where the background is changed to a lighter version of the grey background.

#settings contains an image link hence its layout is adjusted to make the settings icon appear in the center.

4. Search Box

Flat Search

#search {
	width: 357px;
	margin: 4px;
	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 url(search.png) center no-repeat;
	width: 60px;
	float: left;
	padding: 0;
	text-align: center;
	height: 52px;
	cursor: pointer;

#search is provided with a fixed width and a small margin or 4px around it.

#search_text is floated to the left and is provided with a green background which animates to a lighter shade on hover.

#search_button is also floated to the left to make it align with #search_text horizontally. It uses a search icon as its background which is positioned at its center.

Styling the placeholder is a tricky one. It appears grey on some browsers. This answer on Stackoverflow gives a complete overview on how to do it.

Create Websites with Our Online Builders

With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.

Try Startup App Try Slides AppOther Products

5. Dropdown

Flat Dropdown

#options a{
	border-left: 0 none;
#options&gt;a {
	background-image: url(triangle.png);
	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;

#options which contains a dropdown is given a triangle icon as a background on the right to make it more intuitive.

.subnav is hidden by default using a combination of CSS visibility and opacity properties. Its positioned at 110% from the top. On hover the top changes to 100% along with the opacity and visibility properties giving a cool hover effect to the dropdown menu.

Download Source Files

Puneet Pugalia

Frontend developer and creator of TheCodePlayer. Keeps fiddling with HTML5/CSS3/JS/etc. You can follow him on Twitter at @puneetpugalia.

Posts by Puneet Pugalia
Earn 25% commission on affiliate sales

We build high-quality products

Designmodo offers advanced drag and drop website and email builders for web designers and developers, we have everything you need to make money.


We use cookies to ensure that we give you the best experience on our website. Privacy Statement.

  • I disagree
  • I agree