menu problems editing wordpress theme

[jillianmary]

Hi! I am just learning how to edit wordpress themes using css. I knew a little bit of css previously and enjoy problem solving, but I could use help with some of these hurdles.

Right now, I am trying to fix the menu. My page is at http://www.jillianmary.com/ . I am having trouble with the following:

a) Why are the first menu item and dropdown item hover backgrounds filling the whole box, but not the other ones? (I want the highlight to fill the whole box.)
b) Why does the hover background on the first menu item look weird?

Help! Here is the code. Thank you.

.nav {border-top: 1px solid #d9d9d9; width: 100%;}

.dd {height: 30px; line-height: 14px;}

.dd li {float: left; display: block; border-left: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; margin-left: 10px; padding-bottom: 7px; text-align: center; font-size: 16px; }
.dd li a {color: #000; font-size: 16px; text-decoration: none; text-align: center; display: block; margin: 0 14px; padding-top: 18px; white-space: nowrap;}
.dd li a:hover {background: #63B0B0; display: block;}

.dd li ul {position: absolute; text-align: center; padding: 8px 0 10px; visibility: hidden; background: #fff; z-index: 100; border: 1px solid #d9d9d9; display: block;}
.dd li ul:hover {background: #B4D9D9; text-decoration: none; display: block;}

.dd li ul li {float: none; border: none; font-size: 11px; text-align: left; margin: 5px 0; padding: 0 8px; display: block;}
.dd li ul li a {color: #000; display: inline; margin: 0 !important; white-space: normal; padding-top: 0; display: block;}

.dd li.dd_hover {background: #63B0B0; display: block;}

a.dd_hover:hover {text-decoration: none !important;}
.submenu a:hover {text-decoration: none; display: block;}

.dd li.parent a {margin: 0 8px; padding-right: 12px; background: url("images/dd.png") 100% 24px no-repeat;}
.dd li.parent a.dd_hover {color: #000; background: url("images/dd_hover.png") 100% 24px no-repeat; margin: 0 8px; padding-right: 12px; border-bottom: 1px solid #fff; padding-bottom: 10px; display: block;}

[bernie1227]

hiya,
the first thing that comes to mind are whether there are any other styles set to the particular parts of the menu, as you have set them all id's and classes, and you haven't shown you any css for them. have you set any?

[jillianmary]

Hi,

Is this what you're looking for? Or should there be something more? I didn't see an external style sheet in the files that came with the theme.

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strik e,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0 ;font-size:100%;vertical-align:baseline;background:transparent;}
body{line-height:1;text-align:left;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
:focus {outline:0;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}

[jillianmary]

I fixed the problem by adding drop down menus to all of the menu items, and by adding a bottom border to the hover image, of the same color as the text background.

.dd li.parent a {margin: 0 8px; padding-right: 12px; background: url("images/dd.png") 100% 24px no-repeat; }
.dd li.parent a.dd_hover {color: #000; background: url("images/dd_hover.png") 100% 24px no-repeat; margin: 0 8px; padding-right: 12px; border-bottom: 1px solid #3388DE; padding-bottom: 10px; display: block; }