Hi
Im trying out some changes to my website and part of this is editing my horizontal menu to vertical. I've made it vertical but lost some of the style but not sure how:
www.electrifire.co.uk/test.php
this is the original menu css
#menu{ height:37px; width:100%; padding:0 0px 5px 0;}
#menu ul{ list-style:none;}
#menu ul li{ display:block; float:left; background:url(images/bord.gif) no-repeat top right; padding:0 1px 0 0;}
#menu ul li.right{ background:none;}
#menu ul li a{ float:left; background:url(images/menu.gif) repeat-x 0 0; height:37px; font:bold 13px/37px Arial;color:#828373; text-decoration:none; padding:0 21px;}
#menu ul li a.left{ background-position: 0 -111px; padding:0 25px 0 32px;}
#menu ul li a.right{ background-position: right -148px; padding:0 32px 0 25px;}
#menu ul li a:hover,#menu ul li a.active{ background-position:0 -37px; color:#fff;}
#menu ul li a.left:hover,#menu ul li a.left.active{ background-position: 0 -74px!important;}
#menu ul li a.right:hover,#menu ul li a.right.active{ background-position: right -184px;}
and this is the new part of the menu:
#menu2
#menu2{ height:37px; width:34%; padding:0 0px 5px 0;}
#menu2 ul{ list-style:none;}
#menu2 ul li{ display:block; background:url(images/bord.gif) no-repeat top right; padding:0 1px 0 0;}
#menu2 ul li.right{ background:none;}
#menu2 ul li {background:url(images/menu.gif) repeat-x 0 0; height:37px; font:bold 13px/37px Arial;color:#828373; text-decoration:none; padding:0 21px;}
#menu2 ul li a.left{ background-position: 0 px; padding:0 25px 0 32px;}
#menu2 ul li a.right{ background-position: right px; padding:0 32px 0 25px;}
#menu2 ul li a:hover,#menu ul li a.active{ background-position:0 -37px; color:#fff;}
#menu2 ul li a.left:hover,#menu ul li a.left.active{ background-position: 0 -74px!important;}
#menu2 ul li a.right:hover,#menu ul li a.right.active{ background-position: right -184px;}
Also I tried to reduce the width to 34% but it seems to remain at 100%
Where am I going wrong? |
