Monday, November 9, 2009

Css to create stretchable rounded menu

Here is is code for Stretchable rounded menu.:

.navigation{width:723px; float:right; height:28px; margin:23px 150px 0 0;}
.navigation ul{margin:0px; padding:0px; list-style-type:none;}
.navigation ul li{display:inline;}
.navigation ul li a{
background:url(../images/off_menu_left.png) left top no-repeat;
float:left;
height:28px;
text-decoration:none;
padding:0px 0px 0 14px;
line-height:28px;
}
.navigation ul li a span{
background:url(../images/off_menu_right.png) right top no-repeat;
display:block;
color:#cdcdcd;
padding:0 30px 0 16px;
}
.navigation ul li a:hover{
background:url(../images/on_menu_left.png) left top no-repeat;
float:left;
height:28px;
text-decoration:none;
padding:0px 0px 0 14px;
line-height:28px;
}
.navigation ul li a:hover span{
background:url(../images/on_menu_right.png) right top no-repeat;
display:block;
color:#210121;
padding:0 30px 0 16px;;
}
.navigation ul li.selected a{
background:url(../images/on_menu_left.png) left top no-repeat;
float:left;
height:28px;
text-decoration:none;
padding:0px 0px 0 14px;
line-height:28px;
}
.navigation ul li.selected a span{
background:url(../images/on_menu_right.png) right top no-repeat;
display:block;
color:#210121;
padding:0 30px 0 16px;
}
.navigation ul li.selected a:hover{
background:url(../images/off_menu_left.png) left top no-repeat;
float:left;
height:28px;
text-decoration:none;
padding:0px 0px 0 14px;
line-height:28px;
}
.navigation ul li.selected a:hover span{
background:url(../images/off_menu_right.png) right top no-repeat;
display:block;
color:#cdcdcd;
padding:0 30px 0 16px;;
}



No comments:

Post a Comment