问题描述
我确定这是我缺少的一些简单的东西...我的下拉菜单正在主导航中打开,并扩大了它.这是我正在处理的页面的链接.问题在于应用按钮下方的导航.
I'm sure this is something simple I'm missing... My drop down menu is opening within the main navigation, widening it. Here is a link to the page I'm working on. The issue is with the navigation below the App buttons.
http://membershq.incentiveusa.com/AwardPages/GoalUp_Test2/index_test3.html#
这是我的 HTML:
<div class="container-fluid"> <div class="section-title2 text-center"> <div class="navigation"> <label for="show-menu" class="show-menu">Show Menu</label> <input type="checkbox" id="show-menu" role="button"> <ul > <li><a href="#">About Us</a> <ul> <li><a href="about.html">Who We Are</a></li> <li><a href="news.html">News</a></li> </ul></li> <li><a href="HowItWorks.html">How It Works</a></li> <li><a href="FactsStats.html">Facts</a></li> <li><a href="ParentingTools.html">Tools</a></li> <li><a href="testimonials.html">Testimonials</a></li> <li><a href="news.html">News</a></li> <li><a href="awards.html">Brand Name Awards</a></li> <li><a href="contact.html">Contact</a></li> </ul>
这是 CSS:
.navigation{ margin-right: auto; margin-left: auto; width: 100%; background-color: #0f9cde; position: absolute; display: block; margin-bottom: 15px; z-index: 1000; top: 735px; margin-left: -15px; } /*Strip the ul of padding and list styling*/ .navigation ul{ list-style-type: none; margin: 0 auto; padding: 0; position: relative; z-index: 10000; text-align:center; } /*Create a horizontal list with spacing*/ .navigation li{ display:inline-block; margin-right: 0px; background-color:#0f9bde; } /*Style for menu links*/ .navigation li a { min-width: 189px; height: 50px; text-align: center; line-height: 50px; font-family: 'Maven Pro', sans-serif; font-size:18px; color: #fff; width:100%; background-color: #0f9cde; text-decoration: none; display:block; } /*Hover state for top level links*/ .navigation li:hover a { color: #f7a800; text-decoration: underline; } /*Style for dropdown links*/ .navigation li:hover ul a { background: #f7a800; color: #ffffff; height: 40px; line-height: 40px; z-index: 10001; } /*Hover state for dropdown links*/ .navigation li:hover ul a:hover { background: #fff; color: #f7a800; } /*Hide dropdown links until they are needed*/ .navigation li ul{ display: none; z-index: 10001; } /*Make dropdown links vertical*/ .navigation li ul li { display: block; float: none; } /*Prevent text wrapping*/ .navigation li ul li a { width: auto; min-width: 100px; padding: 0 20px; } .navigation ul li:hover ul{ display:block; } /*Display the dropdown on hover*/ navigation ul li a:hover { display: block; }
推荐答案
你要给选择器添加一个 position:absolute .navigation li ul
You have to add a position:absolute to the selector .navigation li ul
.navigation{ margin-right: auto; margin-left: auto; width: 100%; background-color: #0f9cde; position: absolute; display: block; margin-bottom: 15px; z-index: 1000; margin-left: -15px; } /*Strip the ul of padding and list styling*/ .navigation ul{ list-style-type: none; margin: 0 auto; padding: 0; position: relative; z-index: 10000; text-align:center; } /*Create a horizontal list with spacing*/ .navigation li{ display:inline-block; margin-right: 0px; background-color:#0f9bde; } /*Style for menu links*/ .navigation li a { min-width: 189px; height: 50px; text-align: center; line-height: 50px; font-family: 'Maven Pro', sans-serif; font-size:18px; color: #fff; width:100%; background-color: #0f9cde; text-decoration: none; display:block; } /*Hover state for top level links*/ .navigation li:hover a { color: #f7a800; text-decoration: underline; } /*Style for dropdown links*/ .navigation li:hover ul a { background: #f7a800; color: #ffffff; height: 40px; line-height: 40px; z-index: 10001; } /*Hover state for dropdown links*/ .navigation li:hover ul a:hover { background: #fff; color: #f7a800; } /*Hide dropdown links until they are needed*/ .navigation li ul{ display: none; z-index: 10001; position: absolute; } /*Make dropdown links vertical*/ .navigation li ul li { display: block; float: none; } /*Prevent text wrapping*/ .navigation li ul li a { width: auto; min-width: 100px; padding: 0 20px; } .navigation ul li:hover ul{ display:block; } /*Display the dropdown on hover*/ navigation ul li a:hover { display: block; }
<div class="container-fluid"> <div class="section-title2 text-center"> <div class="navigation"> <ul > <li><a href="#">About Us</a> <ul> <li><a href="about.html">Who We Are</a></li> <li><a href="news.html">News</a></li> </ul></li> <li><a href="HowItWorks.html">How It Works</a></li> <li><a href="FactsStats.html">Facts</a></li> <li><a href="ParentingTools.html">Tools</a></li> <li><a href="testimonials.html">Testimonials</a></li> <li><a href="news.html">News</a></li> <li><a href="awards.html">Brand Name Awards</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div></div></div>