HOW TO MAKE A SIMPLE DROP-DOWN MENU IN CSS
Drop-down menu is very important in web designing. It plays a major role in
making of an stylish and user friendly website.you can also change it’s
background colour. you can also customize it. You can divide it in child menu
and sub menu very simply.For drop-down menu, you have to create a CSS and web page
Firstly you have to create a web page.
step 1:-Open notepad,and paste the yellow lighted code.
step 2:-Save it as menu.html.
<html>
<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">DOWNLOADS</a>
<ul>
<li><a href="#">CD</a></li>
<li><a href="#">SONG</a></li>
<li><a href="#">SOFTWARE</a></li>
</ul>
</li>
<li><a href="#">HEALTH</a>
<ul>
<li><a href="#">DOCTOR</a></li>
<li><a href="#">MEDICINE</a></li>
<li><a href="#">HOSPITAL</a></li>
</ul>
</li>
<li><a href="#">Contact US</a>
<ul>
<li><a href="#">Online</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">E-MAIL</a></li>
</ul>
</li>
</ul>
</body>
</html>
NOW YOU HAVE TO CREATE A CSS FILE TO THAT WEB PAGE.
step3:- Open notepad, and paste the following code.
ul {
font-size: 20px;
margin: 0;
padding: 0;
font-family: LED, Verdana;
list-style: none;
}
ul li {
float: left;
display: block;
position: relative;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 4px 16px 5px 15px;
background: #00cbcc;
margin-left: 5px;
white-space: nowrap;
}
ul li a:hover {
background: #00cbcc;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 12px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #00cbcc;
}
STEP 4:-Save it as menu.css in same directory.
Now you have to insert it into html web page.
step 5:-Now open menu.html with notepad,and paste the following code after the <body> tag.
<link rel="stylesheet" type="text/css" href="mystyles.css" />
step 6:-Now,you have to change the given path of css file in above script.(path of menu.css)
ex:-<link rel="stylesheet" type="text/css" href="E:\blogging\menu.css" />
step 7:-Then save it, and the task is totally completed.
NOTE:-YOU CAN ALSO CUSTOMIZE THE SIZE OF LIST, SPACE BETWEEN THEM, COLOUR OF IT.
If you got lost at any point please leave a comment for us.
