[SOLVED] page menu options with sub-menus problem

cway · #1 Mar 9, 2012, 12:24 PM

For the life of me, I can't figure out why the width of items with sub-menus are wider than those items that don't have sub-menus.

http://www.trentstudios.com/

Services, Support, etc. have sub-menus.

Atahualpa 3.7.3
WP 3.3.1

juggledad · #2 Mar 9, 2012, 12:36 PM

what do you have your submenu width defined as?

cway · #3 Mar 9, 2012, 12:49 PM

width of sub-menus is 20.

My custom CSS:

Code:

ul.rMenu {
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
border: 0 !important;
background-color: #5c5a5a !important;
}
ul.rMenu li { 
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
ul.rMenu li a { 
margin: 0 !important;
padding: 0 !important;
border: solid 0px #5c5a5a;
background-image: URL(http://www.trentstudios.com/images/orangetab.png) !important;
background-repeat: no-repeat;
background-color: #5c5a5a !important;
width: 123px !important;
height: 35px !important;
}

div#menu1 ul.rMenu li:hover > a,
background-color: #5c5a5a !important;
ul.rMenu li a: hover {
border: solid 0px #5c5a5a;
background-image: URL(http://www.trentstudios.com/images/orangetab.png) !important;
background-repeat: no-repeat;
width: 123px !important;
height: 35px !important;
}
ul.rMenu li.current_page_item a {
background-color: #5c5a5a !important;
color: #FFF !important;
background-image: URL(http://www.trentstudios.com/images/orangetab.png) !important;
background-repeat: no-repeat;
width: 123px !important;
height: 35px !important;
}

#menu1 {
background-color: #5c5a5a !important;
margin: 0px;
border: solid 0px #5c5a5a !important;
}

ul.rMenu-ver {
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
border: 0 !important;
}
ul.rMenu-ver li { 
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
ul.rMenu-ver li a { 
margin: 0 !important;
padding: 0 !important;
color: #FFF !important;
border: solid 0px #5c5a5a;
background-image: URL(http://www.trentstudios.com/images/dark-grey-sub-menu-background.gif) !important;
background-color: #5c5a5a !important;
}


li.rMenu-expand li {
width: 123px !important;
height: 35px !important;
margin: 0 !important;
padding: 0px !important;
}

.rMenu-expand page_item li {
width: 123px !important;
height: 35px !important;
margin: 0 !important;
padding: 0px !important;
}

cway · #4 Mar 9, 2012, 01:07 PM

Found it! See below.

Code:

/*---drop down arrows-----------------------------------*/
div#menu1 ul.rMenu-hor li.rMenu-expand a {
background-image: none;
padding-right: 0px !important;
}
div#menu2 ul.rMenu-hor li.rMenu-expand a {
background-image: none;
padding-right: 0px !important;
}