CSS菜单下拉菜单

Question

我正在努力解决这个CSS问题，这似乎是一件简单的事情，但我似乎无法做到正确。

我的顶级导航：http://new.leicesterymca.co.uk

看起来没问题，直到你将鼠标悬停在...第一个下拉列表看起来没问题......第二级下拉列表似乎从文本的边缘扩展，我希望它从白色背景框的边缘展开..我不知道这是块问题还是什么？

基本上我希望它在这里看起来像这样：

我的背景是灰色的，并在下拉框之间添加了一点间隙，因此它们更容易看到......

我使用的CSS是：

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

我用来拉入菜单的代码是：

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

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

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

输出的代码在这里：

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

Answer 1

您可以尝试以下代码：

我从这里得到了参考：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; }

Answer 2

使用此：

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