Create a Simple Css Menus

Step 1:-  Create The HTML Code First

<html>

<body>

<div id="navcontainer">
<ul>
<li><a href="#">Home</a>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
</ul>
</li>
<li><a href="#">Demo</a>
<ul>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</li>
<li><a href="#">Demo1</a>
<ul>
<li><a href="#">Link5</a></li>
<li><a href="#">Link5</a></li>
</ul>
</li>
</ul>
</div>

</body>

</html>

Step 2:-  Add The Css Code In Heading tag

<style>

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer li { margin: 0; }

#navcontainer a
{
display: block;
color: #FFF;
background-color:maroon;
width: 9em;
padding: 3px 12px 3px 8px;
text-decoration: none;
border-bottom: 1px solid #fff;
}

#navcontainer a:hover
{
background-color:black;
color: #FFF;
}

#navcontainer li li a
{
display: block;
color: #FFF;
background-color:maroon;
width: 9em;
padding: 3px 12px 3px 8px;
text-decoration: none;
border-bottom: 1px solid #fff;
}

</style>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: