contact@sensibleacademy.com 7722899444

Blog Detail

  1. Home
  2. blogs

How to Create Navigation Menu using HTML and CSS

By : Admin     |     HTML and CSS Tutorial, Basic of CSS, Navigation Bar using HTML and CSS     |     30-08-2018

Types of Cascading Style Sheets (CSS) 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
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

​​​​​​​​​​​​​​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>

Popular Posts