我在侧面导航下拉菜单中遇到问题.链接和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 & 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; }
解决方法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。