Navigation menu using HTML

Navigation bar are the most important element while designing a website. Web-developers can create user-friendly navigation bars using HTML and CSS.

Using these navigation bar user can navigate between different menus easily.

Just follow these steps to create a multilevel navigation bar

1. Create a multilevel unordered list using HTML and save the file as “filename.html”

EXAMPLE:

<html>
<head>
<title>drop down menus</title>
</head>
<body>
<ul>
    <li><a href="#">home</a>
        <ul>
            <li><a href="#">Quotes</a></li>
            <li><a href="#">QTP Book</a></li>
        </ul>
    </li>
    <li><a href="#">About us</a></li>
    <li><a href="#">seo tools</a>
        <ul>
		   <li><a href="#">PageRank</a>
				<ul>
					<li><a href="#">PR Checker</a></li>
					<li><a href="#">PR sorter</a></li>
				</ul>
		   </li>
           <li><a href="#">Domain Analysis</a></li>
           <li><a href="#">Inbound links</a></li>
        </ul>
    </li>
</ul>
</body>
</html>

2. Apply the styles to the above code and save the file as “filename.css”

        * {padding:0; margin:0;}
        body{ padding:5px; font-family:"Times New Roman", Times, serif;}
        ul{ list-style: none;}
        ul li{float:left; padding-right:1px; position:relative;}
        ul a{display:table-cell; vertical-align: middle; width:100px; text-align:center; background-color:#000; color:#FFF; text-decoration:none;}
        ul a:hover{background:#000;}
        li > ul {display:none; position:absolute; left:0; top:100%;}
        li:hover>ul{display:block;}
        li>ul li {padding:0; padding-top:1px;}
        li>ul li>ul{left:100%; top:0; padding-left:1px;}
        li>ul li>ul li{width:100px;}
        li:hover>a{background:#000;}

3. Now execute the “filename.html” to see the navigation menu

Posted in Html Tagged with: