CSS XHTML Tutorial

CSS XHTML Tutorial
CSS XHTML tutorial

Wednesday, January 13, 2010

CSS Based Vertical Navigation With Mouse-Over Effect


Create following styles in your head section ;

<style type="text/css">

*{padding:0; margin:0;}

body{background:#f6f6f6; font-family:Tahoma, Geneva, sans-serif;}

ul.nav{ list-style:none inside; margin:10px; width:200px; font-size:14px; font-weight:bold;}

ul.nav li{ height:auto; margin:0; border-top:1px #9cf solid; border-bottom:1px #369 solid;}

ul.nav li a{ text-decoration:none; display:block; color:#fff; border-left:20px #069 solid; background:#09C; padding:5px 10px;}

ul.nav li a:hover, ul.nav li.active a{ text-decoration:none; display:block; color:#036; border-left:20px #09c solid; background:#ace; padding:5px 10px;}

</style>

Type the following code in your body section

<body>

<ul class="nav">

<li class="active"><a href="#">Link-1</a></li>

<li><a href="#">Link-2</a></li>

<li><a href="#">Link-3</a></li>

<li><a href="#">Link-4</a></li>

<li><a href="#">Link-5</a></li>

<li><a href="#">Link-6</a></li>

<li><a href="#">Link-7</a></li>

</ul>

</body>

</html>