<!doctype html>
<html>
<head>
<style>
ul, li{ padding:0px}
ul{ list-style:none}
a{ text-decoration:none}
.navtop { background:#333; height:40px; color:#fff}
.navtop h3{ padding:5px; color:black; text-shadow:0px 0px 1px red; text-shadow: 1px 1px 1px red, -1px -1px 1px blue;}
.navtop > ul{ float:left; position:relative; z-index:1; margin:0px}
hgroup{ float:left}
.navtop form{ float:right; padding:10px 10px}
.navtop > ul > li{ float:left; border-right:1px solid #fff; }
.navtop ul li a{ display:block; padding:10px 20px; color:#ccc}
.navtop ul li a:hover{ background:#f00; color:#fff}
.navtop ul .last{ border:none}
.navtop > ul > li:hover > ul{ display:block}
.navtop > ul > li > ul > li:hover ul{ display:block}
.footer{ background:#333; color:#ccc; text-align:center}
.clear{ clear:both}
.navtop > ul > li > ul li{ height:41px}
.navtop > ul > li > ul{ display:none; position:absolute; background:#333; }
.navtop > ul > li > ul > li > ul{ display:none; position:relative; left:132px; top:-41px; background:#333}
.navtop ul ul li{ border-top:1px solid #fff;}
</style>
</head>
<body >
<p>Browser's view :</p>
<div style="height:400px" class="highlight section" id="article3">
<div class="navtop">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Why We</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">History</a></li>
</ul>
</li>
<li><a href="#">Career</a></li>
<li><a href="#"><b class="caret"></b>Training</a>
<ul>
<li><a href="#">Asp.net</a>
<ul>
<li><a href="#">Core Asp.net</a></li>
<li><a href="#">Adv .Net</a></li>
<li><a href="#">MVC</a></li>
</ul>
</li>
<li><a href="#">Web Designing</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Photoshop</a></li>
</ul>
</li>
<li><a href="#">Java</a>
<ul>
<li><a href="#">Core Java</a></li>
<li><a href="#">Adv Java</a></li>
</ul>
</li>
<li><a href="#">Php</a>
<ul>
<li><a href="#">Core Phpp</a></li>
<li><a href="#">My Sql</a></li>
<li><a href="#">Wordpress</a></li>
<li><a href="#">Joomla</a></li>
</ul>
</li>
<li><a href="#">SQT</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Photoshop</a></li>
</ul>
</li>
</ul>
</li>
<li class="last"><a href="#">Contact</a></li>
</ul>
<br>
<h3>CSS Drop Down Menu</h3>
</div>
</div>
<hr>
</body>
</html>
<html>
<head>
<style>
ul, li{ padding:0px}
ul{ list-style:none}
a{ text-decoration:none}
.navtop { background:#333; height:40px; color:#fff}
.navtop h3{ padding:5px; color:black; text-shadow:0px 0px 1px red; text-shadow: 1px 1px 1px red, -1px -1px 1px blue;}
.navtop > ul{ float:left; position:relative; z-index:1; margin:0px}
hgroup{ float:left}
.navtop form{ float:right; padding:10px 10px}
.navtop > ul > li{ float:left; border-right:1px solid #fff; }
.navtop ul li a{ display:block; padding:10px 20px; color:#ccc}
.navtop ul li a:hover{ background:#f00; color:#fff}
.navtop ul .last{ border:none}
.navtop > ul > li:hover > ul{ display:block}
.navtop > ul > li > ul > li:hover ul{ display:block}
.footer{ background:#333; color:#ccc; text-align:center}
.clear{ clear:both}
.navtop > ul > li > ul li{ height:41px}
.navtop > ul > li > ul{ display:none; position:absolute; background:#333; }
.navtop > ul > li > ul > li > ul{ display:none; position:relative; left:132px; top:-41px; background:#333}
.navtop ul ul li{ border-top:1px solid #fff;}
</style>
</head>
<body >
<p>Browser's view :</p>
<div style="height:400px" class="highlight section" id="article3">
<div class="navtop">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Why We</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">History</a></li>
</ul>
</li>
<li><a href="#">Career</a></li>
<li><a href="#"><b class="caret"></b>Training</a>
<ul>
<li><a href="#">Asp.net</a>
<ul>
<li><a href="#">Core Asp.net</a></li>
<li><a href="#">Adv .Net</a></li>
<li><a href="#">MVC</a></li>
</ul>
</li>
<li><a href="#">Web Designing</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Photoshop</a></li>
</ul>
</li>
<li><a href="#">Java</a>
<ul>
<li><a href="#">Core Java</a></li>
<li><a href="#">Adv Java</a></li>
</ul>
</li>
<li><a href="#">Php</a>
<ul>
<li><a href="#">Core Phpp</a></li>
<li><a href="#">My Sql</a></li>
<li><a href="#">Wordpress</a></li>
<li><a href="#">Joomla</a></li>
</ul>
</li>
<li><a href="#">SQT</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Photoshop</a></li>
</ul>
</li>
</ul>
</li>
<li class="last"><a href="#">Contact</a></li>
</ul>
<br>
<h3>CSS Drop Down Menu</h3>
</div>
</div>
<hr>
</body>
</html>
No comments:
Post a Comment