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>