Skip to main content

HTML Tutorial how to create Horizontal HTML Menu, Vertical HTML Menu, HTML Drop down Menu Step by Step

In this HTML Tutorial we are going to learn how to create Different type of Menu using CSS and HTML
UN order list tag <UL> we are gonging to create 

1.Horizontal HTML Menu using  CSS < UL> unordered list,  
2.Vertical HTML Menu CSS < UL> unordered list,
3.HTML Drop down Menu template CSS < UL> unordered list
Step by Step.









 you can download complete HTML Menu  tutorial  with CSS and Source code here
 you can download download Horizontal HTML Menu using  CSS < UL> unordered list here ,  
 you can download download Vertical HTML Menu CSS < UL> unordered list here ,
 you can download download HTML Drop down Menu template CSS < UL> unordered list here


Tutorial 1

 Create following  Horizontal HTML Menu using  CSS < UL> unordered list create Mouse Hover class , 


Lets We Learn How to create HTML Horizontal menu step by step

Step 1: create A HTML Page copy paste following code in to your HTML <body>tag as shown








<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>

in this code we are going to use UN order list of HTML tag. we have created 4 links in each list item of un order list

step 2: create A HTML Page copy paste following <style> or CSS code in to your HTML <head>  tag

<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:Red;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:pink;
}

</style>
</head>

in this css code  understand importance of  
list-style-type:none;   
and  overflow:hidden;  and display:block;

 Step 3: you can copy paste following code in any text editor and save as menu.html  extentsion
 
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:Red;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:pink;
}

</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>


Tutorial 2

 Create following  Vertical  HTML Menu using  CSS < UL> unordered list create Mouse Hover class 

Lets We Learn How to create HTML Vertical  menu step by step








Step 1: create A HTML Page copy paste following code in to your HTML <body>tag as shown

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

in this code we are going to use UN order list of HTML tag. we have created 4 links in each list item of un order list

step 2: create A HTML Page copy paste following <style> or CSS code in to your HTML <head>  tag
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:red;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:pink;
}
</style>
</head>
in this css code  understand importance of  in first and 2nd tutorial of following css Properties
list-style-type:none;   
and  overflow:hidden;  and display:block;

 Step 3: you can copy paste following code in any text editor and save as menu.HTML  extension








<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:red;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:pink;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>


Tutorial3

 Create following   HTML Drop Down Menu using  CSS < UL> unordered list create Mouse Hover class


Step 1: create A HTML Page copy paste following code in to your HTML <body>tag as shown

     <body>
    <div id="horizontalmenu">
        <ul> <li><a href="#">Subjects</a>
                <ul> <li><a href="#">HTML</a></li>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">SEO</a></li>
                     </ul>
             </li>
           
             <li> <a href="#">Technology</a>
        <ul> <li><a href="#">IT/Software</a></li>
                     <li><a href="#">Hardware</a></li>
            <li><a href="#">Iphone</a></li>
                    <li><a href="#">Neuro-Science</a></li> </ul>               
            </li>
            <li> <a href="#">Class</a>
                 <ul> <li><a href="#">MCA </a></li>
                     <li><a href="#">BE</a></li>
                     <li><a href="#">BCA</a></li>
                      <li><a href="#">M.TECH</a></li>
                 </ul>
            </li>
            <li>
            <a href="#">Country</a>
                <ul>
                 <li><a href="#">India</a></li>
                <li><a href="#">America</a></li>
                  <li><a href="#">France</a></li>
                 <li><a href="#">Pakistaan</a></li>
               </ul>
       
            </li>
        </ul>
</div>
</body>

step 2: create A HTML Page copy paste following <style> or CSS code in to your HTML <head>  tag

<head>
<title>Example of HTML Menu Drop down menu</title>
<style type="text/css">
#horizontalmenu ul {
padding:1;
margin:1;
list-style:inline;

}
a{

text-decoration:none;

}
#horizontalmenu li {
float:left;
position:relative;
padding-right:100;
 display:block;
width:80px;
height:28px;
border-style:none;
 background:red;
}
#horizontalmenu li ul {
    display:none;
position:absolute;
}
#horizontalmenu li:hover ul{
    display:block;
    background:pink;
height:auto; width:8em;
}
#horizontalmenu li ul li{
    clear:both;
border-style:none;}

#horizontalmenu li ul li:hover{
      background:pink;}

</style>
</head>

 Step 3: you can copy paste following code in any text editor and save as menu.HTML  extension

<html>
<head>
<title>Example of HTML Menu Drop down menu</title>
<style type="text/css">
#horizontalmenu ul {
padding:1;
margin:1;
list-style:inline;

}
a{

text-decoration:none;

}
#horizontalmenu li {
float:left;
position:relative;
padding-right:100;
 display:block;
width:80px;
height:28px;
border-style:none;
 background:red;
}
#horizontalmenu li ul {
    display:none;
position:absolute;
}
#horizontalmenu li:hover ul{
    display:block;
    background:pink;
height:auto; width:8em;
}
#horizontalmenu li ul li{
    clear:both;
border-style:none;}

#horizontalmenu li ul li:hover{
      background:pink;}


</style>
</head>
<body>
<div id="horizontalmenu">
        <ul> <li><a href="#">Subjects</a>
                <ul> <li><a href="#">HTML</a></li>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">SEO</a></li>
                     </ul>
             </li>
           
             <li> <a href="#">Technology</a>
        <ul> <li><a href="#">IT/Software</a></li>
                     <li><a href="#">Hardware</a></li>
            <li><a href="#">Iphone</a></li>
                    <li><a href="#">Neuro-Science</a></li> </ul>               
            </li>
            <li> <a href="#">Class</a>
                 <ul> <li><a href="#">MCA </a></li>
                     <li><a href="#">BE</a></li>
                     <li><a href="#">BCA</a></li>
                      <li><a href="#">M.TECH</a></li>
                 </ul>
            </li>
            <li>
            <a href="#">Country</a>
                <ul>
                 <li><a href="#">India</a></li>
                <li><a href="#">America</a></li>
                  <li><a href="#">France</a></li>
                 <li><a href="#">Pakistaan</a></li>
               </ul>
       
            </li>
        </ul>
</div>
</body>
</html>









Labels:

Popular posts from this blog

Design Marathi website Using HTML CSS

          Design Marathi website Using HTML CSS,मराठी वेबसाईट designing HTML ,step by step Marathi website, how to display Marathi content in your website, Design Marathi website step by step , Marathi website using HTML and CSS, How To Design website using different Languages  Design Marathi website Using HTML CSS, Design Marathi website Using PHP, Design Marathi website Using JSP, Design Marathi website Using ASP, Design Marathi website Using C# Dot Net, Design Marathi website Using Vb Dot Net, मराठी वेबसाईट मराठी वेबसाईट बनवन अगदी सोप आहे मी या ब्लॉग मध्ये दिलेल्या स्टेप्स वापरून तुम्ही काही क्षणात मराठी वेब पेज तयार करू शकता  Design Marathi website Using HTML CSS,मराठी वेबसाईट designing HTML ,step by step Marathi website, how to display Marathi content in your website, Design Marathi website step by step , Marathi website using HTML and CSS, How To Design website using different Languages    Design Marathi website U
Read more

Create HTML CSS javascript News Box , HTML CSS News Slider Download

Create HTML CSS javascript News Box , HTML CSS News Slider Download, HTML News Box For Your Website Free Download, java script news box For your Website, HTML CSS News Box Tutorial, HTML CSS News Box Example With Source code, HTML CSS Link Slider, HTML Slider Menu ,java script news box For your Website, HTML News box source Code example, News Slider   Here Is Example Of News Box slider for Your Website you can use it wiht PHP, ASP, ASP.NET, JSP,HTML 1.HTML Code  Save this code as index.HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title itemprop="name"></TITLE> <meta name="description" itemprop="description" content=""/> <META NAME="Keywords" CONTENT=""/>  <meta name=&quo
Read more

rowspan and colspan in html table

html table rowspan colspan tutoral, rowspan and colspan in html table, html table , html table video tutorial , html table with colspan and rowspan  html table rowspan colspan tutoral, rowspan and colspan in html table, html table , html table video tutorial , html table with colspan and rowspan  saving details Month Savings Savings for holiday! January $100 $50 February $80 click here to download html table colspan rowspan tutorial
Read more