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

what is Blogger

what is Blogger, what is Blogger short info, Blogger hindi information,  Blogger.com एक फ्री Blog Publishing Platform है. जिसकी सहायता से Free Blog बनाकर Texts, Images, Videos आदि आसानी से शेयर की जा सकती है. और दुनिया को अपने लेखन कौशल से अवगत कराया जा सकता है. Blogger की गिनती Content Management Systems में होती है. क्योंकि यह Content को Yearly, Monthly, Weekly, Daily, Catigarically, Labels आदि के द्वारा Manage करता है. और ये सभी Entry पाठकों के लिए उपलब्ध रहती है. Google Blogger Kya Hai in Hindi Blogger पर जो ब्लॉग बनाया जाता है. वह blogspot.com का Sub-Domain होता है. जो Google Server पर Hosted रहता है. Blogger Users गूगल सर्वर को Access नही कर पाते है. लेकिन गूगल अकाउंट से उन्हे Blogger Dashboard पर अनुमति मिल जाती है. इसलिए वे अपना Blog Manage आसानी से कर सकते. Blogspot.com के अलावा Users को Country Specifit Domain Name भी उपलब्ध करवाया जाता है. मिसाल के तौर पर एक Indian Blogger Users अगर अपना ब्लॉग बनाता है तो वह blogspot.com के स्थान पर blogspot.in का चुनाव कर
Read more

how to add a youtube video to your website html

embed youtube video in html without iframe,html embed youtube video,how to insert a video in html from computer,iframe video autoplay in html,embed video html,youtube embed code generator,youtube refused to connect html,how to insert mp4 video in html, Use following steps 1. Create basic html page 2. Login to your Google account 3. Visit  www.youtube.com 4. Search video you want to add in your website 5. Select video  6. Click on share button at bottom  you can see share option   7. Click on embed as shown  8. Copy code and paste in html page save and run html page  embed youtube video in html without iframe,html embed youtube video,how to insert a video in html from computer,iframe video autoplay in html,embed video html,youtube embed code generator,youtube refused to connect html,how to insert mp4 video in html,
Read more