Simple Green Css Menü

[#Captain]

Admin KP - Şablon & Stil - Kullandığınız Tema - Global.css'e girip aşağıdaki kodları en altına ekleyiniz..

Kod: Tümünü Seç Tümünü Kopyala

#cssmenu {
     border:1px solid #006600;
     background:#006600;
     }
#cssmenu > ul {
     padding:1px 0;
     margin:0px;
     list-style:none;
     width:100%;
     height:21px;
     border-top:1px solid #FFFFFF;
     border-bottom:1px solid #FFFFFF;
     font:normal 8pt verdana, arial, helvetica;
}
#cssmenu > ul li {
     margin:0;
     padding:0;
     display:block;
     float:left;
     position:relative;
     width:148px;
}
#cssmenu > ul li a:link, #cssmenu > ul li a:visited {
     padding:4px 0;
     display:block;
     text-align:center;
     text-decoration:none;
     background:#006600;
     color:#ffffff;
     width:148px;
     height:13px;
}
#cssmenu > ul li:hover a, #cssmenu > ul li a:hover, #cssmenu > ul li a:active {
     padding:4px 0;
     display:block;
     text-align:center;
     text-decoration:none;
     background:#339933;
     color:#ffffff;
     width:146px;
     height:13px;
     border-left:1px solid #ffffff;
     border-right:1px solid #ffffff;
}
#cssmenu > ul li ul {
     margin:0;
     padding:1px 1px 0;
     list-style:none;
     display:none;
     background:#ffffff;
     width:146px;
     position:absolute;
     top:21px;
     left:-1px;
     border:1px solid #006600;
     border-top:none;
}
#cssmenu > ul li:hover ul {
     display:block;
}
#cssmenu > ul li ul li {
     width:146px;
     clear:left;
     width:146px;
}
#cssmenu > ul li ul li a:link, #cssmenu > ul li ul li a:visited {
     clear:left;
     background:#006600;
     padding:4px 0;
     width:146px;
     border:none;
     border-bottom:1px solid #ffffff;
     position:relative;
     z-index:1000;
}
#cssmenu > ul li ul li:hover a, #cssmenu > ul li ul li a:active, #cssmenu > ul li ul li a:hover {
     clear:left;
     background:#339933;
     padding:4px 0;
     width:146px;
     border:none;
     border-bottom:1px solid #ffffff;
     position:relative;
     z-index:1000;
}
#cssmenu > ul li ul li ul.navigation-3 {
     display:none;
     margin:0;
     padding:0;
     list-style:none;
     position:absolute;
     left:145px;
     top:-2px;
     padding:1px 1px 0 1px;
     border:1px solid #006600;
     border-left:1px solid #006600;
     background:#ffffff;
     z-index:900;
}
#cssmenu > ul li ul li:hover ul.navigation-3 {
     display:block;
}
#cssmenu > ul li ul li ul.navigation-3 li a:link, #cssmenu > ul li ul li ul.navigation-3 li a:visited {
     background:#006600;
}
#cssmenu > ul li ul li ul.navigation-3 li:hover a, #cssmenu > ul li ul li ul.navigation-3 li a:hover, #cssmenu > ul li ul li ul.navigation-3 li a:active {
     background:#339933;
}

Admin KP - Şablon & Stil - Şablonlar - Kullandığınız Tema - Header Şablonları - Header'e girip aşağıdaki kodları istediğiniz yere ekleyin-uyarlayın..

Kod: Tümünü Seç Tümünü Kopyala

<div id='cssmenu'>
<ul>
    <li class='active'><a href='index.html'><span>Home</span></a></li>
    <li class='has-sub'><a href='#'><span>Products</span></a>
       <ul>
          <li><a href='#'><span>Product 1</span></a></li>
          <li class='last'><a href='#'><span>Product 2</span></a></li>
       </ul>
    </li>
    <li><a href='#'><span>About</span></a></li>
    <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>