[SOLVED] How to Control the Width of Current Menu Item
 

site: http://www.mindyhermann.com I'm temporarily displaying the site (rather than showing the "down for maintenance" page.

How can I get the current menu item to be the same width as the hover item? I've been trying for hours and I'm admitting defeat.

Probably inelegant, but my custom CSS is below. What am I missing?

Thanks in advance for the assistance!

/* Menu Bar */
div#menu1 ul.rMenu {
background: #333366;
height: 23px;
padding: 10px 5px 0px 0px;
}

div#menu1 ul.rMenu li {
margin: 0 0px;
}

/* Spacing between Menu Items */
#rmenu2 li {
padding:0px 10px 0px;
}

/* Hover colors */
div#menu1 ul.rMenu li a:hover {
background: #666699;
color: #ffffff;
}

For the spacing try using margins instead of padding.

Changing padding to margins didn't change anything. :-(

Sorry... I didn't mean to say just change all the paddings to margins. I just meant that you needed to use margins instead of paddings for the separation and tweak as necessary.

Currently your CSS looks like this.

Instead try the following as a starting point

I implemented your suggestion and the hover item is now the same width (5px wide right and left margin) as the current item, but I was looking for the other way around.

Is there a way to control the width of the current item? In other words, when Home is selected, the current (or selected item) (background: #ffffff) has 5px wide right and left margin and the hover item (background: #666699) has 15px wide right and left margin. How do I give the current (or selected item) (background: #ffffff) the same 15px wide right and left margin?

the current item gets assigned a class of 'current_page_item' - you can use that in your css selector.

In case anybody cares, the following is my solution:

/* Menu Bar */

div#menu1 {
float:left;
width:100%;
height: 23px;
background:#333366;
border-top: 10px solid #333366;
overflow:hidden;

}
div#menu1 ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:0%;
text-align:left;
}
div#menu1 ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:0%;
}
div#menu1 ul li a {
display:block;
margin:0 0 0 1px;
padding:5px 15px !important;
background:#333366;
color:#000;
text-decoration:none;
line-height:1.3em;
}
div#menu1 ul.rMenu li a:hover {
background:#666699;
color:#fff;
}
div#menu1 ul li a.active,
div#menu1 ul li a.active:hover {
color:#333366;
background:#fff;
font-weight:normal;
}