Please read the following steps:
Step 1: Create Menu with HTML
Create Menu by using <ul> and li
Step 2: CSS Language
And then we create Menu and using CSS to make Menu that we created, and absolute declaration must be written in space item <head> as below:
Create Menu by using <ul> and li
<html>Result
<head>
<title>CSS Drop Down Menu</title>
</head>
<body>
<ul class="menu">
<li><a href="">Menu 1</a>
<ul>
<li><a href="">Menu 1-1</a></li>
<li><a href="">Menu 1-2</a></li>
<li><a href="">Menu 1-3</a></li>
</ul>
</li>
<li><a href="">Menu 2</a>
<ul>
<li><a href="">Menu 2-1</a></li>
<li><a href="">Menu 2-2</a></li>
<li><a href="">Menu 2-3</a></li>
</ul>
</li>
<li><a href="">Menu 3</a></li>
<li><a href="">Menu 4</a></li>
<li><a href="">Menu 5</a></li>
</ul>
</body>
</html>
Step 2: CSS Language
And then we create Menu and using CSS to make Menu that we created, and absolute declaration must be written in space item <head> as below:
<head>
<style type="text/css" rel="stylesheet">
//css code here
</style>
</head>
Because Default Style item ul and li gap so we have to eliminate gap
Using CSS
ul, li{
padding:0;
margin: 0;
} Result 
04. Make Horizontal Menu
Because of the lessons we have taken to create a horizontal menu so we have to do each item li From left to right by using function Float.
.menu li{
float: left;
}
Result
Step 5: Make Vertical Submenu
0 comments:
Post a Comment