CSSメニュードロップダウン

Question

私はこのCSSの問題に苦しんでいます、それは簡単なことだと思われますが、私はそれを正しく理解することはできません。ここ

私のトップレベルナビゲーション：あなたは上にマウスを移動するまでhttp://new.leicesterymca.co.uk

はOKに見えますが...最初のドロップダウンがOKに見えます... 2番目のレベルのドロップダウンメニューには、テキストのエッジから展開しているようだと、私はそれをしたいと思います白い背景ボックスの端から拡大する...ブロックの問題なのかどうかわからないのですか？

基本的に私は、それはここで、この画像のようになりたいのですが：

私は、背景は灰色作られ、彼らが見やすいですので、ドロップダウンボックス間の小さなギャップを追加しました。 ..私は使用しています

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