Pages - পৃষ্ঠাসমূহ

Create multilevel horizontal menu with css

To decorate websites and navigate to one page another page every wesites need a menu. With css anybody can style with their own. To navigahe one page to another page and have a long menu we need multilevel menu. This post show how to create a multilevel menu using css.

Hide Example Show Example


Final output of multilevel horizontal menu


multilevel horizontal menu

Create a multilevel horizontal menu

Now start coding to create a multilevel horizontal menu. For this we need css and html. The sample file structure is like.
multilevel-horizontal-menu/
 multilevel-horizontal-menu.html
 style.css
 back.jpg
 


Create a simple html file to locate links with html <ul> tags. It is a simple html file

multilevel-horizontal-menu.html
<html>
 <head>
  <title>Multilevel Horizontal menu</title>
  <link rel="stylesheet" type="text/css" href="style.css">  
 </head>
 <body>
  <br/><br/>
  <nav>
   <ul>
    <li><a href="">Home</a>
     <ul>
      <li><a href="">Home</a></li>
      <li><a href="">Home</a></li>
      <li><a href="">Home</a></li>
      <li><a href="">Home</a></li>
      <li><a href="">Home</a></li>
      <li><a href="">Home</a></li>
     </ul>
    </li>
    <li><a href="">Service</a>
     <ul>
      <li><a href="">Service</a></li>
      <li><a href="">Service</a></li>
      <li><a href="">Service</a></li>
      <li><a href="">Service</a></li>
      <li><a href="">Service</a></li>
      <li><a href="">Service</a></li>
     </ul>
    </li>
    <li><a href="">Contact Us</a>
     <ul>
      <li><a href="">Contact Us</a></li>
      <li><a href="">Contact Us</a></li>
      <li><a href="">Contact Us</a></li>
      <li><a href="">Contact Us</a></li>
      <li><a href="">Contact Us</a></li>
      <li><a href="">Contact Us</a></li>
     </ul>
    </li>
    <li><a href="">About Us</a>
     <ul>
      <li><a href="">About Us</a></li>
      <li><a href="">About Us</a></li>
      <li><a href="">About Us</a></li>
      <li><a href="">About Us</a></li>
      <li><a href="">About Us</a></li>
      <li><a href="">About Us</a></li>
     </ul>
    </li>
    <li><a href="">Others</a></li>
    <li><a href="">Help</a></li>
   </ul>
  </nav>
  
  <div>
   <h3>Create a multilevel horizotal menu</h3>
    Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .Create a multilevel horizotal menu .
  
  </div>
  
 </body>
</html>

Now start to styling the html file with css. style.css
 body{
  width:600px;
  margin:0 auto;   
  background:url("back.jpg");
 }
 nav{
  width:600px;
  background-color:cadetblue;    
  position:absolute;
 }
 ul{
  list-style:none;    
  padding:0;
  margin:0;
  width:100%;
 }
 
 ul li{    
  float:left;    
 }
 
 a{
  text-decoration:none;
  display:block;
  padding:10px;    
  color:white;
  font-weight:bold;    
 }
 
 
 ul li:hover{
  background-color:powderblue;
  color:black;
 }
 
 ul ul li a{
  padding:5px 10px;
 }
 
 ul ul{
  display:none;
  position:absolute;
  background-color:powderblue;
  clear:both;
  left:0;
  width:98%;
  padding:1%;    
  margin:0px;
 }
 ul ul li a:hover{
  background-color:#62D7DB;
  -moz-border-radius:15px;
 }
 ul li:hover ul{
  display:block;
  z-index:101;
 }
 div {clear:both;position:relative;
  top:90px;
  
 }






5 comments:

  1. Hello. Could you help me how to set the 2nd level menu to always be visible?
    thanks in advance

    ReplyDelete
    Replies
    1. Just found the answer myself:
      change

      ul ul{
      display:none;

      to

      ul ul{
      display:block;

      Delete
  2. Please give me the complete code for blogger where we need copy this.......

    ReplyDelete
  3. all menus tried but not work in the blogger, before past the code could you please test in the blogger please

    ReplyDelete
  4. Thanks and that i have a nifty give: What Home Renovation Shows Are On Netflix house renovation financing

    ReplyDelete