Summer Training batches for B.Tech students are starting in may and june - Registration Open
Brand
(+91) - 78915-90002 - 97828-60519

Create Dropdown Navigation Menus And Submenus In HTML And CSS3

Create Dropdown Navigation Menus And Submenus In HTML And CSS3

In this tutorial you will learn how create dropdown navigation menu and submenu with help of HTML and some CSS3 properties like-position relative, position absolute, display block and display none.

[step:1] create a div with class menu.
[step:2] their in div element start ul(unorder list) and li(list) tag.
[step:3] In li start an anchor tag for menu’s linking.
[step:4] Now for creating submenu use again ul tag just before where li tag is close.
[step:5] Then showing nested submenu start ul tag again before where li tag is close.
[step:6] Now close the beginning ul tag to last and close the div element also.

<html>
<head>
<title> Create dropdown menus with Submenus in HTML AND CSS3 By - Infonic Training</title>

</head>

<body>


<div class="menu">
					
<ul>
                    
<li><a href="#">Home</a></li>

                    
<li><a href="#">About Us</a></li>

                    
<li><a href="#">Courses <span> > ></span></a>

<ul>
                            
<li><a href="#">Website Designing</a></li>

                            
<li><a href="#">Online Marketing</a></li>

                            
<li><a href="#">Website Developing  <span> > ></span></a>

<ul>
                                    
<li><a href="#">HTML</a></li>

                                    
<li><a href="#">PHP</a></li>

                                    
<li><a href="#">Advance PHP  <span> > ></span></a>
<ul>
<li><a href="#">CakePHP</a></li>

                                    									
<li><a href="#">CakePHP 3.0</a></li>
</ul>
</li>

                                    
<li><a href="#">Wordpress</a></li>

                                    
                                </ul>

                   			 </li>

                    		
<li><a href="#">Digital Marketing</a></li>

                    
                   	  </ul>

                    </li>

                    
                    
<li><a href="#">Training</a></li>

                    
<li><a href="#">Contact</a></li>

                    </ul>


</div>

</body>
</html>

CSS Code Starting Here

*{margin:0px; padding:0px;}

.menu ul{ list-style:none;}

.menu ul li {float:left; width:170px; height:30px; background:linear-gradient(#6cf,#029EE0); margin:2px; text-align:center; line-height:30px; position:relative; border-radius:8px;}

.menu ul li a { color:#fff; text-decoration:none;}


.menu ul li a:hover{ color:red; background-color:#036; display:block; border-radius:8px;} 

.menu ul ul { position:absolute; display:none;}

.menu ul li:hover > ul
	
	{ display:block;}
	
.menu ul ul ul{ margin-left:170px; top:0px;}

.menu ul li span{ padding-left:10px;}

Explanation: Here above in this tutorial we had learned that how can we create navigation dropdown menu and submenu in html with CSS3. We explain you this tutorial by a menu and submenu in html on mouseover example. Here we learn that how to create multi level dropdown menu or nested drop down menu in HTML with help of CSS3.