CSS Menu Dropdowns

Question

I'm struggling with this CSS problem, it seems to be a simple thing but I can't seem to get it right.

My top level navigation here: http://new.leicesterymca.co.uk

looks ok until you hover over... the first dropdown looks ok... the second level dropdown seems to expand from the edge of the text and I would like it to expand from the edge of the white background box... I don't know if it's a block issue or something?

Essentially i'd like it to look like this image here:

I've made the backgrounds grey and added a little gap between the dropdown boxes so they're easier to see...

The CSS I am using is:

.header-menu { margin: 29px 0 0 0; overflow: visible; z-index: 2; white-space: nowrap;  }
.header-menu ul { list-style: none; }
.header-menu ul li { float: left; position: relative; margin:0 25px 0 0; white-space: nowrap; }
.header-menu ul li:last-child { margin: 0;}
.header-menu ul a { display: table-cell; color: #163a51; font-size: 0.9em; font-weight: bold; text-transform: uppercase; margin: 28px 0 28px 0; z-index: 1;}
.header-menu ul a:hover { color: #2f9395; }

.header-menu li > ul { display: none; position: absolute; left: 0; top: 100%; background-color: #fff; }
.header-menu li:hover > ul { display: list-item; }
.header-menu li > ul li { padding: 10px;}
.header-menu li > ul li > ul { left: 100%; top: 0px;}
.header-menu li > ul li > ul li { padding: 10px;}
.header-menu li:hover > a { color: #2f9395; }

The code I'm using to pull in the menu is:

<div class="col-md-6 header-menu">  

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("main-menu") ) : ?><?php endif;?>

</div><!-- header-menu -->

The code that outputs is here:

<div class="widget nav_plus_widget-6 widget_nav_plus_widget">
    <div class="menu-main-menu-container">
        <ul id="menu-main-menu" class="main-menu">
            <li id="menu-item-307" class="menu-level-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-305 current_page_item menu-item-307"><a href="http://new.leicesterymca.co.uk/">Home</a></li>
            <li id="menu-item-251" class="menu-level-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-251"><a href="http://new.leicesterymca.co.uk/youth-community/">Youth &amp; Community</a>
                <ul class="sub-menu">
                    <li id="menu-item-253" class="menu-level-2 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-253"><a href="http://new.leicesterymca.co.uk/youth-community/our-work/">Our Work</a>
                        <ul class="sub-menu">
                            <li id="menu-item-235" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-235"><a href="http://new.leicesterymca.co.uk/youth-community/our-work/youth-homelessness/">Youth Homelessness</a>
                                <ul class="sub-menu">
                                    <li id="menu-item-236" class="menu-level-4 menu-item menu-item-type-post_type menu-item-object-page menu-item-236"><a href="http://new.leicesterymca.co.uk/youth-community/our-work/youth-homelessness/ambition/">Ambition</a></li>
                                </ul>
                            </li>
                            <li id="menu-item-237" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-237"><a href="http://new.leicesterymca.co.uk/youth-community/our-work/adult-homelessness/">Adult Homelessness</a></li>
                            <li id="menu-item-238" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-238"><a href="http://new.leicesterymca.co.uk/youth-community/our-work/young-people-with-disabilities/">Young People with Disabilities</a></li>
                            <li id="menu-item-239" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-239"><a href="http://new.leicesterymca.co.uk/youth-community/our-work/young-offenders/">Young Offenders</a></li>
                            <li id="menu-item-240" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-240"><a href="http://new.leicesterymca.co.uk/youth-community/our-work/for-the-community/">For the Community</a></li>
                            <li id="menu-item-241" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-241"><a href="http://new.leicesterymca.co.uk/youth-community/our-work/sports-classes/">Sports &amp; Classes</a></li>
                            <li id="menu-item-242" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-242"><a href="http://new.leicesterymca.co.uk/youth-community/our-work/theatre-arts/">Theatre &amp; Arts</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-252" class="menu-level-2 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-252"><a href="http://new.leicesterymca.co.uk/youth-community/about-us/">About Us</a>
                        <ul class="sub-menu">
                            <li id="menu-item-254" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-254"><a href="http://new.leicesterymca.co.uk/youth-community/about-us/our-approach/">Our approach</a></li>
                            <li id="menu-item-255" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-255"><a href="http://new.leicesterymca.co.uk/youth-community/about-us/partnerships-funders/">Partnerships &amp; Funders</a></li>
                            <li id="menu-item-256" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-256"><a href="http://new.leicesterymca.co.uk/youth-community/about-us/values-aims/">Values &amp; Aims</a></li>
                            <li id="menu-item-257" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-257"><a href="http://new.leicesterymca.co.uk/youth-community/about-us/our-people/">Our People</a></li>
                            <li id="menu-item-258" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-258"><a href="http://new.leicesterymca.co.uk/youth-community/about-us/history/">History</a></li>
                            <li id="menu-item-259" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-259"><a href="http://new.leicesterymca.co.uk/youth-community/about-us/visit-us/">Visit Us</a></li>
                            <li id="menu-item-260" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-260"><a href="http://new.leicesterymca.co.uk/youth-community/about-us/jobs/">Jobs</a></li>
                            <li id="menu-item-261" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-261"><a href="http://new.leicesterymca.co.uk/youth-community/about-us/annual-report/">Annual Report</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-262" class="menu-level-2 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-262"><a href="http://new.leicesterymca.co.uk/youth-community/support-us/">Support Us</a>
                        <ul class="sub-menu">
                            <li id="menu-item-263" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-263"><a href="http://new.leicesterymca.co.uk/youth-community/support-us/donate/">Donate</a></li>
                            <li id="menu-item-264" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-264"><a href="http://new.leicesterymca.co.uk/youth-community/support-us/events-challenges/">Events &amp; Challenges</a>
                                <ul class="sub-menu">
                                    <li id="menu-item-266" class="menu-level-4 menu-item menu-item-type-post_type menu-item-object-page menu-item-266"><a href="http://new.leicesterymca.co.uk/youth-community/support-us/events-challenges/individual-even-pages/">Individual even pages</a></li>
                                    <li id="menu-item-267" class="menu-level-4 menu-item menu-item-type-post_type menu-item-object-page menu-item-267"><a href="http://new.leicesterymca.co.uk/youth-community/support-us/events-challenges/organise-your-own-event/">Organise your own event</a></li>
                                    <li id="menu-item-268" class="menu-level-4 menu-item menu-item-type-post_type menu-item-object-page menu-item-268"><a href="http://new.leicesterymca.co.uk/youth-community/support-us/events-challenges/tips-tools/">Tips &amp; Tools</a></li>
                                </ul>
                            </li>
                            <li id="menu-item-272" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-272"><a href="http://new.leicesterymca.co.uk/youth-community/support-us/sponsor-a-house/">Sponsor a House</a></li>
                            <li id="menu-item-269" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-269"><a href="http://new.leicesterymca.co.uk/youth-community/support-us/business/">Business</a></li>
                            <li id="menu-item-273" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-273"><a href="http://new.leicesterymca.co.uk/youth-community/support-us/stories/">Stories</a></li>
                            <li id="menu-item-271" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-271"><a href="http://new.leicesterymca.co.uk/youth-community/support-us/hire/">Hire</a></li>
                            <li id="menu-item-270" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-270"><a href="http://new.leicesterymca.co.uk/youth-community/support-us/donate-goods/">Donate Goods</a></li>
                            <li id="menu-item-274" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-274"><a href="http://new.leicesterymca.co.uk/youth-community/support-us/volunteer/">Volunteer</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li id="menu-item-275" class="menu-level-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-275"><a href="http://new.leicesterymca.co.uk/theatre/">Theatre</a>
                <ul class="sub-menu">
                    <li id="menu-item-283" class="menu-level-2 menu-item menu-item-type-post_type menu-item-object-page menu-item-283"><a href="http://new.leicesterymca.co.uk/theatre/whats-on/">What’s on?</a></li>
                    <li id="menu-item-284" class="menu-level-2 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-284"><a href="http://new.leicesterymca.co.uk/theatre/your-visit/">Your Visit</a>
                        <ul class="sub-menu">
                            <li id="menu-item-286" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-286"><a href="http://new.leicesterymca.co.uk/theatre/your-visit/how-to-book/">How to Book</a></li>
                            <li id="menu-item-287" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-287"><a href="http://new.leicesterymca.co.uk/youth-community/about-us/visit-us/">Visit Us</a></li>
                            <li id="menu-item-288" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-288"><a href="http://new.leicesterymca.co.uk/theatre/your-visit/accessibility/">Accessibility</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-279" class="menu-level-2 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-279"><a href="http://new.leicesterymca.co.uk/theatre/get-creative/">Get Creative</a>
                        <ul class="sub-menu">
                            <li id="menu-item-282" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-282"><a href="http://new.leicesterymca.co.uk/theatre/get-creative/introducing-programme/">Introducing programme</a></li>
                            <li id="menu-item-281" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-281"><a href="http://new.leicesterymca.co.uk/theatre/get-creative/festivals/">Festivals</a></li>
                            <li id="menu-item-280" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-280"><a href="http://new.leicesterymca.co.uk/theatre/get-creative/exhibit/">Exhibit</a></li>
                            <li id="menu-item-291" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-291"><a href="http://new.leicesterymca.co.uk/youth-community/support-us/volunteer/">Volunteer</a></li>
                            <li id="menu-item-289" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-289"><a href="http://new.leicesterymca.co.uk/blogs/">Blogs</a></li>
                        </ul>
                    </li>
                    <li id="menu-item-290" class="menu-level-2 menu-item menu-item-type-post_type menu-item-object-page menu-item-290"><a href="http://new.leicesterymca.co.uk/youth-community/our-work/sports-classes/">Sports &amp; Classes</a></li>
                    <li id="menu-item-276" class="menu-level-2 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-276"><a href="http://new.leicesterymca.co.uk/theatre/about-us/">About us</a>
                        <ul class="sub-menu">
                            <li id="menu-item-277" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-277"><a href="http://new.leicesterymca.co.uk/theatre/about-us/about-the-y-theatre/">About the Y Theatre</a></li>
                            <li id="menu-item-292" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-292"><a href="http://new.leicesterymca.co.uk/youth-community/about-us/history/">History</a></li>
                            <li id="menu-item-293" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-293"><a href="http://new.leicesterymca.co.uk/youth-community/">Youth &amp; Community</a></li>
                            <li id="menu-item-294" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-294"><a href="http://new.leicesterymca.co.uk/youth-community/support-us/">Support Us</a></li>
                            <li id="menu-item-278" class="menu-level-3 menu-item menu-item-type-post_type menu-item-object-page menu-item-278"><a href="http://new.leicesterymca.co.uk/theatre/about-us/careers/">Careers</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li id="menu-item-295" class="menu-level-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-295"><a href="http://new.leicesterymca.co.uk/hire/">Hire</a>
                <ul class="sub-menu">
                    <li id="menu-item-302" class="menu-level-2 menu-item menu-item-type-post_type menu-item-object-page menu-item-302"><a href="http://new.leicesterymca.co.uk/hire/our-spaces/">Our spaces</a></li>
                    <li id="menu-item-301" class="menu-level-2 menu-item menu-item-type-post_type menu-item-object-page menu-item-301"><a href="http://new.leicesterymca.co.uk/hire/meetings-conferences/">Meetings &amp; Conferences</a></li>
                    <li id="menu-item-300" class="menu-level-2 menu-item menu-item-type-post_type menu-item-object-page menu-item-300"><a href="http://new.leicesterymca.co.uk/hire/live-events/">Live Events</a></li>
                    <li id="menu-item-299" class="menu-level-2 menu-item menu-item-type-post_type menu-item-object-page menu-item-299"><a href="http://new.leicesterymca.co.uk/hire/weddings-parties/">Weddings &amp; Parties</a></li>
                    <li id="menu-item-298" class="menu-level-2 menu-item menu-item-type-post_type menu-item-object-page menu-item-298"><a href="http://new.leicesterymca.co.uk/hire/sports/">Sports</a></li>
                    <li id="menu-item-297" class="menu-level-2 menu-item menu-item-type-post_type menu-item-object-page menu-item-297"><a href="http://new.leicesterymca.co.uk/hire/rehearsals/">Rehearsals</a></li>
                    <li id="menu-item-296" class="menu-level-2 menu-item menu-item-type-post_type menu-item-object-page menu-item-296"><a href="http://new.leicesterymca.co.uk/hire/enquire/">Enquire</a></li>
                </ul>
            </li>
            <li id="menu-item-303" class="menu-level-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-303"><a href="http://new.leicesterymca.co.uk/blogs/">Blogs</a></li>
            <li id="menu-item-304" class="menu-level-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-304"><a href="http://new.leicesterymca.co.uk/contact/">Contact</a></li>
        </ul>
    </div>
</div>

Please read this and then create a snippet with an minimal reproducible example — Pete
– Pete, Commented Feb 7, 2017 at 12:01
use this ... .header-menu li > ul li { padding: 10px; width: 100%; } — Vaibhav Kumar
– Vaibhav Kumar, Commented Feb 7, 2017 at 12:13
Thanks Pete - I've added the snippet - The HTML is pulled from Wordpress so its PHP code — Shaun Taylor
– Shaun Taylor, Commented Feb 7, 2017 at 12:21
Also thank you Vaibhav - this doesn't work unfortunately - I think youll need to add an answer into the answer section and not the comments section — Shaun Taylor
– Shaun Taylor, Commented Feb 7, 2017 at 12:22

Nisse Engström · Accepted Answer · 2017-02-07 21:00:16Z

1

You can try this code:

I've taken the reference from this: http://www.cssscript.com/create-a-multi-level-drop-down-menu-with-pure-css/

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #1bc2a2;
}

ul li {
  display: block;
  position: relative;
  float: left;
  background: #1bc2a2;
}

li ul { display: none; }

ul li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}

ul li a:hover { background: #2c3e50; }

li:hover > ul {
  display: block;
  position: absolute;
}

li:hover li { float: none; }

li:hover a { background: #1bc2a2; }

li:hover li a:hover { background: #2c3e50; }

.main-navigation li ul li { border-top: 0; }

ul ul ul {
  left: 100%;
  top: 0;
}

ul:before,
ul:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

ul:after { clear: both; }

edited Feb 7, 2017 at 21:00

Nisse Engström

4,76323 gold badges29 silver badges44 bronze badges

answered Feb 7, 2017 at 13:20

Rajesh Baskaran

3221 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shaun Taylor Over a year ago

Thats perfect! Thank you Rajesh!

Farzin Kanzi · Accepted Answer · 2017-02-07 12:53:24Z

0

Use this:

ul.menu-main-menu > li > ul > li{ width: 100%;}

answered Feb 7, 2017 at 12:53

Farzin Kanzi

3,4532 gold badges23 silver badges25 bronze badges

1 Comment

Shaun Taylor Over a year ago

Thanks Fazin - I don't think this seems to do anything?

Collectives™ on Stack Overflow

CSS Menu Dropdowns

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related