CSS drop down navigation

Question

Я уверен, что это что-то простое, что мне не хватает ... Мое раскрывающееся меню открывается в пределах основной навигации, расширяя его. Вот ссылка на страницу, над которой я работаю. Проблема заключается в навигации под кнопками приложения.

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; 

} 

Answer 1

Вы должны добавить позицию: абсолютная селектору .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>