software

 Click here to download MDSN Welcome 1.1

The MDSN Welcome 1.1 software will welcome you when system start up Ex., Welcome your name (or) any message's whatever you went to remind you at start up. You can also use this software to instruct new user's Ex., Don't  Open the C drive Don't delete any file's without asking me.
The below video is DEMO.

 Click here to download MDSN DC 1.0
The MDSN DC 1.0 makes happy holiday's snowfall on windows desktop and it will change the wallpaper within 1sec .
The below video is DEMO.

 

Download two software   MDSN Welcome 1.1 and MDSN DC 1.0 

07.Pure css Drop Down menu

7.Pure css Drop Down menu

<<<< 1 2 3 4 5 6 7

Select Theem Style 1 Style 2

Select Drop Down menu
Drop Down menu Style Horizontal Vertical

Select Drop Down menu
Drop Down menu Style Horizontal Vertical

Html Code

<div id="mdsntheem"> <ul class="ulmenu"> <li id="idmenu1" class="limenu"><a id="amenu" class="c1" href="#" title="Menu 1">Home</a></li> <li id="idmenu2" class="limenu"><a id="amenu" class="c2" href="#" title="Menu 2">Menu 2 &gt;&gt;</a> <ul class="ulmenu"> <li id="idmenu21" class="limenu"><a id="amenu" class="c21" href="#" title="Menu 21">Menu 21</a></li> <li id="idmenu22" class="limenu"><a id="amenu" class="c22" href="#" title="Menu 22">Menu 22 &gt;&gt;</a> <ul class="ulmenu"> <li id="idmenu221" class="limenu"><a id="amenu" class="c221" href="#" title="Menu 221">Menu 221</a></li> <li id="idmenu222" class="limenu"><a id="amenu" class="c222" href="#" title="Menu 222">Menu 222</a></li> <li id="idmenu223" class="limenu"><a id="amenu" class="c223" href="#" title="Menu 223">Menu 223</a></li> <li id="idmenu224" class="limenu"><a id="amenu" class="c224" href="#" title="Menu 224">Menu 224</a></li> </ul> </li> <li id="idmenu23" class="limenu"><a id="amenu" class="c23" href="#" title="Menu 23">Menu 21</a></li> </ul> </li> <li id="idmenu3" class="limenu"><a id="amenu" class="c3" href="#" title="Menu 3">Menu 3 &gt;&gt;</a> <ul class="ulmenu"> <li id=idmenu31 class="limenu"><a id="amenu" class="c31" href="#" title="Menu 31">Menu 31</a></li> <li id=idmenu32 class="limenu"><a id="amenu" class="c32" href="#" title="Menu 32">Menu 32</a></li> <li id=idmenu33 class="limenu"><a id="amenu" class="c33" href="#" title="Menu 33">Menu 33</a></li> <li id=idmenu34 class="limenu"><a id="amenu" class="c34" href="#" title="Menu 34">Menu 34</a></li> </ul> </li> <li id="idmenu4" class="limenu"><a id="amenu" class="c4" href="#" title="Menu 4">About me</a></li> <li id="idmenu5" class="limenu"><a id="amenu" class="c5" href="#" title="Menu 5">Site map</a></li> </ul> </div>

CSS code

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ height:34px;/*height of the drop down menu*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 22px; width: 100%; background-color: #BBD9EE; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; /*Font Size for menu you can resize by editing [ 16px ] to EX: [12px or any size adding “px” is important ]*/ display: block; color: #FFF; text-decoration: none; padding: 5px 10px; text-align: center; border:1px solid #fff; background-color: #6191EE; } #mdsntheem :hover > a#amenu { background-color: #5421ba; color:#fff; } #mdsntheem ul.ulmenu li.limenu, #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu{ float: left; width: 130px; list-style-type:none; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; width: 200px; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu{ display:block; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu{ position: absolute; margin-left: 130px; margin-top: -31px; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 20px; width:170px; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font:Times New Roman; font-size:16px; /*Font Size for menu you can resize by editing [ 16px ] to EX: [12px or any size adding “px” is important ]*/ display: block; text-decoration: none; padding: 7px 10px; text-align: center; background:none; color:#FFF; border:1px solid #fff; background-color: #6191EE; } #mdsntheem :hover > a#amenu { background-color: #5421ba; color:#fff; } #mdsntheem ul.ulmenu li.limenu, #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu{ float: left; width: 170px; list-style-type:none; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu { display:block; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li:hover ul.ulmenu{ position: absolute; margin-left: 170px; margin-top: -31px; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ height:34px;/*height of the drop down menu*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 22px; width: 100%; background-color: #BBD9EE; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; display: block; color: #FFF; text-decoration: none; padding: 5px 10px; text-align: center; border:1px solid #fff; background-color: #6191EE; } #mdsntheem :hover > a#amenu { background-color: #5421ba; color:#fff; } #mdsntheem ul.ulmenu li.limenu, #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu{ float: left; list-style-type:none; width:130px; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ width: 200px; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu { position: absolute; margin-left: 200px; margin-top: -2em; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu { display:block; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 20px; width:170px; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font:Times New Roman; font-size:16px; /*Font Size for menu you can resize by editing [ 16px ] to EX: [12px or any size adding “px” is important ]*/ display: block; text-decoration: none; padding: 7px 10px; text-align: center; background:none; color:#FFF; border:1px solid #fff; background-color: #6191EE; } #mdsntheem :hover > a#amenu { background-color: #5421ba; color:#fff; } #mdsntheem ul.ulmenu li.limenu{ float: left; width: 170px; list-style-type:none; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ width: 220px; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu{ display:block; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu{ position: absolute; margin-left: 170px; margin-top: -31px; } #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li:hover ul.ulmenu{ position: absolute; margin-left: 220px; margin-top:-31px; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

Active link for This code

<style type="text/css"> /**MDSNActivelinkpagescriptstart**/ #mdsntheem a#amenu.c1, /** Home **/ #mdsntheem a#amenu.c2, /** menu >> **/ #mdsntheem a#amenu.c21, /** menu21 **/ #mdsntheem a#amenu.c22, /** menu22 **/ #mdsntheem a#amenu.c221, /** menu221 **/ #mdsntheem a#amenu.c222, /** menu222 **/ #mdsntheem a#amenu.c223, /** menu223 **/ #mdsntheem a#amenu.c224, /** menu224 **/ #mdsntheem a#amenu.c23, /** menu23 **/ #mdsntheem a#amenu.c3, /** menu3 >> **/ #mdsntheem a#amenu.c31, /** menu31 **/ #mdsntheem a#amenu.c32, /** menu32 **/ #mdsntheem a#amenu.c33, /** menu33 **/ #mdsntheem a#amenu.c34, /** menu34 **/ #mdsntheem a#amenu.c4, /** About me **/ #mdsntheem a#amenu.c5 /** Site map **/ {background-color: #5421ba; color:#fff;} /**MDSNActivelinkpagescriptend**/ </style>

 

06.Pure css Drop Down menu

6.Pure css Drop Down menu

<<<< 1 2 3 4 5 6 7 >>>>

Select Theem Style 1 Style 2

Select Drop Down menu
Drop Down menu Style Horizontal Vertical

Select Drop Down menu
Drop Down menu Style Horizontal Vertical

Html Code

<div id="mdsntheem"> <ul class="ulmenu"> <li id="idmenu1" class="limenu"><a id="amenu" class="c1" href="#" title="Menu 1">Home</a></li> <li id="idmenu2" class="limenu"><a id="amenu" class="c2" href="#" title="Menu 2">Menu 2 &gt;&gt;</a> <ul class="ulmenu"> <li id="idmenu21" class="limenu"><a id="amenu" class="c21" href="#" title="Menu 21">Menu 21</a></li> <li id="idmenu22" class="limenu"><a id="amenu" class="c22" href="#" title="Menu 22">Menu 22 &gt;&gt;</a> <ul class="ulmenu"> <li id="idmenu221" class="limenu"><a id="amenu" class="c221" href="#" title="Menu 221">Menu 221</a></li> <li id="idmenu222" class="limenu"><a id="amenu" class="c222" href="#" title="Menu 222">Menu 222</a></li> <li id="idmenu223" class="limenu"><a id="amenu" class="c223" href="#" title="Menu 223">Menu 223</a></li> <li id="idmenu224" class="limenu"><a id="amenu" class="c224" href="#" title="Menu 224">Menu 224</a></li> </ul> </li> <li id="idmenu23" class="limenu"><a id="amenu" class="c23" href="#" title="Menu 23">Menu 21</a></li> </ul> </li> <li id="idmenu3" class="limenu"><a id="amenu" class="c3" href="#" title="Menu 3">Menu 3 &gt;&gt;</a> <ul class="ulmenu"> <li id=idmenu31 class="limenu"><a id="amenu" class="c31" href="#" title="Menu 31">Menu 31</a></li> <li id=idmenu32 class="limenu"><a id="amenu" class="c32" href="#" title="Menu 32">Menu 32</a></li> <li id=idmenu33 class="limenu"><a id="amenu" class="c33" href="#" title="Menu 33">Menu 33</a></li> <li id=idmenu34 class="limenu"><a id="amenu" class="c34" href="#" title="Menu 34">Menu 34</a></li> </ul> </li> <li id="idmenu4" class="limenu"><a id="amenu" class="c4" href="#" title="Menu 4">About me</a></li> <li id="idmenu5" class="limenu"><a id="amenu" class="c5" href="#" title="Menu 5">Site map</a></li> </ul> </div>

CSS code

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ height:34px;/*height of the drop down menu*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 22px; width: 100%; background-color: #BBD9EE; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; /*Font Size for menu you can resize by editing [ 16px ] to EX: [12px or any size adding “px” is important ]*/ display: block; color: #000; text-decoration: none; padding: 5px 10px; text-align: center; border:1px solid #000; background-color: #F2FFFF; } #mdsntheem :hover > a#amenu { background-color: #6968AF; color:#fff; } #mdsntheem ul.ulmenu li.limenu, #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu{ float: left; width: 130px; list-style-type:none; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; width: 200px; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu{ display:block; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu{ position: absolute; margin-left: 130px; margin-top: -31px; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 20px; width:170px; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font:Times New Roman; font-size:16px; /*Font Size for menu you can resize by editing [ 16px ] to EX: [12px or any size adding “px” is important ]*/ display: block; text-decoration: none; padding: 7px 10px; text-align: center; background:none; color:#000; border:1px solid #000; background-color: #F2FFFF; } #mdsntheem :hover > a#amenu { background-color: #6968AF; color:#fff; } #mdsntheem ul.ulmenu li.limenu, #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu{ float: left; width: 170px; list-style-type:none; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu { display:block; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li:hover ul.ulmenu{ position: absolute; margin-left: 170px; margin-top: -31px; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ height:34px;/*height of the drop down menu*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 22px; width: 100%; background-color: #BBD9EE; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; display: block; color: #000; text-decoration: none; padding: 5px 10px; text-align: center; border:1px solid #000; background-color: #F2FFFF; } #mdsntheem :hover > a#amenu { background-color: #6968AF; color:#fff; } #mdsntheem ul.ulmenu li.limenu, #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu{ float: left; list-style-type:none; width:130px; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ width: 200px; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu { position: absolute; margin-left: 200px; margin-top: -2em; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu { display:block; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 20px; width:170px; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font:Times New Roman; font-size:16px; /*Font Size for menu you can resize by editing [ 16px ] to EX: [12px or any size adding “px” is important ]*/ display: block; text-decoration: none; padding: 7px 10px; text-align: center; background:none; color:#000; border:1px solid #000; background-color: #F2FFFF; } #mdsntheem :hover > a#amenu { background-color: #6968AF; color:#fff; } #mdsntheem ul.ulmenu li.limenu{ float: left; width: 170px; list-style-type:none; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ width: 220px; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu{ display:block; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu{ position: absolute; margin-left: 170px; margin-top: -31px; } #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li:hover ul.ulmenu{ position: absolute; margin-left: 220px; margin-top:-31px; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

Active link for This code

<style type="text/css"> /**MDSNActivelinkpagescriptstart**/ #mdsntheem a#amenu.c1, /** Home **/ #mdsntheem a#amenu.c2, /** menu >> **/ #mdsntheem a#amenu.c21, /** menu21 **/ #mdsntheem a#amenu.c22, /** menu22 **/ #mdsntheem a#amenu.c221, /** menu221 **/ #mdsntheem a#amenu.c222, /** menu222 **/ #mdsntheem a#amenu.c223, /** menu223 **/ #mdsntheem a#amenu.c224, /** menu224 **/ #mdsntheem a#amenu.c23, /** menu23 **/ #mdsntheem a#amenu.c3, /** menu3 >> **/ #mdsntheem a#amenu.c31, /** menu31 **/ #mdsntheem a#amenu.c32, /** menu32 **/ #mdsntheem a#amenu.c33, /** menu33 **/ #mdsntheem a#amenu.c34, /** menu34 **/ #mdsntheem a#amenu.c4, /** About me **/ #mdsntheem a#amenu.c5 /** Site map **/ {background-color: #6968AF; color:#fff;} /**MDSNActivelinkpagescriptend**/ </style>

 

05.Pure css Drop Down menu

5.Pure css Drop Down menu

<<<< 1 2 3 4 5 6 7 >>>>

Select Theem Style 1 Style 2

Select Drop Down menu
Drop Down menu Style Horizontal Vertical

Select Drop Down menu
Drop Down menu Style Horizontal Vertical

Html Code

<div id="mdsntheem"> <ul class="ulmenu"> <li id="idmenu1" class="limenu"><a id="amenu" class="c1" href="#" title="Menu 1">Home</a></li> <li id="idmenu2" class="limenu"><a id="amenu" class="c2" href="#" title="Menu 2">Menu 2 &gt;&gt;</a> <ul class="ulmenu"> <li id="idmenu21" class="limenu"><a id="amenu" class="c21" href="#" title="Menu 21">Menu 21</a></li> <li id="idmenu22" class="limenu"><a id="amenu" class="c22" href="#" title="Menu 22">Menu 22 &gt;&gt;</a> <ul class="ulmenu"> <li id="idmenu221" class="limenu"><a id="amenu" class="c221" href="#" title="Menu 221">Menu 221</a></li> <li id="idmenu222" class="limenu"><a id="amenu" class="c222" href="#" title="Menu 222">Menu 222</a></li> <li id="idmenu223" class="limenu"><a id="amenu" class="c223" href="#" title="Menu 223">Menu 223</a></li> <li id="idmenu224" class="limenu"><a id="amenu" class="c224" href="#" title="Menu 224">Menu 224</a></li> </ul> </li> <li id="idmenu23" class="limenu"><a id="amenu" class="c23" href="#" title="Menu 23">Menu 21</a></li> </ul> </li> <li id="idmenu3" class="limenu"><a id="amenu" class="c3" href="#" title="Menu 3">Menu 3 &gt;&gt;</a> <ul class="ulmenu"> <li id=idmenu31 class="limenu"><a id="amenu" class="c31" href="#" title="Menu 31">Menu 31</a></li> <li id=idmenu32 class="limenu"><a id="amenu" class="c32" href="#" title="Menu 32">Menu 32</a></li> <li id=idmenu33 class="limenu"><a id="amenu" class="c33" href="#" title="Menu 33">Menu 33</a></li> <li id=idmenu34 class="limenu"><a id="amenu" class="c34" href="#" title="Menu 34">Menu 34</a></li> </ul> </li> <li id="idmenu4" class="limenu"><a id="amenu" class="c4" href="#" title="Menu 4">About me</a></li> <li id="idmenu5" class="limenu"><a id="amenu" class="c5" href="#" title="Menu 5">Site map</a></li> </ul> </div>

CSS code

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ height:34px;/*height of the drop down menu*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 22px; width: 100%; background-color: #989; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; /*Font Size for menu you can resize by editing [ 16px ] to EX: [12px or any size adding “px” is important ]*/ display: block; color: #0000FF; text-decoration: none; padding: 5px 10px; text-align: center; border:1px solid #fff; background-color: #abc; } #mdsntheem :hover > a#amenu { background-color: #789; color:#000; } #mdsntheem ul.ulmenu li.limenu, #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu{ float: left; width: 130px; list-style-type:none; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; width: 200px; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu{ display:block; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu{ position: absolute; margin-left: 130px; margin-top: -31px; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 20px; width:170px; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font:Times New Roman; font-size:16px; /*Font Size for menu you can resize by editing [ 16px ] to EX: [12px or any size adding “px” is important ]*/ display: block; text-decoration: none; padding: 7px 10px; text-align: center; background:none; color:#0000FF; border:1px solid #fff; background-color: #abc; } #mdsntheem :hover > a#amenu { background-color: #789; color:#000; } #mdsntheem ul.ulmenu li.limenu, #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu{ float: left; width: 170px; list-style-type:none; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu { display:block; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li:hover ul.ulmenu{ position: absolute; margin-left: 170px; margin-top: -31px; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ height:34px;/*height of the drop down menu*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 22px; width: 100%; background-color: #989; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; display: block; color: #0000FF; text-decoration: none; padding: 5px 10px; text-align: center; border:1px solid #fff; background-color: #abc; } #mdsntheem :hover > a#amenu { background-color: #789; color:#000; } #mdsntheem ul.ulmenu li.limenu, #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu{ float: left; list-style-type:none; width:130px; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ width: 200px; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu { position: absolute; margin-left: 200px; margin-top: -2em; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu { display:block; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 20px; width:170px; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font:Times New Roman; font-size:16px; /*Font Size for menu you can resize by editing [ 16px ] to EX: [12px or any size adding “px” is important ]*/ display: block; text-decoration: none; padding: 7px 10px; text-align: center; background:none; color:#0000FF; border:1px solid #fff; background-color: #abc; } #mdsntheem :hover > a#amenu { background-color: #789; color:#000; } #mdsntheem ul.ulmenu li.limenu{ float: left; width: 170px; list-style-type:none; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ width: 220px; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu{ display:block; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu{ position: absolute; margin-left: 170px; margin-top: -31px; } #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li:hover ul.ulmenu{ position: absolute; margin-left: 220px; margin-top:-31px; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

Active link for This code

<style type="text/css"> /**MDSNActivelinkpagescriptstart**/ #mdsntheem a#amenu.c1, /** Home **/ #mdsntheem a#amenu.c2, /** menu >> **/ #mdsntheem a#amenu.c21, /** menu21 **/ #mdsntheem a#amenu.c22, /** menu22 **/ #mdsntheem a#amenu.c221, /** menu221 **/ #mdsntheem a#amenu.c222, /** menu222 **/ #mdsntheem a#amenu.c223, /** menu223 **/ #mdsntheem a#amenu.c224, /** menu224 **/ #mdsntheem a#amenu.c23, /** menu23 **/ #mdsntheem a#amenu.c3, /** menu3 >> **/ #mdsntheem a#amenu.c31, /** menu31 **/ #mdsntheem a#amenu.c32, /** menu32 **/ #mdsntheem a#amenu.c33, /** menu33 **/ #mdsntheem a#amenu.c34, /** menu34 **/ #mdsntheem a#amenu.c4, /** About me **/ #mdsntheem a#amenu.c5 /** Site map **/ {background-color: #789; color:#000;} /**MDSNActivelinkpagescriptend**/ </style>

 

04.Pure css Drop Down menu

4.Pure css Drop Down menu

<<<< 1 2 3 4 5 6 7 >>>>

Select Theem Style 1 Style 2

Select Drop Down menu
Drop Down menu Style Horizontal Vertical

Select Drop Down menu
Drop Down menu Style Horizontal Vertical

Html Code

<div id="mdsntheem"> <ul class="ulmenu"> <li id="idmenu1" class="limenu"><a id="amenu" class="c1" href="#" title="Menu 1">Home</a></li> <li id="idmenu2" class="limenu"><a id="amenu" class="c2" href="#" title="Menu 2">Menu 2 &gt;&gt;</a> <ul class="ulmenu"> <li id="idmenu21" class="limenu"><a id="amenu" class="c21" href="#" title="Menu 21">Menu 21</a></li> <li id="idmenu22" class="limenu"><a id="amenu" class="c22" href="#" title="Menu 22">Menu 22 &gt;&gt;</a> <ul class="ulmenu"> <li id="idmenu221" class="limenu"><a id="amenu" class="c221" href="#" title="Menu 221">Menu 221</a></li> <li id="idmenu222" class="limenu"><a id="amenu" class="c222" href="#" title="Menu 222">Menu 222</a></li> <li id="idmenu223" class="limenu"><a id="amenu" class="c223" href="#" title="Menu 223">Menu 223</a></li> <li id="idmenu224" class="limenu"><a id="amenu" class="c224" href="#" title="Menu 224">Menu 224</a></li> </ul> </li> <li id="idmenu23" class="limenu"><a id="amenu" class="c23" href="#" title="Menu 23">Menu 21</a></li> </ul> </li> <li id="idmenu3" class="limenu"><a id="amenu" class="c3" href="#" title="Menu 3">Menu 3 &gt;&gt;</a> <ul class="ulmenu"> <li id=idmenu31 class="limenu"><a id="amenu" class="c31" href="#" title="Menu 31">Menu 31</a></li> <li id=idmenu32 class="limenu"><a id="amenu" class="c32" href="#" title="Menu 32">Menu 32</a></li> <li id=idmenu33 class="limenu"><a id="amenu" class="c33" href="#" title="Menu 33">Menu 33</a></li> <li id=idmenu34 class="limenu"><a id="amenu" class="c34" href="#" title="Menu 34">Menu 34</a></li> </ul> </li> <li id="idmenu4" class="limenu"><a id="amenu" class="c4" href="#" title="Menu 4">About me</a></li> <li id="idmenu5" class="limenu"><a id="amenu" class="c5" href="#" title="Menu 5">Site map</a></li> </ul> </div>

CSS code

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ height:34px;/*height of the drop down menu*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 22px; width: 100%; background-color: #999; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; /*Font Size for menu you can resize by editing [ 16px ] to EX: [12px or any size adding “px” is important ]*/ display: block; color: #FFF; text-decoration: none; padding: 5px 10px; text-align: center; border:1px solid #000; background-color: #3d3d3d; } #mdsntheem :hover > a#amenu { background-color: #cccccc; color:#000; } #mdsntheem ul.ulmenu li.limenu, #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu{ float: left; width: 130px; list-style-type:none; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; width: 200px; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu{ display:block; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu{ position: absolute; margin-left: 130px; margin-top: -31px; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 20px; width:170px; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font:Times New Roman; font-size:16px; /*Font Size for menu you can resize by editing [ 16px ] to EX: [12px or any size adding “px” is important ]*/ display: block; text-decoration: none; padding: 7px 10px; text-align: center; background:none; color:#FFF; border:1px solid #000; background-color: #3d3d3d; } #mdsntheem :hover > a#amenu { background-color: #cccccc; color:#000; } #mdsntheem ul.ulmenu li.limenu, #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu{ float: left; width: 170px; list-style-type:none; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu { display:block; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li:hover ul.ulmenu{ position: absolute; margin-left: 170px; margin-top: -31px; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ height:34px;/*height of the drop down menu*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 22px; width: 100%; background-color: #999; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; display: block; color: #fff; text-decoration: none; padding: 5px 10px; text-align: center; border:1px solid #000; background-color: #3d3d3d; } #mdsntheem :hover > a#amenu { background-color: #cccccc; color:#000; } #mdsntheem ul.ulmenu li.limenu, #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu{ float: left; list-style-type:none; width:130px; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ width: 200px; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu { position: absolute; margin-left: 200px; margin-top: -2em; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu { display:block; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 20px; width:170px; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font:Times New Roman; font-size:16px; /*Font Size for menu you can resize by editing [ 16px ] to EX: [12px or any size adding “px” is important ]*/ display: block; text-decoration: none; padding: 7px 10px; text-align: center; background:none; color:#fff; border:1px solid #000; background-color: #3d3d3d; } #mdsntheem :hover > a#amenu { background-color: #cccccc; color:#000; } #mdsntheem ul.ulmenu li.limenu{ float: left; width: 170px; list-style-type:none; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ width: 220px; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu{ display:block; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu{ position: absolute; margin-left: 170px; margin-top: -31px; } #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li:hover ul.ulmenu{ position: absolute; margin-left: 220px; margin-top:-31px; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

Active link for This code

<style type="text/css"> /**MDSNActivelinkpagescriptstart**/ #mdsntheem a#amenu.c1, /** Home **/ #mdsntheem a#amenu.c2, /** menu >> **/ #mdsntheem a#amenu.c21, /** menu21 **/ #mdsntheem a#amenu.c22, /** menu22 **/ #mdsntheem a#amenu.c221, /** menu221 **/ #mdsntheem a#amenu.c222, /** menu222 **/ #mdsntheem a#amenu.c223, /** menu223 **/ #mdsntheem a#amenu.c224, /** menu224 **/ #mdsntheem a#amenu.c23, /** menu23 **/ #mdsntheem a#amenu.c3, /** menu3 >> **/ #mdsntheem a#amenu.c31, /** menu31 **/ #mdsntheem a#amenu.c32, /** menu32 **/ #mdsntheem a#amenu.c33, /** menu33 **/ #mdsntheem a#amenu.c34, /** menu34 **/ #mdsntheem a#amenu.c4, /** About me **/ #mdsntheem a#amenu.c5 /** Site map **/ {background-color: #cccccc; color:#000;} /**MDSNActivelinkpagescriptend**/ </style>

 

03.Pure css Drop Down menu

3.Pure css Drop Down menu

<<<< 1 2 3 4 5 6 7 >>>>

Select Theem Style 1 Style 2

Select Drop Down menu
Drop Down menu Style Horizontal Vertical

Select Drop Down menu
Drop Down menu Style Horizontal Vertical

Html Code

<div id="mdsntheem"> <ul class="ulmenu"> <li id="idmenu1" class="limenu"><a id="amenu" class="c1" href="#" title="Menu 1">Home</a></li> <li id="idmenu2" class="limenu"><a id="amenu" class="c2" href="#" title="Menu 2">Menu 2 &gt;&gt;</a> <ul class="ulmenu"> <li id="idmenu21" class="limenu"><a id="amenu" class="c21" href="#" title="Menu 21">Menu 21</a></li> <li id="idmenu22" class="limenu"><a id="amenu" class="c22" href="#" title="Menu 22">Menu 22 &gt;&gt;</a> <ul class="ulmenu"> <li id="idmenu221" class="limenu"><a id="amenu" class="c221" href="#" title="Menu 221">Menu 221</a></li> <li id="idmenu222" class="limenu"><a id="amenu" class="c222" href="#" title="Menu 222">Menu 222</a></li> <li id="idmenu223" class="limenu"><a id="amenu" class="c223" href="#" title="Menu 223">Menu 223</a></li> <li id="idmenu224" class="limenu"><a id="amenu" class="c224" href="#" title="Menu 224">Menu 224</a></li> </ul> </li> <li id="idmenu23" class="limenu"><a id="amenu" class="c23" href="#" title="Menu 23">Menu 21</a></li> </ul> </li> <li id="idmenu3" class="limenu"><a id="amenu" class="c3" href="#" title="Menu 3">Menu 3 &gt;&gt;</a> <ul class="ulmenu"> <li id=idmenu31 class="limenu"><a id="amenu" class="c31" href="#" title="Menu 31">Menu 31</a></li> <li id=idmenu32 class="limenu"><a id="amenu" class="c32" href="#" title="Menu 32">Menu 32</a></li> <li id=idmenu33 class="limenu"><a id="amenu" class="c33" href="#" title="Menu 33">Menu 33</a></li> <li id=idmenu34 class="limenu"><a id="amenu" class="c34" href="#" title="Menu 34">Menu 34</a></li> </ul> </li> <li id="idmenu4" class="limenu"><a id="amenu" class="c4" href="#" title="Menu 4">About me</a></li> <li id="idmenu5" class="limenu"><a id="amenu" class="c5" href="#" title="Menu 5">Site map</a></li> </ul> </div>

CSS code

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ height:34px;/*height of the drop down menu*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 22px; width: 100%; background-color: #999; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; /*Font Size for menu you can resize by editing [ 16px ] to EX: [12px or any size adding “px” is important ]*/ display: block; color: #FFF; text-decoration: none; padding: 5px 10px; text-align: center; border:1px solid #d9d9d9; background-color: #3d3d3d; } #mdsntheem :hover > a#amenu { background-color: #4698ca; color:#fff; } #mdsntheem ul.ulmenu li.limenu, #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu{ float: left; width: 130px; list-style-type:none; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; width: 200px; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu{ display:block; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu{ position: absolute; margin-left: 130px; margin-top: -31px; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 20px; width:170px; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font:Times New Roman; font-size:16px; /*Font Size for menu you can resize by editing [ 16px ] to EX: [12px or any size adding “px” is important ]*/ display: block; text-decoration: none; padding: 7px 10px; text-align: center; background:none; color:#FFF; border:1px solid #d9d9d9; background-color: #3d3d3d; } #mdsntheem :hover > a#amenu { background-color: #4698ca; color:#fff; } #mdsntheem ul.ulmenu li.limenu, #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu{ float: left; width: 170px; list-style-type:none; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu { display:block; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li:hover ul.ulmenu{ position: absolute; margin-left: 170px; margin-top: -31px; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ height:34px;/*height of the drop down menu*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 22px; width: 100%; background-color: #999; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; display: block; color: #FFF; text-decoration: none; padding: 5px 10px; text-align: center; border:1px solid #d9d9d9; background-color: #3d3d3d; } #mdsntheem :hover > a#amenu { background-color: #4698ca; color:#fff; } #mdsntheem ul.ulmenu li.limenu, #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu{ float: left; list-style-type:none; width:130px; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ width: 200px; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu { position: absolute; margin-left: 200px; margin-top: -2em; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu { display:block; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 20px; width:170px; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font:Times New Roman; font-size:16px; /*Font Size for menu you can resize by editing [ 16px ] to EX: [12px or any size adding “px” is important ]*/ display: block; text-decoration: none; padding: 7px 10px; text-align: center; background:none; color:#FFF; border:1px solid #d9d9d9; background-color: #3d3d3d; } #mdsntheem :hover > a#amenu { background-color: #4698ca; color:#fff; } #mdsntheem ul.ulmenu li.limenu{ float: left; width: 170px; list-style-type:none; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ width: 220px; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu{ display:block; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu{ position: absolute; margin-left: 170px; margin-top: -31px; } #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li:hover ul.ulmenu{ position: absolute; margin-left: 220px; margin-top:-31px; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

Active link for This code

<style type="text/css"> /**MDSNActivelinkpagescriptstart**/ #mdsntheem a#amenu.c1, /** Home **/ #mdsntheem a#amenu.c2, /** menu >> **/ #mdsntheem a#amenu.c21, /** menu21 **/ #mdsntheem a#amenu.c22, /** menu22 **/ #mdsntheem a#amenu.c221, /** menu221 **/ #mdsntheem a#amenu.c222, /** menu222 **/ #mdsntheem a#amenu.c223, /** menu223 **/ #mdsntheem a#amenu.c224, /** menu224 **/ #mdsntheem a#amenu.c23, /** menu23 **/ #mdsntheem a#amenu.c3, /** menu3 >> **/ #mdsntheem a#amenu.c31, /** menu31 **/ #mdsntheem a#amenu.c32, /** menu32 **/ #mdsntheem a#amenu.c33, /** menu33 **/ #mdsntheem a#amenu.c34, /** menu34 **/ #mdsntheem a#amenu.c4, /** About me **/ #mdsntheem a#amenu.c5 /** Site map **/ {color:#fff; background-color: #4698ca;} /**MDSNActivelinkpagescriptend**/ </style>

 

02.Pure css Drop down menu

2.Pure css Drop Down menu

<<<< 1 2 3 4 5 6 7 >>>>

Select Theem Style 1 Style 2

Select Drop Down menu
Drop Down menu Style Horizontal Vertical

Select Drop Down menu
Drop Down menu Style Horizontal Vertical

Html Code

<div id="mdsntheem"> <ul class="ulmenu"> <li id="idmenu1" class="limenu"><a id="amenu" class="c1" href="#" title="Menu 1">Home</a></li> <li id="idmenu2" class="limenu"><a id="amenu" class="c2" href="#" title="Menu 2">Menu 2 &gt;&gt;</a> <ul class="ulmenu"> <li id="idmenu21" class="limenu"><a id="amenu" class="c21" href="#" title="Menu 21">Menu 21</a></li> <li id="idmenu22" class="limenu"><a id="amenu" class="c22" href="#" title="Menu 22">Menu 22 &gt;&gt;</a> <ul class="ulmenu"> <li id="idmenu221" class="limenu"><a id="amenu" class="c221" href="#" title="Menu 221">Menu 221</a></li> <li id="idmenu222" class="limenu"><a id="amenu" class="c222" href="#" title="Menu 222">Menu 222</a></li> <li id="idmenu223" class="limenu"><a id="amenu" class="c223" href="#" title="Menu 223">Menu 223</a></li> <li id="idmenu224" class="limenu"><a id="amenu" class="c224" href="#" title="Menu 224">Menu 224</a></li> </ul> </li> <li id="idmenu23" class="limenu"><a id="amenu" class="c23" href="#" title="Menu 23">Menu 21</a></li> </ul> </li> <li id="idmenu3" class="limenu"><a id="amenu" class="c3" href="#" title="Menu 3">Menu 3 &gt;&gt;</a> <ul class="ulmenu"> <li id=idmenu31 class="limenu"><a id="amenu" class="c31" href="#" title="Menu 31">Menu 31</a></li> <li id=idmenu32 class="limenu"><a id="amenu" class="c32" href="#" title="Menu 32">Menu 32</a></li> <li id=idmenu33 class="limenu"><a id="amenu" class="c33" href="#" title="Menu 33">Menu 33</a></li> <li id=idmenu34 class="limenu"><a id="amenu" class="c34" href="#" title="Menu 34">Menu 34</a></li> </ul> </li> <li id="idmenu4" class="limenu"><a id="amenu" class="c4" href="#" title="Menu 4">About me</a></li> <li id="idmenu5" class="limenu"><a id="amenu" class="c5" href="#" title="Menu 5">Site map</a></li> </ul> </div>

CSS code

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ height:34px;/*height of the drop down menu*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 22px; width: 100%; background-color: #BBD9EE; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; /*Font Size for menu you can resize by editing [ 16px ] to EX: [12px or any size adding “px” is important ]*/ display: block; color: #000; text-decoration: none; padding: 5px 10px; text-align: center; border:1px solid #d9d9d9; background-color: #f6f6f6; } #mdsntheem :hover > a#amenu { background-color: #eee; color:#00f; } #mdsntheem ul.ulmenu li.limenu, #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu{ float: left; width: 130px; list-style-type:none; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; width: 200px; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu{ display:block; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu{ position: absolute; margin-left: 130px; margin-top: -31px; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 20px; width:170px; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font:Times New Roman; font-size:16px; /*Font Size for menu you can resize by editing [ 16px ] to EX: [12px or any size adding “px” is important ]*/ display: block; text-decoration: none; padding: 7px 10px; text-align: center; background:none; color:#000; border:1px solid #d9d9d9; background-color: #f6f6f6; } #mdsntheem :hover > a#amenu { background-color: #eee; color:#00f; } #mdsntheem ul.ulmenu li.limenu, #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu{ float: left; width: 170px; list-style-type:none; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu { display:block; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li:hover ul.ulmenu{ position: absolute; margin-left: 170px; margin-top: -31px; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ height:34px;/*height of the drop down menu*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 22px; width: 100%; background-color: #BBD9EE; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; display: block; color: #000; text-decoration: none; padding: 5px 10px; text-align: center; border:1px solid #d9d9d9; background-color: #f6f6f6; } #mdsntheem :hover > a#amenu { background-color: #eee; color:#00f; } #mdsntheem ul.ulmenu li.limenu, #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu{ float: left; list-style-type:none; width:130px; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ width: 200px; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu { position: absolute; margin-left: 200px; margin-top: -2em; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu { display:block; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 20px; width:170px; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font:Times New Roman; font-size:16px; /*Font Size for menu you can resize by editing [ 16px ] to EX: [12px or any size adding “px” is important ]*/ display: block; text-decoration: none; padding: 7px 10px; text-align: center; background:none; color:#000; border:1px solid #d9d9d9; background-color: #f6f6f6; } #mdsntheem :hover > a#amenu { background-color: #eee; color:#00f; } #mdsntheem ul.ulmenu li.limenu{ float: left; width: 170px; list-style-type:none; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ width: 220px; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu{ display:block; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu{ position: absolute; margin-left: 170px; margin-top: -31px; } #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li:hover ul.ulmenu{ position: absolute; margin-left: 220px; margin-top:-31px; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

Active link for This code

<style type="text/css"> /**MDSNActivelinkpagescriptstart**/ #mdsntheem a#amenu.c1, /** Home **/ #mdsntheem a#amenu.c2, /** menu >> **/ #mdsntheem a#amenu.c21, /** menu21 **/ #mdsntheem a#amenu.c22, /** menu22 **/ #mdsntheem a#amenu.c221, /** menu221 **/ #mdsntheem a#amenu.c222, /** menu222 **/ #mdsntheem a#amenu.c223, /** menu223 **/ #mdsntheem a#amenu.c224, /** menu224 **/ #mdsntheem a#amenu.c23, /** menu23 **/ #mdsntheem a#amenu.c3, /** menu3 >> **/ #mdsntheem a#amenu.c31, /** menu31 **/ #mdsntheem a#amenu.c32, /** menu32 **/ #mdsntheem a#amenu.c33, /** menu33 **/ #mdsntheem a#amenu.c34, /** menu34 **/ #mdsntheem a#amenu.c4, /** About me **/ #mdsntheem a#amenu.c5 /** Site map **/ {color:#00f; background-color: #eee;} /**MDSNActivelinkpagescriptend**/ </style>

 

01.Pure css Drop down menu

1.Pure css Drop Down menu  

1 2 3 4 5 6 7 >>>>

Step 1: Hear on YouTube video you can learn how to use this code

How to create a pure css drop down menu for websites or bloggers and blogger basics tutorial Part 1

How to create a pure css drop down menu for websites or bloggers and blogger basics tutorial Part 2

Step 2: Select Theme first (ex:Style 1(or)Style 2) ,
Then Select Drop Down menu (ex: Horizontal(or)Vertical) below 

Step 3: Copy the code below. 

01.Pure css Drop Down menu  Click here>>

Select Them Style 1 Style 2

Select Drop Down menu
Drop Down menu Style Horizontal Vertical

Select Drop Down menu
Drop Down menu Style Horizontal Vertical

Html Code

<div id="mdsntheem"> <ul class="ulmenu"> <li id="idmenu1" class="limenu"><a id="amenu" class="c1" href="#" title="Menu 1">Home</a></li> <li id="idmenu2" class="limenu"><a id="amenu" class="c2" href="#" title="Menu 2">Menu 2 &gt;&gt;</a> <ul class="ulmenu"> <li id="idmenu21" class="limenu"><a id="amenu" class="c21" href="#" title="Menu 21">Menu 21</a></li> <li id="idmenu22" class="limenu"><a id="amenu" class="c22" href="#" title="Menu 22">Menu 22 &gt;&gt;</a> <ul class="ulmenu"> <li id="idmenu221" class="limenu"><a id="amenu" class="c221" href="#" title="Menu 221">Menu 221</a></li> <li id="idmenu222" class="limenu"><a id="amenu" class="c222" href="#" title="Menu 222">Menu 222</a></li> <li id="idmenu223" class="limenu"><a id="amenu" class="c223" href="#" title="Menu 223">Menu 223</a></li> <li id="idmenu224" class="limenu"><a id="amenu" class="c224" href="#" title="Menu 224">Menu 224</a></li> </ul> </li> <li id="idmenu23" class="limenu"><a id="amenu" class="c23" href="#" title="Menu 23">Menu 21</a></li> </ul> </li> <li id="idmenu3" class="limenu"><a id="amenu" class="c3" href="#" title="Menu 3">Menu 3 &gt;&gt;</a> <ul class="ulmenu"> <li id=idmenu31 class="limenu"><a id="amenu" class="c31" href="#" title="Menu 31">Menu 31</a></li> <li id=idmenu32 class="limenu"><a id="amenu" class="c32" href="#" title="Menu 32">Menu 32</a></li> <li id=idmenu33 class="limenu"><a id="amenu" class="c33" href="#" title="Menu 33">Menu 33</a></li> <li id=idmenu34 class="limenu"><a id="amenu" class="c34" href="#" title="Menu 34">Menu 34</a></li> </ul> </li> <li id="idmenu4" class="limenu"><a id="amenu" class="c4" href="#" title="Menu 4">About me</a></li> <li id="idmenu5" class="limenu"><a id="amenu" class="c5" href="#" title="Menu 5">Site map</a></li> </ul> </div>

CSS code

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ height:34px;/*height of the drop down menu*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 22px; width: 100%; background-color: #6600CC; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; /*Font Size for menu you can resize by editing [ 16px ] to EX: [12px or any size adding “px” is important ]*/ display: block; color: #FFF; text-decoration: none; padding: 5px 10px; text-align: center; border:1px solid #fff; background-color: #999; } #mdsntheem :hover > a#amenu { background-color: #5421ba; color:#fff; } #mdsntheem ul.ulmenu li.limenu, #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu{ float: left; width: 130px; list-style-type:none; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; width: 200px; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu{ display:block; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu{ position: absolute; margin-left: 130px; margin-top: -31px; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 20px; width:170px; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font:Times New Roman; font-size:16px; /*Font Size for menu you can resize by editing [ 16px ] to EX: [12px or any size adding “px” is important ]*/ display: block; text-decoration: none; padding: 7px 10px; text-align: center; background:none; color:#FFF; border:1px solid #fff; background-color: #999; } #mdsntheem :hover > a#amenu { background-color: #5421ba; color:#fff; } #mdsntheem ul.ulmenu li.limenu, #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu{ float: left; width: 170px; list-style-type:none; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu { display:block; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li:hover ul.ulmenu{ position: absolute; margin-left: 170px; margin-top: -31px; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ height:34px;/*height of the drop down menu*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 22px; width: 100%; background-color: #6600CC; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; display: block; color: #FFF; text-decoration: none; padding: 5px 10px; text-align: center; border:1px solid #fff; background-color: #999; } #mdsntheem :hover > a#amenu { background-color: #5421ba; color:#fff; } #mdsntheem ul.ulmenu li.limenu, #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu{ float: left; list-style-type:none; width:130px; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ width: 200px; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu { position: absolute; margin-left: 200px; margin-top: -2em; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu { display:block; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

<style type="text/css"> #mdsntheem * { padding:0; margin: 0; } #mdsntheem { top:auto;/*auto;/*To change top position for example “10px “go’s down and “-10px” go’s up.*/ left:auto;/*To change left position for exapple”10px”go’s right and “-10px”gos’s left.*/ position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 20px; width:170px; } #mdsntheem a#amenu { font-family:Georgia, "Times New Roman", Times, serif; font:Times New Roman; font-size:16px; /*Font Size for menu you can resize by editing [ 16px ] to EX: [12px or any size adding “px” is important ]*/ display: block; text-decoration: none; padding: 7px 10px; text-align: center; background:none; color:#FFF; border:1px solid #fff; background-color: #999; } #mdsntheem :hover > a#amenu { background-color: #5421ba; color:#fff; } #mdsntheem ul.ulmenu li.limenu{ float: left; width: 170px; list-style-type:none; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu li.limenu, #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li.limenu ul.ulmenu{ width: 220px; } #mdsntheem ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu li.limenu ul.ulmenu{ cursor:pointer; display:none; list-style-type:none; } #mdsntheem:hover ul.ulmenu, #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu, #mdsntheem ul.ulmenu li.limenu:hover ul.ulmenu li.limenu:hover ul.ulmenu{ display:block; } #mdsntheem:hover ul.ulmenu li.limenu:hover ul.ulmenu{ position: absolute; margin-left: 170px; margin-top: -31px; } #mdsntheem:hover ul.ulmenu li:hover ul.ulmenu li:hover ul.ulmenu{ position: absolute; margin-left: 220px; margin-top:-31px; } #mdsntheem > ul.ulmenu, #mdsntheem > li.limenu{ background:none; border:none; } </style>

Active link for This code

<style type="text/css"> /**MDSNActivelinkpagescriptstart**/ #mdsntheem a#amenu.c1, /** Home **/ #mdsntheem a#amenu.c2, /** menu >> **/ #mdsntheem a#amenu.c21, /** menu21 **/ #mdsntheem a#amenu.c22, /** menu22 **/ #mdsntheem a#amenu.c221, /** menu221 **/ #mdsntheem a#amenu.c222, /** menu222 **/ #mdsntheem a#amenu.c223, /** menu223 **/ #mdsntheem a#amenu.c224, /** menu224 **/ #mdsntheem a#amenu.c23, /** menu23 **/ #mdsntheem a#amenu.c3, /** menu3 >> **/ #mdsntheem a#amenu.c31, /** menu31 **/ #mdsntheem a#amenu.c32, /** menu32 **/ #mdsntheem a#amenu.c33, /** menu33 **/ #mdsntheem a#amenu.c34, /** menu34 **/ #mdsntheem a#amenu.c4, /** About me **/ #mdsntheem a#amenu.c5 /** Site map **/ { color:#fff; background-color: #5421ba;} /**MDSNActivelinkpagescriptend**/ </style>