Shaun Taylor Shaun Taylor - 1 year ago 55
CSS Question

CSS Menu Dropdowns

Im struggling with this CSS problem, it seems to be a simple thing but I can't seem to get it right. Hopefully someone can help :)

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 know if its a block issue or something?

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

enter image description 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>


If anyone can help it would be greatly appreciated :)

Thanks,

Shaun.

Answer Source

Can You try this code:

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download