Navigation Bar using CSS3 – Dropdown List

Question:

Create a page that has a navigation bar created using CSS3. A snapshot of the final page display is shown below

use <nav><li><ul> tags to complete the page. Include appropriate CSS3 to get the desired output. The products has to be automatically shown when mouse hovered on products title in the navigation bar. Include appropriate color changes as indicated in the snapshot.

The CSS3 scheme is given below

Script tagConstraints
navdisplay: block;position: absolute;top: 0;width: 100%;background-color: green;
lilist-style-type: none;display: inline;margin-right: 20px;font-size:25pxli:hover ul {display: block; position: absolute; left: 200px; background-color: green;margin: 0;}li:hover ul li a:link{display: block;margin-left:-30px;}
aa:linkcolor: #fff;   text-decoration: none;a:hover   color: orange;   text-decoration: none;

Code:

navigationbar.html

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Create a simple Navigation bar</title>
<style type="text/css">
nav{ display: block;
        position: absolute;
        top: 0;
        width: 100%;
        background-color: green;
}
li{ list-style-type: none;
    display: inline;
    margin-right: 20px;
    font-size: 25px;
}
li:hover ul{
    display: block;
    position: absolute;
    left: 200px;
    background-color: green;
    margin: 0;
}
li:hover ul li a:link{ display:block;
margin-left: -30px;}
a:link{ color:#fff;
        text-decoration: none;
}
a:hover{ color:orange;
        text-decoration: none;
}
li>ul{ display: none;
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">Products</a>
<ul>
<li><a href="#">Engineering</a></li>
<li><a href="#">Telecom</a></li>
<li><a href="#">Energy</a></li>
<li><a href="#">Finance</a></li>
<li><a href="#">Consultancy</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>

Recommended:

Leave a Comment

Your email address will not be published. Required fields are marked *

x