Navigation with dropdown
Navigation with dropdown
<html>
<head>
<style>
#nav{
width: 100%;
height: 50px;
margin: 0;
z-index: 99;
position: relative;
background-color: red;
}
.navbar{
height: 50px;
padding: 0;
margin: 0;
position: absolute;
}
.navbar li{
height: auto;
width: 135.8px;
float: left;
text-align: center;
list-style: none;
font: normal bold 13px/1em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: red;
}
.navbar a{
padding: 18px 0;
border-left: 1px solid #ccc9c9;
text-decoration: none;
color: white;
display: block;
}
.navbar li:hover, a:hover {
background-color: brown;
}
.navbar li ul{
display: none;
height: auto;
margin: 0;
padding: 0;
}
.navbar li:hover ul{
display: block;
}
.navbar li ul li {
background-color: red;
}
.navbar li ul li a{
border-left: 1px solid white;
border-right: 1px solid white;
border-top: 1px solid white;
border-bottom: 1px solid white;
}
.navbar li ul li a:hover{
background-color: brown;
}
</style>
</head>
<body>
<h2>Create Modal Box</h2>
<div id="nav">
<ul class="navbar">
<li>
<a href="#">HTML</a>
</li>
<li>
<a href="#">CSS</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">CSS 3</a></li>
<li><a href="#">CSS 5</a></li>
<li>
<a href="#">CSS 6</a>
</li>
</ul>
</li>
<li>
<a href="#">PHP</a>
<ul>
<li><a href="#" >PHP</a></li>
<li><a href="#">HyperText Pre Processor</a></li>
<li><a href="#">Wordpress</a></li>
</ul>
</li>
<li>
<a href="#">C language</a>
<ul>
<li><a href="#">Basic's</a></li>
<li><a href="#">If-Else</a></li>
<li><a href="#">Loop</a></li>
<li><a href="#">Switch</a></li>
<li>
<a href="#">Array</a>
</li>
</ul>
</li>
<li>
<a href="#">C++ Language</a>
<ul>
<li><a href="#">Class</a></li>
<li><a href="#">Objects</a></li>
<li><a href="#">Constructor</a></li>
<li>
<a href="#">Inheritance</a>
</li>
</ul>
</li>
<li>
<a href="#">JAVA</a>
<ul>
<li><a href="#">Basic Java</a></li>
<li><a href="#">AWT</a></li>
<li><a href="#">Swing</a></li>
<li><a href="#">JDBC</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<html>
<head>
<style>
#nav{
width: 100%;
height: 50px;
margin: 0;
z-index: 99;
position: relative;
background-color: red;
}
.navbar{
height: 50px;
padding: 0;
margin: 0;
position: absolute;
}
.navbar li{
height: auto;
width: 135.8px;
float: left;
text-align: center;
list-style: none;
font: normal bold 13px/1em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: red;
}
.navbar a{
padding: 18px 0;
border-left: 1px solid #ccc9c9;
text-decoration: none;
color: white;
display: block;
}
.navbar li:hover, a:hover {
background-color: brown;
}
.navbar li ul{
display: none;
height: auto;
margin: 0;
padding: 0;
}
.navbar li:hover ul{
display: block;
}
.navbar li ul li {
background-color: red;
}
.navbar li ul li a{
border-left: 1px solid white;
border-right: 1px solid white;
border-top: 1px solid white;
border-bottom: 1px solid white;
}
.navbar li ul li a:hover{
background-color: brown;
}
</style>
</head>
<body>
<h2>Create Modal Box</h2>
<div id="nav">
<ul class="navbar">
<li>
<a href="#">HTML</a>
</li>
<li>
<a href="#">CSS</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">CSS 3</a></li>
<li><a href="#">CSS 5</a></li>
<li>
<a href="#">CSS 6</a>
</li>
</ul>
</li>
<li>
<a href="#">PHP</a>
<ul>
<li><a href="#" >PHP</a></li>
<li><a href="#">HyperText Pre Processor</a></li>
<li><a href="#">Wordpress</a></li>
</ul>
</li>
<li>
<a href="#">C language</a>
<ul>
<li><a href="#">Basic's</a></li>
<li><a href="#">If-Else</a></li>
<li><a href="#">Loop</a></li>
<li><a href="#">Switch</a></li>
<li>
<a href="#">Array</a>
</li>
</ul>
</li>
<li>
<a href="#">C++ Language</a>
<ul>
<li><a href="#">Class</a></li>
<li><a href="#">Objects</a></li>
<li><a href="#">Constructor</a></li>
<li>
<a href="#">Inheritance</a>
</li>
</ul>
</li>
<li>
<a href="#">JAVA</a>
<ul>
<li><a href="#">Basic Java</a></li>
<li><a href="#">AWT</a></li>
<li><a href="#">Swing</a></li>
<li><a href="#">JDBC</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Super
ReplyDelete