Hello
I have downloaded a template and I am trying to make some changes to it. I don't know much css, so I couldn't figure this out.
on the top, there is horizontal menu, like welcome, about us, contact us, etc.
The problem I am having is that the menu changes its width based on what words I write in the menu. For example, if I change "Contact Us" to just "Contact", the menu's width becomes smaller, because there are fewer letters in "contact us" than "contact". I want the menu's width to stay the same, not get smaller. Is that possible? Here is the relevant css code.
Code:
/***** menu *****/
.menu {
padding:0 0 0 0;
width:100%;
overflow:hidden;
}
#page1 .menu {margin-bottom:50px;}
.menu li {
float:left;
position:relative;
padding-left:2px;
background:url(../images/menu-spacer.gif) left top no-repeat;
}
.menu li:first-child {background:none;}
.menu li a {
display:block;
height:55px;
font-size:16px;
line-height:51px;
padding:0 64px 0 63px;
color:#42413D;
background:url(../images/menu-a.png) left bottom repeat-x #fff;
}
.menu li:first-child > a {border-radius:12px 0 0 12px; padding:0 67px;}
.menu li.last > a {border-radius:0 12px 12px 0; padding:0 66px 0 64px; }
.menu li.active a,
.menu > li > a:hover {
background-position:left top;
background-color:#e82d02;
color:#fff;
}