Dropdown menu not dropping down to show child pages

It looks like you need to add this CSS;

#menu.ddsmoothmenu li:hover ul {
 visibility: visible;
 display: block;
 top: 20px;
}

hi andrew, i’ve added that but still no change, absolutely nothing happens. it seems like it should work already, because the menu classes in my stylesheet are inundated with ‘parent’ and ‘child’ terms everywhere

Whereabouts did you add it? It’s not showing up on your webpage.

If the sub-menu is working on the demo website for that theme, consider disabling plugins to explore whether any are responsible.

ive definately added it lol, in style.css – refresh?

Sorry, can you replace this;

#menu.ddsmoothmenu li:hover ul {
 visibility: visible;
 display: block;
 top: 20px;
}

With this;

#menu .ddsmoothmenu li:hover ul {
 visibility: visible;
 display: block;
 top: 20px;
}

that works better, but can i get the sub-menu pages to appear the same as the main menu items, shape and hover effect? thanks

Sure, try using a browser developer tool for this kind of exploratory CSS work.
I use Google Chrome’s built-in Developer Tool and found the CSS of your main menu items [screenshot].

Now that you know the style, from being exposed by the Developer Tool, you can add a new style in your Child Theme stylesheet to override it.

Edit: CSS-specific support should be sought on CSS-specific forums

i use the same in chrome and firebug in firefox but styling this dropdown to appear the same as the main menu items is a bit too advanced for my css skills, i can see where i need to edit the css but i’m not very confident as to which classes need changing

#menu li a {
    margin:0;
    margin-left:10px;
    padding-left:8px;
    padding-right:18px;
    padding-top:4px;
    padding-bottom:5px;
    position:relative;
    float:left;
    color:#666;
    font-family:Arial, Helvetica, sans-serif;
    text-align:center;
    text-decoration:none;
    font-size:12px;
    background:url('images/nav.png') no-repeat 99% -4px;
    text-shadow: 0 1px 0 #ffffff;
}
#menu li.current-menu-item a, #menu li.current-menu-parent a, #menu li.current_page_parent a, #menu li a.selected, #menu li a:hover, #menu li.current_page_item a {
    margin:0;
    margin-left:10px;
    padding-left:8px;
    padding-right:18px;
    padding-top:4px;
    padding-bottom:5px;
    color:#FFF;
    text-shadow: none;
}
#menu .ddsmoothmenu {
    margin:0;
    padding:0;
    list-style:none;
    float:right;
    position:relative;
    z-index:10000;
    margin-top:8px;/*	margin-left:60px;*/
    margin-left:30px;
    margin-top:10px;
}
#menu .ddsmoothmenu li > ul {
    background: url("images/submenu-down.png") no-repeat;
    background-position: -2px 100%;
    border-right:1px solid #CCC;
    border-top:1px solid #CCC;
    border-bottom:1px solid #CCC;

i’m not using a child theme yet, im wanting to create that once the functionality of the site is complete and i’m onto adding the content

thanks

the dropdown menu appears too tight underneath the main menu parent page button ‘Accident Claim Types’ which makes the text in the button ‘bold’ when i hover over the child pages, i have tweaked the above css by adding top: 25px; which DOES remedy this but then the child pages dont appear smoothly and the hover effect doesn’t work

can any css experts see where i’m going wrong, it’s literally a couple of pixels worth of editing

https://globalaccident.net

‘m not using a child theme yet, im wanting to create that once the functionality of the site is complete and i’m onto adding the content

That’s a mistake — you will have to redo a lot of your work – as not everything carries over when you change to a child theme. And the CSS file for your child theme should contain ONLY your changes, not then entire parent file.

wpyogi, yes you’re right, i went ahead and made the child theme, and updated my parent theme, it seems a css padding/margin edit i did earlier in the parent theme, to lessen the white space between the featured content and footer was causing the mis-alignment on the drop-down

everything ok now, thanks