Below are screenshots of two menus, the first one is the customers site on another platform and the second one is from the skin I am creating in DNN to make both sites appear seamless when going to one page from another. The problem I am having is replicating their rollover state using too different font sizes in the li. The menu I am using in the skin is not Solpart, it is purely a tableless CSS/div configuration. Below are the classes I used to style it. How can I get my rollover state to be consistent from big font to smaller font? Thanks in advance.
Non-DNN site that I am trying to mimick
My Skin
/*New Skin Header classes*/
#header {
position: relative;
font: 14px Arial, sans-serif;
padding: 4px 14px;
}
#a.header {
position: relative;
font: 14px Arial, sans-serif;
padding: 0px 14px;
text-decoration: none;
}
#a.header:hover {
position: relative;
font: 14px Arial, sans-serif;
padding: 0px 14px;
text-decoration: underline;
}
#header #logo {
padding: 5px 0px;
}
#header #logo h1, #header #logo p {
display: none;
}
#header ul#account_links {
font-size: 93%;
position: absolute;
top: 27px;
right: 15px;
_right: 30px;
list-style-type: none;
}
#header ul#account_links li {
display: inline;
padding: 0px 5px;
color: #000;
}
#header ul#account_links li input.text_field {
width: 100px;
border: 1px solid #e5e5e5;
padding: 1px 2px;
}
#header ul#account_links li input.submit {
vertical-align: top;
}
#header ul#account_links li.last {
padding: 0px;
}
#header ul#main_nav {
height: 30px;
margin: 0px;
list-style-type: none;
padding: 0px;
}
#header ul#main_nav li {
float: left;
margin-right: 8px;
background: url(header/main_nav_button_right.gif) top right;
}
#header ul#main_nav li a {
float: left;
height: 30px;
padding: 0px 10px;
background: url(header/main_nav_button_left.gif) top left no-repeat;
color: #fff;
overflow: hidden;
}
#header ul#main_nav li a span {
line-height: 30px;
}
#header ul#main_nav li a span strong {
font-size: 129%;
}
#header ul#main_nav li.active {
background-image: url(header/main_nav_button_active_right.gif);
}
#header ul#main_nav li.active a {
background-image: url(header/main_nav_button_active_left.gif);
}
#header ul#main_nav li.home a span {
display: block;
background: url(header/icon_house.gif) left center no-repeat;
width: 16px;
height: 30px;
cursor: hand; }
#header ul#main_nav li.home a span strong {
display: none;
}
#header ul#main_nav li.home a:hover span {
background-position: right center;
}
#header ul#main_nav li.people_pictures span, #header ul#main_nav li.about span, #header ul#main_nav li.blog span {
line-height: 34px;
}
#header #sub_nav {
height: 6px;
_font-size: 0px;
background-color: #6C1F7E;
margin-top:0;
margin-left:0;
margin-bottom: 10px;
padding: 0px 0px;
list-style-type: none;
width: 100%;
}
#header ul#sub_nav {
position: relative;
height: 30px;
_font-size: 14px;
list-style-type: none;
padding: 0px;
width: 100%;
}
#header ul#sub_nav li {
float: left;
margin-left: -1px;
}
#header ul#sub_nav li a {
float: left;
height: 30px;
color: #fff;
background: url(header/sub_nav_div.gif) center right no-repeat;
padding: 0px 10px; }
#header ul#sub_nav li a span {
line-height: 30px;
}
#header ul#sub_nav li a.active {
position: relative;
background: #e2cee6 url(header/sub_nav_active.gif) center bottom no-repeat !important;
color: #6C1F7E;
margin-top: 1px;
margin-bottom: -9px;
height: 37px;
}
#header ul#sub_nav li.first {
margin: 0;
}
#header ul#sub_nav li.last a {
background: none;
}