Drop Down Menu
Dear Friend; It is long time now that i have post on my blog. Today i will show you a simple dropdown menu using only css, that mean there is no java script and no jquery. So lets start...

First create a xhtml then we will add a css file to it.

{codecitation style="brush: html;"}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Drop Down Menu</title>
<link href="/style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="menu">

<ul>

<li><a href="https://www.activelava.net/" target="_blank">Activelava</a></li>

<li><a href="#">Web site</a>

<ul>

<li><a href="https://www.activelava.net/windows.html" target="_blank">Windows</a></li>

<li><a href="https://www.activelava.net/css.html" target="_blank">CSS</a></li>

<li><a href="https://www.activelava.net/joomla.html" target="_blank">Joomla</a></li>

</ul>

</li>

<li><a href="#">Tutorials</a>

<ul>

<li><a href="https://www.activelava.net/windows.html" target="_blank">Windows</a></li>
<li><a href="https://www.activelava.net/css.html" target="_blank">CSS</a></li>
<li><a href="https://www.activelava.net/joomla.html" target="_blank">Joomla</a></li>
<li><a href="https://www.activelava.net/review.html" target="_blank">Review</a>
<ul>
<li><a href="https://www.activelava.net/" target="_blank">3 drop 1</a></li>
<li><a href="https://www.activelava.net/" target="_blank">3 drop 2</a></li>
</ul>
</li>


</ul>

</li>

<li><a href="#">My Design</a>

<ul>

<li><a href="https://www.hnssbd.com">H&S Services</a></li>

<li><a href="https://www.hnssbd.net">H&S Hosting</a></li>

<li><a href="https://www.officextracts.com">officextracts</a></li>

<li><a href="https://www.electromartltd.com.bd">Electromartltd</a></li>

</ul>

</li>

<li><a href="#">Drop down</a>

<ul>

<li><a href="https://www.activelava.net/" target="_blank">Activelava 1</a></li>
<li><a href="https://www.activelava.net/" target="_blank">Activelava 2</a></li>
<li><a href="https://www.activelava.net/" target="_blank">Activelava 3</a></li>
<li><a href="https://www.activelava.net/" target="_blank">Activelava 4</a>
<ul>
<li><a href="https://www.activelava.net/" target="_blank">3 drop 1</a></li>
<li><a href="https://www.activelava.net/" target="_blank">3 drop 2</a></li>
</ul>

</li>

</ul>

</li>

</ul>

</div>
</body>

</html>
</body>
</html>

{/codecitation}


Now We have the xhtml code save it in a text file name it index.html and now we need css to add there.

{codecitation style="brush: css;"}

@charset "utf-8";
/* CSS Document */

body{
    background:#ccc;
    }

.menu {
    width:900px;
    margin: 0 auto;
}

/*-----------main menu bar-------*/

ul{

font-family:Arial, Helvetica, sans-serif;

margin: 0;

padding: 0;

list-style: none;

float:left;

}

ul li{

display:block;

position:relative;

float:left;

width:180px;

text-align:center;

}

li ul{

display:none;

}

li ul li{

text-align:left;

}

ul li a{

display:block;

text-decoration:none;

color:black;

padding: 5px 15px 5px 15px;

background:#008ED0;

margin-left:1px;

white-space:nowrap;

color:#ffffff;

border-top1px solid #FFFFFF;



}

ul li a:hover{

background:#F7931E;

color:#ffffff;

}

li:hover ul{

display:block;

position:absolute;

}

li:hover li{

float:none;

}

li:hover a{

color:#ffffff;

}

ul li ul li ul{
    display:none;
}

ul li ul:hover li ul {
    display:none;
}

ul li:hover ul li ul{
    display:none;
}

ul li ul li:hover ul{
    display:block;
}


ul li ul li ul li{
float: left !important;
    left: 180px;
    position: relative;
    top: -29px;
    width: 200px;
}

ul li ul li ul li a{

display:block;

text-decoration:none;

padding: 5px 15px 5px 15px;

background:#008ED0;

margin-left:1px;

white-space:nowrap;

color:#ffffff;

}

{/codecitation}

 

Now save your css file name it style.css and put both file in a folder now open index.html in a browser. u will find a nice simple css drop down menu.

 

If any one need Mode details that how it is done then i can surely happy to show you that.

Have Fun

About Author
Riaz Uddin Masum
Web Master
Hi, I am Riaz Uddin Masum, This is my play ground for web and IT. I like to read and write about any IT related Topic. I love to Design and Develop web site. it is my job too. My objective is to establish my career in web.
Other articles

DMC Firewall is developed by Dean Marshall Consultancy Ltd