Create Drop Down Menu By Using HTML And CSS

Maybe, you've heard of it. But, just to make sure that you know what we are talking about, please feel free to see the demo by clicking the button below:
Yes! That's what we are gonna learn in this tutorial.
We need 2 files. One file is the HTML. And the another one is CSS. Let's do it quick. So, what you are gonna do is copy and paste the code below, and view the results by yourself. Let's get started!
1. style.css
Create a new file by using notepad or notepad++ or any other code editor softwares that you like. And then, save the file as "style.css" or any other names that you like. The CSS styling plays important role for what we are trying to make. Copy and paste the codes below and save the file if you haven't done so.

style.css: 
ul.menu {
    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: none;
    padding: 5px 15px 5px 15px;
    background-color: #0000FF;
    margin-left: 1px;
    white-space: nowrap;
}

ul li a:hover {
 background-color: #666666;
}

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

li:hover li {
    float: none;
}

li:hover a { 
 background-color: #666666;
}

li:hover li a:hover {
    background-color: #0000FF;
}

2. index.html
Create a new file by using notepad or notepad++ or any other code editor softwares that you like. And the, save the file as "index.html" or any other names that you like. Copy and paste the codes below and save the file if you haven't done so.

index.html: 
<html>
<head>
<title>HTML-CSS-DropDownMenu</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul class="menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a>
        <ul>
            <li><a href="#">Menu 2 Sub Menu 1</a></li>
            <li><a href="#">Menu 2 Sub Menu 2</a></li>
            <li><a href="#">Menu 2 Sub Menu 3</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a>
        <ul>
            <li><a href="#">Menu 3 Sub Menu 1</a></li>
            <li><a href="#">Menu 3 Sub Menu 2</a></li>
            <li><a href="#">Menu 3 Sub Menu 3</a></li>
            <li><a href="#">Menu 3 Sub Menu 4</a></li>
            <li><a href="#">Menu 3 Sub Menu 5</a></li>
        </ul>
    </li>
</ul>
</body>
</html>

Easy? You can edit the code according to your desires. Save the files and view the results on your web browser. Good Luck!

Labels: , , , , , , , ,