Step :1
First open your
Text Editor Notepad/ Notepad ++
Step:2
Copy This
Code
<!------ CSS Style Here ------->
<div class="Navigation">
<style type="text/css">
#MainMenu{ position: relative; width: 902px; height: 28px; border-right: #7e8586 1px solid;}
#menu {list-style-type:none; margin:0; padding:0;}
#menu li {float:left; padding:0; margin:0; position:relative; width:100px; height:1px; z-index:100;}
#menu li a, #menu li a:visited {text-decoration:none; border-left: #7e8586 1px solid;}
#menu dl {position:absolute; top:0; left:0; width: 100px; margin: 0; padding: 0; background: #42505D;}
#menu dt {height: 28px; line-height: 28px; margin:0;padding:0; width:100px; float:left;}
#menu dd {display:none; background: transparent; border-bottom:1px solid #7e8586; clear:left; margin:0;
padding:0; color: #fff; text-align:left;}
#menu dt a, #menu dt a:visited {display:block; color:#fff; padding: 0px; width:100px; height: 28px; line-
height: 28px; text-align:center;}
#menu dd a, #menu dd a:visited {background:#546676; color:#fff; text-decoration:none; display:block;
padding:5px; width:189px;}
#menu li a:hover {border:0;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {width:200px;}
#menu li:hover dt a, #menu li a:hover dt a, #menu dd a:hover {background: #42505D; color:#fff; border-left:
#7e8586 1px solid;}
</style> <!------ End of CSS ------->
<div id="MainMenu">
<ul id="menu">
<li>
<a href="#nogo">
<table>
<tr>
<td>
<dl>
<dt><a href="#">Home</a></dt>
</dl>
</td> <!-------- End of td ------->
</tr> <!-------- End of tr ------->
</table> <!-------- End of table ------->
</a> <!-------- End of a ------->
</li> <!-------- End of li ------->
<!------ About Us Menu------->
<li>
<a href="#nogo">
<table>
<tr>
<td>
<dl>
<dt><a href="">About Us</a></dt>
<dd>
<a href="">History</a>
</dd>
<dd>
<a href="">General Information</a>
</dd>
</dl>
</td>
</tr>
</table>
</a>
</li>
<!------ Administration Menu------->
<li>
<a href="#nogo">
<table>
<tr>
<td>
<dl>
<dt><a href="">Administration</a></dt>
<dd>
<a href="">Founder</a>
</dd>
<dd>
<a href="">VC</a>
</dd>
</dl>
</td>
</tr>
</table>
</a>
</li>
<!------ Addmission Menu------->
<li>
<a href="#nogo">
<table>
<tr>
<td>
<dl>
<dt><a href="">Addmission</a></dt>
<dd>
<a href="">S.S.C</a>
</dd>
<dd>
<a href="">H.S.C</a>
</dd>
</dl>
</td>
</tr>
</table>
</a>
</li>
<!------ Department Menu------->
<li>
<a href="#nogo">
<table>
<tr>
<td>
<dl>
<dt><a href="">Department</a></dt>
<dd>
<a href="">Science</a>
</dd>
<dd>
<a href="">Arts</a>
</dd>
<dd>
<a href="">Buissness</a>
</dd>
</dl>
</td>
</tr>
</table>
</a>
</li>
<!------ About Us Menu------->
<li>
<a href="#nogo">
<table>
<tr>
<td>
<dl>
<dt><a href="">Result</a></dt>
</dl>
</td>
</tr>
</table>
</a>
</li>
<!------ News Menu------->
<li>
<a href="#nogo">
<table>
<tr>
<td>
<dl>
<dt><a href="">News</a></dt>
</dl>
</td>
</tr>
</table>
</a>
</li>
<!------ Gallery Menu------->
<li>
<a href="#nogo">
<table>
<tr>
<td>
<dl>
<dt><a href="">Gallery</a></dt>
</dl>
</td>
</tr>
</table>
</a>
</li>
<!------ Contact Menu------->
<li>
<a href="#nogo">
<table>
<tr>
<td>
<dl>
<dt><a href="">Contact</a></dt>
</dl>
</td>
</tr>
</table>
</a>
</li>
</ul> <!------ End of ul ------->
</div> <!------ End of Div------->
</div> <!------ End of Div ------->
Step:3
Paste Notepad And Save this FileDrop Down Menu.html
Step:4
Open Drop Down Menu.html
See Drop Down Menu
No comments:
Post a Comment