Simple CSS Menu

Css menu with HTML and CSS. This is a very use­ful and small drop­down menu with­out the use of javascript.

First, Lay­out the html code in body sec­tion of html page.

<ul id="menu">
    <li>
        <a href="">Home</a>
    </li>
    <li>
        <a href="">About</a>
        <ul>
            <li>
                <a href="">Me</a>
            </li>
            <li>
                <a href="">Murali</a>
            </li>
            <li>
                <a href="">Prashanth</a>
            </li>
        <!--<span class="hiddenSpellError" pre=""-->ul>
    </li>
    <li>
        <a href="">Contact</a>
        <ul>
            <li>
                <a href="">Email</a>
            </li>
            <li>
                <a href="">Mobile</a>
            </li>
            <li>
                <a href="">Letter</a>
            </li>
        <!--<span class="hiddenSpellError" pre=""-->ul>
    </li>
    <li>
        <a href="">Gallery</a>
        <ul>
            <li>
                <a href="">Photos</a>
            </li>
            <li>
                <a href="">Videos</a>
            </li>
            <li>
                <a href="">Albums</a>
            </li>
        </ul>
    </li>
</ul>

Sec­ond, Add css style to ul and li

ul {
		font-family: Arial, Verdana;
		font-size: 14px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	ul li {
		display: block;
		position: relative;
		float: left;
	}
	li ul {
		display: none;
	}
	ul li a {
		display: block;
		text-decoration: none;
		color: #ffffff;
		border-top: 1px solid #ffffff;
		padding: 5px 15px 5px 15px;
		background: #2C5463;
		margin-left: 1px;
		white-space: nowrap;
	}
	ul li a:hover {
		background: #617F8A;
	}
	li:hover ul {
		display: block;
		position: absolute;
	}
	li:hover li {
		float: none;
		font-size: 11px;
	}
	li:hover a {
		background: #617F8A;
	}
	li:hover li a:hover {
		background: #95A9B1;
	}

Demo here

You May Also Like:

• how to change html table back­ground color on hover using jquery
• Html cheat sheet
• Easy Html Table Sorting
• Sim­ple Table Search in Javascript