Starting Vocational Training From 1-May-2024 Get Detail



How to Create Navigation Menu using HTML and CSS

By : Admin     |     Website     |     30th August 2018

​​​​​​​​​​​​​​In this blog we will be creating a basic responsive navigation menu with dropdown using only HTML and CSS. Many navigation menus are created using a combination of HTML, CSS and Javascript. This simple HTML, CSS only method

The code we will create includes only the HTML, CSS required for structure and basic styling. This makes it much easier to follow and understand the purpose of each line of code. It also means that the end product is primed and ready for your unique customization.

The HTML

<html>
<title>Navigation Using HTML and CSS</title>
<head></head>
<body>
    <div style="background:#343233;">
        <div class="main_div">
            <div class="logo_div">
                <img src="img/logo.jpg" />
            </div>
            <div class="top_menu">
                <ul>
                    <li><a href="#">Courses</a></li>
                    <li><a href="#">Job Alerts</a></li>
                    <li><a href="#">Current Affairs</a></li>
                    <li><a href="#">Site Map</a></li>
                </ul>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
    <div style="border-bottom:1px solid #ccc;">
        <div class="main_div" style="background:#FF6600; padding:0px;">
            <div class="bottom_menu">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li id="sub_menu_id"><a href="#">Practice Test</a>
                        <ul class="sub_menu">
                            <li><a href="">PHP Course</a></li>
                            <li><a href="">Java</a></li>
                            <li><a href="">MySql</a></li>
                            <li><a href="">Database</a></li>
                            <li><a href="">C and C++</a></li>
                            <li><a href="">PHP Course</a></li>
                            <li><a href="">Java</a></li>
                            <li><a href="">MySql</a></li>
                            <li><a href="">Database</a></li>
                            <li><a href="">C and C++</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Online Test</a></li>
                </ul>
            </div>
            <div class="search_box">
                <input type="text" placeholder="Enter Something !...." />
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
</body>
</html>


The CSS

 <style> * {
     margin: 0px;
     padding: 0px;
 }
 
 .main_div {
     width: 1100px;
     margin: auto;
     padding-top: 10px;
     padding-bottom: 10px;
 }
 
 .logo_div {
     float: left;
 }
 
 .top_menu {
     float: right;
 }
 
 .top_menu ul {
     padding: 0px;
     list-style: none;
 }
 
 .top_menu ul li {
     float: left;
     padding-left: 16px;
     padding-right: 16px;
     line-height: 46px;
 }
 
 .top_menu ul li a {
     text-decoration: none;
     font-size: 17px;
     color: #fff;
     font-family: monospace;
 }
 
 .bottom_menu {
     float: left;
 }
 
 .bottom_menu ul {
     padding: 0px;
     list-style: none;
 }
 
 .bottom_menu ul li {
     float: left;
     padding-left: 30px;
     padding-right: 30px;
     border-right: 1px solid #fff;
     line-height: 43px;
     cursor: pointer;
 }
 
 .bottom_menu ul li:hover {
     background: #69B4E9;
 }
 
 .bottom_menu ul li a {
     text-decoration: none;
     font-size: 17px;
     color: #fff;
     font-family: monospace;
 }
 
 .search_box {
     float: right;
 }
 
 .search_box input {
     width: 300px;
     height: 22px;
     margin-top: 11px;
     margin-right: 6px;
     border: 1px solid #fff;
     border-radius: 4px;
     padding: 4px;
 }
 
 .sub_menu {
     padding: 0px !important;
     list-style: none !important;
     position: absolute;
     background: #333;
     margin-left: -30px;
     display: none;
 }
 
 .sub_menu li {
     float: none !important;
     border-right: none !important;
     padding-left: 45px !important;
     padding-right: 44px !important;
     border-bottom: 1px solid #fff;
 }
 
 #sub_menu_id:hover .sub_menu {
     display: block;
 }
 
 </style>