It seems like there's a simple oversight on my end... The drop-down menu I created is causing the main navigation bar to expand. You can view the page I'm working on by following this link. The issue occurs with the navigation below the App buttons.
This is the HTML code:
<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>
And here is the CSS styling:
.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;
}