MENU VERTIKAL tampa olah HMTL

Silahkan bagikan :

۞ السَّــــــلاَمُ عَلَيْــــــكُمْ وَرَحْمَــةُ اللــــهِ وَبَرَكَاتُــــــــــهُ ۞

۞ بســـــــــــــم اللّـــه الرّحمٰن الرّحيـــــــــــــم ۞

-----------------------------------------------------------------------

<style>
#v-menu { 
    margin: 0; 
    padding: 0; 
    font-family: Verdana, Helvetica, Arial, sans-serif; 
}
#v-menu { 
    width: 275px; 
}
#v-menu ul { 
    list-style: none; 
    text-indent: 0px; 
}
#v-menu li { 
    margin-top: 0px; 
    border-bottom: 1px solid #414141; 
}
#v-menu a { 
    font-family:Verdana, Geneva, sans-serif; 
    font-size: 15px; 
    font-weight:bold; 
    font-variant: inherit; 
    text-transform:uppercase; 
    padding: 0px; 
    color:#CCC; 
    display: block; 
    padding: 13px 50px; 
    height: 26px; 
    line-height: 26px; 
    text-decoration: none; 
    background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqJJATHr8x7f5tYL76JR-kUJUyO0j-15iALmGQKDiHBM40q962SM7dpGg7ezilGXk1UDoDo1hNd1UWcrQkuyBNN8Vfs7L8XtdWJqkKDXM9DAT3UJjcGESJwRXFfPUPdTNxsEvdxHvDjXX/s1600/menu-bg.png) no-repeat; 
    text-shadow: 1px 1px 1px #111; 
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715); 
}
#v-menu a:hover { 
    background: #5e5e5e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7NTdRBzqzLbhN7LKJHdt20F_5IMpq6Hd365c2kOfShmGdd8p8NvT983lDfCcwoLxMhnD23t0IiAmbowfkum8swqj-Y9EIRh35JYPUxxolO7QYfFTM50-Jh8rPoW0m7oxA1CmiVWtEqqK9/s1600/hover-bg.png) no-repeat; 
    font-size: 14px; 
    padding: 13px 60px; 
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    
}
#v-menu a:visited { 
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7NTdRBzqzLbhN7LKJHdt20F_5IMpq6Hd365c2kOfShmGdd8p8NvT983lDfCcwoLxMhnD23t0IiAmbowfkum8swqj-Y9EIRh35JYPUxxolO7QYfFTM50-Jh8rPoW0m7oxA1CmiVWtEqqK9/s1600/hover-bg.png) no-repeat;    
}
#v-menu a:active { 
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7NTdRBzqzLbhN7LKJHdt20F_5IMpq6Hd365c2kOfShmGdd8p8NvT983lDfCcwoLxMhnD23t0IiAmbowfkum8swqj-Y9EIRh35JYPUxxolO7QYfFTM50-Jh8rPoW0m7oxA1CmiVWtEqqK9/s1600/hover-bg.png) no-repeat;    
} 
</style>
<div id='v-menu'> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">Widgets</a></li> 
<li><a href="#">SEO</a></li> 
<li><a href="#">Adsense</a></li> 
<li><a href="#">Templates</a></li> 
<li><a href="#">Applications</a></li> 
</ul> 
</div>

۞ الحمد لله ربّ العٰلمين ۞

-----------------------------------------------------------------------