01.Pure css Drop Down menu

Select Theem

Select Drop Doewn menu

Select Drop Doewn menu

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

Subscribe to: Comments (Atom)