menu di scelta rapida di navigazione CSS

Question

Sto riscontrando un problema con un menu a discesa di navigazione laterale. Il collegamento e CSS sono al di sotto:

http://www.449design.net/clientpages/gamiing/

<nav id="nav"> 
    <div class="menu-main_nav-container"><ul id="menu-main_nav" class="menu"><li id="menu-item-270" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-270"><a href="http://449design.net/clientpages/gamiing/">Home</a></li> 
<li id="menu-item-271" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-271"><a href="http://449design.net/clientpages/gamiing/about-gamiing-nature-centre/">About Us</a> 
<ul class="sub-menu"> 
    <li id="menu-item-283" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-283"><a href="http://449design.net/clientpages/gamiing/about-gamiing-nature-centre/history/">History</a></li> 
    <li id="menu-item-282" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-282"><a href="http://449design.net/clientpages/gamiing/home/mandate-and-mission/">Mission and Mandate</a></li> 
    <li id="menu-item-291" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-291"><a href="http://449design.net/clientpages/gamiing/about-gamiing-nature-centre/what-gamiing-does/">What Gamiing Does</a></li> 
    <li id="menu-item-290" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-290"><a href="http://449design.net/clientpages/gamiing/about-gamiing-nature-centre/our-board/">Our Board</a></li> 
    <li id="menu-item-289" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-289"><a href="http://449design.net/clientpages/gamiing/about-gamiing-nature-centre/corporate-reference-manual/">Corporate Reference Manual</a></li> 
    <li id="menu-item-288" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-288"><a href="http://449design.net/clientpages/gamiing/about-gamiing-nature-centre/our-shop/">Our Shop</a></li> 
    <li id="menu-item-287" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-287"><a href="http://449design.net/clientpages/gamiing/about-gamiing-nature-centre/resources/">Resources</a></li> 
    <li id="menu-item-286" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-286"><a href="http://449design.net/clientpages/gamiing/links/">Links</a></li> 
    <li id="menu-item-285" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-285"><a href="http://449design.net/clientpages/gamiing/about-gamiing-nature-centre/advocacy/">Advocacy</a></li> 
</ul> 
</li> 
<li id="menu-item-272" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-272"><a href="http://449design.net/clientpages/gamiing/what-is-here/">What Is Here</a> 
<ul class="sub-menu"> 
    <li id="menu-item-299" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-299"><a href="http://449design.net/clientpages/gamiing/what-is-here/native-nursery/">Native Nursery</a></li> 
    <li id="menu-item-298" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-298"><a href="http://449design.net/clientpages/gamiing/what-is-here/forest/">Forest</a></li> 
    <li id="menu-item-297" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-297"><a href="http://449design.net/clientpages/gamiing/wetland/">Wetland</a></li> 
    <li id="menu-item-292" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-292"><a href="http://449design.net/clientpages/gamiing/what-is-here/seed-collection/">Seed Collection</a></li> 
    <li id="menu-item-296" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-296"><a href="http://449design.net/clientpages/gamiing/what-is-here/trails/">Trails</a></li> 
    <li id="menu-item-293" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-293"><a href="http://449design.net/clientpages/gamiing/what-is-here/wild-edible-adventure/">Wild Edible Adventure</a></li> 
    <li id="menu-item-294" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-294"><a href="http://449design.net/clientpages/gamiing/gamiing-nature-centre-news/special-occasions-3/">Special Occasions</a></li> 
</ul> 
</li> 
<li id="menu-item-273" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-273"><a href="http://449design.net/clientpages/gamiing/outdoor-education/">Outdoor Education</a> 
<ul class="sub-menu"> 
    <li id="menu-item-310" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-310"><a href="http://449design.net/clientpages/gamiing/outdoor-education/about-our-nature-centre/">About Our Nature Centre</a></li> 
    <li id="menu-item-295" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-295"><a href="http://449design.net/clientpages/gamiing/what-is-here/geocaching/">Geocaching</a></li> 
    <li id="menu-item-309" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-309"><a href="http://449design.net/clientpages/gamiing/outdoor-education/our-programs/">Our Programs</a></li> 
    <li id="menu-item-308" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-308"><a href="http://449design.net/clientpages/gamiing/outdoor-education/on-site/">On-Site</a></li> 
    <li id="menu-item-307" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-307"><a href="http://449design.net/clientpages/gamiing/outdoor-education/workshops-and-registration-info/">Workshops and Registration Info</a></li> 
    <li id="menu-item-306" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-306"><a href="http://449design.net/clientpages/gamiing/outdoor-education/winter-camping/">Winter Camping</a></li> 
    <li id="menu-item-305" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-305"><a href="http://449design.net/clientpages/gamiing/iterpretive-trail-walks/">Iterpretive Trail Walks</a></li> 
    <li id="menu-item-304" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-304"><a href="http://449design.net/clientpages/gamiing/outdoor-education/outreach-programs/">Outreach Programs</a></li> 
    <li id="menu-item-303" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-303"><a href="http://449design.net/clientpages/gamiing/outdoor-education/make-a-booking/">Make a Booking</a></li> 
    <li id="menu-item-300" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-300"><a href="http://449design.net/clientpages/gamiing/what-is-here/organic-gardening-services/">Organic Gardening Services</a></li> 
    <li id="menu-item-301" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-301"><a href="http://449design.net/clientpages/gamiing/lakeshore-restoration-services/">Lakeshore Restoration Services</a></li> 
    <li id="menu-item-302" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-302"><a href="http://449design.net/clientpages/gamiing/outdoor-education/sample-schedule/">Sample Schedule</a></li> 
</ul> 
</li> 
<li id="menu-item-274" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-274"><a href="http://449design.net/clientpages/gamiing/gamiing-nature-club/">Gamiing Nature Club</a> 
<ul class="sub-menu"> 
    <li id="menu-item-315" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-315"><a href="http://449design.net/clientpages/gamiing/gamiing-nature-club/about-nature-club/">About Nature Club</a></li> 
    <li id="menu-item-314" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-314"><a href="http://449design.net/clientpages/gamiing/summer-day-camp/programs-and-activities-2/">Programs and Activities</a></li> 
    <li id="menu-item-313" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-313"><a href="http://449design.net/clientpages/gamiing/gamiing-nature-club/rates/">Rates</a></li> 
    <li id="menu-item-312" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-312"><a href="http://449design.net/clientpages/gamiing/information-for-parents/">Information for Parents</a></li> 
    <li id="menu-item-311" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-311"><a href="http://449design.net/clientpages/gamiing/registration-and-sign-up/">Registration and Sign Up</a></li> 
</ul> 
</li> 
<li id="menu-item-275" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-275"><a href="http://449design.net/clientpages/gamiing/summer-day-camp/">Summer Day Camp</a> 
<ul class="sub-menu"> 
    <li id="menu-item-319" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-319"><a href="http://449design.net/clientpages/gamiing/summer-day-camp/programs-and-activities/">Programs and Activities</a></li> 
    <li id="menu-item-318" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-318"><a href="http://449design.net/clientpages/gamiing/summer-day-camp/information-for-parents/">Information for Parents</a></li> 
    <li id="menu-item-317" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-317"><a href="http://449design.net/clientpages/gamiing/summer-day-camp/registration-and-sign-up/">Registration and Sign Up</a></li> 
    <li id="menu-item-316" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-316"><a href="http://449design.net/clientpages/gamiing/summer-day-camp/photos-and-videos/">Photos and Videos</a></li> 
</ul> 
</li> 
<li id="menu-item-277" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-277"><a href="http://449design.net/clientpages/gamiing/support-us/">Support Us</a> 
<ul class="sub-menu"> 
    <li id="menu-item-329" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-329"><a href="http://449design.net/clientpages/gamiing/support-us/supporting-gamiing/">Supporting Gamiing</a></li> 
    <li id="menu-item-328" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-328"><a href="http://449design.net/clientpages/gamiing/support-us/becoming-a-donor/">Becoming a Donor</a></li> 
    <li id="menu-item-327" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-327"><a href="http://449design.net/clientpages/gamiing/support-us/planned-giving/">Planned Giving</a></li> 
    <li id="menu-item-326" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-326"><a href="http://449design.net/clientpages/gamiing/support-us/dedication-gifts/">Dedication Gifts</a></li> 
    <li id="menu-item-325" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-325"><a href="http://449design.net/clientpages/gamiing/support-us/sponsorships/">Sponsorships</a></li> 
    <li id="menu-item-324" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-324"><a href="http://449design.net/clientpages/gamiing/support-us/wishlist/">Wish List</a></li> 
</ul> 
</li> 
<li id="menu-item-278" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-278"><a href="http://449design.net/clientpages/gamiing/volunteers/">Volunteers</a> 
<ul class="sub-menu"> 
    <li id="menu-item-334" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-334"><a href="http://449design.net/clientpages/gamiing/volunteers/volunteer-at-gamiing/">Volunteer at Gamiing</a></li> 
    <li id="menu-item-333" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-333"><a href="http://449design.net/clientpages/gamiing/volunteers/volunteer-positions/">Volunteer Positions</a></li> 
    <li id="menu-item-332" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-332"><a href="http://449design.net/clientpages/gamiing/volunteers/our-volunteer-newsletter/">Our Volunteer Newsletter</a></li> 
    <li id="menu-item-331" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-331"><a href="http://449design.net/clientpages/gamiing/volunteers/faq-about-volunteering/">FAQ About Volunteering</a></li> 
</ul> 
</li> 
<li id="menu-item-281" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-281"><a href="http://449design.net/clientpages/gamiing/sightings/">Sightings</a></li> 
<li id="menu-item-280" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-280"><a target="_blank" href="http://449design.net/clientpages/gamiing/photo-albums/">Photo Albums</a></li> 
<li id="menu-item-279" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-279"><a href="http://449design.net/clientpages/gamiing/contact-us-directions/">Contact Us &amp; Directions</a></li> 
<li id="menu-item-269" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-269"><a href="http://449design.net/clientpages/gamiing/gamiing-nature-centre-news/">News and Events</a> 
<ul class="sub-menu"> 
    <li id="menu-item-284" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-284"><a href="http://449design.net/clientpages/gamiing/gamiing-nature-centre-news/annual-events/">Annual Events</a></li> 
    <li id="menu-item-320" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-320"><a href="http://449design.net/clientpages/gamiing/latest-news/">Latest News</a></li> 
    <li id="menu-item-276" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-276"><a href="http://449design.net/clientpages/gamiing/gamiing-nature-centre-news/events-at-gamiing-nature-centre/">Calendar of Events</a></li> 
    <li id="menu-item-322" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-322"><a href="http://449design.net/clientpages/gamiing/gamiing-nature-centre-news/our-newsletter/">Our Newsletter</a></li> 
    <li id="menu-item-323" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-323"><a href="http://449design.net/clientpages/gamiing/gamiing-nature-centre-news/special-occasions-2/">Special Occasions</a></li> 
    <li id="menu-item-321" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-321"><a href="http://449design.net/clientpages/gamiing/gamiing-nature-centre-news/our-blog/">Our Blog</a></li> 
    <li id="menu-item-338" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-338"><a href="http://449design.net/clientpages/gamiing/example-page/">Example Page</a></li> 
</ul> 
</li> 
<li id="menu-item-330" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-330"><a href="http://449design.net/clientpages/gamiing/sightings-2/">Sightings</a></li> 
</ul></div> 
</nav> 

#nav { 
    background-color: #1b4; 
    margin-top: -1.1%; 
    margin-left: -1.7%; 
     float: left; 
     margin-right: 2%; 
     width:18%; 
     min-height: 900px; 
    } 

#nav ul li {background-image: url('images/buttonbg.png'); 
      background-repeat: repeat-x; 
      background-color: #087410; 
      padding: 1%; 
      font-size: 1em; 
      text-align: left; 
      list-style: none; 
      display: block; 
     } 

#nav ul li a {color: #b9e881; 
       text-decoration: none; 
       font-family: "Tempus", Sans-Serif; 
       font-size: 1.3em; 
       background-image: none; 
       margin-left: 5%; 
       display: block; 
} 
#nav ul li a:hover {color: #fdfdfd; 
        } 
/* Sub Nav */ 

ul.sub-menu { 
    display: none;} 

#nav li:hover .sub-menu { 

    background: #cbf68d; 
    border: #000 solid; 
    border-width: 1px; 
    display: block; 
    position: absolute; 
    left: 100px; 
} 

#nav ul.sub-menu li{ 
    border-bottom: 1px solid black; 
    width:200px; 
    background-image: none; 
    background-color: #cbf68d; 
} 

#nav ul.sub-menu li:last-child {border-bottom: none;} 
#nav ul.sub-menu li a {color: #12b851;} 

#nav ul.sub-menu li a:hover {color: #000;} 
/*Second Level*/ 
#nav .sub-level { 
    background: #999; 
} 

/*Third Level if needed*/ 
#nav .sub-menu .sub-menu { 
    background: #09C; 
} 

Come si può vedere un po 'la discesa porzione di esso scompare quando aleggiava sopra o è molto difficile da usare. Ho cercato di trovare una soluzione per questo senza fortuna.

Answer 1

Sembra che il tuo #top elemento si sovrappone il menu. Aggiungere il seguente CSS:

#top { 
    width: 81%; 
    float: left; 
} 

h2 { 
    //padding-left: 5%; remove this 
} 

Answer 2

Questo potrebbe aiutare:

#nav li .sub-menu:hover, 
#nav li:hover .sub-menu { 

    background: #cbf68d; 
    border: #000 solid; 
    border-width: 1px; 
    display: block; 
    position: absolute; 
    left: 100px; 
} 

Answer 3

Prova ad aggiungere questo per #nav:

position: relative; 
z-index: 1;