Navigation Bar using CSS3 – Dropdown List ~ Multiplex Coder

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 tag	Constraints
nav	display: block;position: absolute;top: 0;width: 100%;background-color: green;
li	list-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;}
a	a:linkcolor: #fff; text-decoration: none;a:hover color: orange; text-decoration: none;

CODE:–

<!DOCTYPE HTML>

<head>

<title>Create a simple Navigation bar</title>

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="#">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>

Tags:

Navigation Bar using CSS3 – Dropdown List

CODE:–

Related Post