CSS导航下拉菜单

Question

我遇到侧面导航下拉菜单问题。链接和CSS位于以下位置：

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

正如您所看到的，当它悬停在上面或者很难使用时，它的下拉部分会消失。我一直试图想出一个没有运气的解决方案。

Answer 1

这可能会有所帮助：

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

您的 #top 元素似乎与菜单重叠。添加以下css：

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

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

Answer 3

尝试将此添加到#nav：

position: relative;
z-index: 1;