WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Dropdown menu not dropping down to show child pages (13 posts)

  1. Johnny Bravo
    Member
    Posted 1 year ago #

    Hi guys, I have added a page as the child page of 'Accident Claim Types'. I have then added this to my main menu as the child, so it's indented to the right under Appearance> Menus.

    However, nothing seems to happen on the front end, i'm thinking the CSS needs tweaking to my menu classes but i've tried a few changes without success. Can any CSS experts guide me to which classes I need to be looking at.

    my site: http://globalaccident.net

    Thanks

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    It looks like you need to add this CSS;

    #menu.ddsmoothmenu li:hover ul {
     visibility: visible;
     display: block;
     top: 20px;
    }
  3. Johnny Bravo
    Member
    Posted 1 year ago #

    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

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  6. Johnny Bravo
    Member
    Posted 1 year ago #

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

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    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;
    }
  8. Johnny Bravo
    Member
    Posted 1 year ago #

    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

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    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

  10. Johnny Bravo
    Member
    Posted 1 year ago #

    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

  11. Johnny Bravo
    Member
    Posted 1 year ago #

    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

    http://globalaccident.net

  12. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    '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.

  13. Johnny Bravo
    Member
    Posted 1 year ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic