CSS XHTML Tutorial

CSS XHTML Tutorial
CSS XHTML tutorial
Showing posts with label learn css. Show all posts
Showing posts with label learn css. Show all posts

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>