Results 1 to 4 of 4

Thread: menu problems editing wordpress theme

  1. #1
    Join Date
    Jul 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default menu problems editing wordpress theme

    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;}

  2. #2
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    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?
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  3. #3
    Join Date
    Jul 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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;}

  4. #4
    Join Date
    Jul 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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; }

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •