Home » Blog » Show hide dropdown menu on mouse hover using only CSS  

Show hide dropdown menu on mouse hover using only CSS


Filed under Blog

dropdown-menu-blue
Here is ‘Blue Menu’ which is built only using Cascading Style Sheets (CSS). As it uses CSS display property and :hover so you don’t need any JavaScript. Not only simple it is also search engine friendly. At end to this post there is options for viewing live demo and download the source file as zip format. Make necessary changes and use it on next project!

How to make dropdown menu using CSS

Below is the code which is used to build ‘Blue Menu’. For understanding more easy the codes are divided and displayed in two parts, CSS and HTML respectively.

CSS

	.navigation ul {
		text-align: left;
		display: inline;
		margin: 0;
		list-style: none;
	}
	.navigation ul li {
		font-size:18px;
		font-weight:300;
		display: inline-block;
		margin-right: -4px;
		position: relative;
		padding: 15px 20px;
		background: #57a4d8;
		color:#fff;
		cursor: pointer;
	}
	.navigation ul li:hover {
		background: #57a4d8;
		color: #fff;
	}
	.navigation ul li ul {
		padding: 0;
		position: absolute;
		top: 62px;
		left: 0;
		width: 250px;
		display: none;
		opacity: 0;
		visibility: hidden;
	}
	.navigation ul li ul li { 
		background: #57a4d8; 
		display: block; 
		color: #fff;
		border-bottom:1px solid #4589b8;
	}
	.navigation ul li ul li:hover { background: #3a8dc9; }
	.navigation ul li:hover ul {
		display: block;
		opacity: 1;
		visibility: visible;
	}

HTML

 
		<!-- Dropdown -->
		<div class="navigation">
			<ul>
				<li>Menu 1</li>
				<li>Menu 2</li>
				<li>
				Drop Menu1 &#9662;
					<ul>
					<li>Sub Menu 1</li>
					<li>Sub Menu 2</li>
					<li>Sub Menu 3</li>
					<li>Sub Menu 4</li>
					<li>Sub Menu 5</li>
					</ul>
				</li>
				<li>
				Drop Menu 2 &#9662;
					<ul>
					<li>Sub Menu 1</li>
					<li>Sub Menu 2</li>
					<li>Sub Menu 3</li>
					<li>Sub Menu 4</li>
					<li>Sub Menu 5</li>
					<li>Sub Menu 6</li>
					</ul>
				</li> 
				<li>
				Drop Menu 3 &#9662;
					<ul>
					<li>Sub Menu 1</li>
					<li>Sub Menu 2</li>
					<li>Sub Menu 3</li>
					<li>Sub Menu 4</li>
					<li>Sub Menu 5</li>
					<li>Sub Menu 6</li>
					</ul>
				</li> 
				<li>
				Drop Menu 4 &#9662;
					<ul>
					<li>Sub Menu 1</li>
					<li>Sub Menu 2</li>
					<li>Sub Menu 3</li>
					<li>Sub Menu 4</li>
					<li>Sub Menu 5</li>
					<li>Sub Menu 6</li>
					</ul>
				</li> 
				<li>Menu 5</li>
			</ul>
		</div>
		<!-- End of Dropdown -->

Live Demo Download

Posts you may like: