Dropdown navigation with CSS

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;

}

Answer №1

To make the navigation menu work properly, you need to include a position:absolute property in 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

After updating the INNERHTML, the NAV tag content is no longer functional

I am facing an issue with replacing the contents of a NAV tag that contains UL list items. The original HTML within the NAV tag works perfectly fine, but when I replace it with my own HTML - which matches the original word for word - the dropdown functiona ...

html div elements may not align correctly

Currently, I am in the process of coding a website that contains numerous images. To assist me in organizing and arranging these images, I have turned to angularjs. Initially, everything was progressing smoothly until this issue arose: https://i.sstatic. ...

Tips for limiting a website to load exclusively within an iframe

I am managing two different websites: https://exampleiframe.com (a third-party website), https://example.com (my own website) My goal is to limit the loading of https://example.com so that it only opens within an iframe on https://exampleiframe.com To a ...

JQuery Anchor Link Scrolling Problem on Specific Devices

I'm having an issue where my webpage does not scroll correctly to an anchor when a link is clicked. The problem arises from the header size changing based on the viewport width. While it works fine in desktop Chrome, in the mobile version the header h ...

Combining various components within an inactive element tag using Vue

I am working on creating expandable rows for a table element using this HTML code snippet. The current approach involves alternating between parent rows and multiple rows within tbody elements. <tbody class="js-table-sections-header">Parent row</ ...

ng-repeat is not functioning properly despite the presence of data

Currently, I am in the process of building a basic Website using the MEAN stack, but I'm facing an issue with an ng-repeat that is failing to display any content. Oddly enough, when I attempt something similar in another project, it works perfectly fi ...

Tips for adjusting an svg component to suit various screen sizes

I inserted the following SVG component into my HTML file. It fits perfectly on my tablet, but it's too large for my smartphone. How can we automatically adjust the size of the SVG to fit different screens? <svg viewBox="310 -25 380 450" w ...

Include category to the smallest element

I am attempting to use JQuery to find the height of the tallest element and then add that height to other elements that are shorter. My goal is to assign the class, main-nav-special-padding, to these shorter elements using my current JQuery code. I tried t ...

How can I update the color scheme in styled components based on the active state of the component?

I'm currently working on a react accordion component that requires changing styles based on the active and inactive states. I have successfully set the state and added two props for color and active color. The goal is to change colors when the user cl ...

Guide to using AJAX to send a select tag value to a PHP script on the current page

Issue I am facing a problem where I need to utilize the select tag in order to choose a value and then send that value via an ajax call to a PHP script embedded within the same page. In my code, I have implemented the select tag and upon selecting a valu ...

Encountered an issue while attempting to retrieve the access token from Azure using JavaScript, as the response data could

Seeking an Access token for my registered application on Azure, I decided to write some code to interact with the REST API. Here is the code snippet: <html> <head> <title>Test</title> <script src="https://ajax.google ...

The CSS file seems to be ineffective when building Vue in production

In my Vue project, I am using a single file component with a chart module. In order to customize the styles of the chart module's CSS, I created a custom CSS file in the assets folder where I added lines to override certain styles (such as changing th ...

Mastering the art of creating the origami illusion using advanced 3D transformation techniques

I'm looking to create an origami-inspired effect on a div element, but I'm not sure where to start. To help illustrate what I mean, I will be sharing two images of a paper sheet: https://i.sstatic.net/5gRWd.jpg and https://i.sstatic.net/lL9Vd.jpg ...

The "if" statement carries out the identical action each time it is executed

Despite my efforts to toggle the value of the turn variable every time the if statement runs, I keep encountering the same outcome. It appears that turn consistently evaluates as 2. Below is the code snippet in question: $(function() { var turn = 2; ...

Changing the image's flex-grow property will take precedence over the flex settings of other child

This is the error code I am encountering, where "text1" seems to be overridden <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!--mobile friendly--> <meta name="view ...

Troubleshooting z-index problem with background image and parent tag of image

I seem to be facing an issue with the z-index property. Here is the code snippet in question: <div id="sidebarCont"> <div id="avatarCont" class="mask"> <img id="" class="" src="img.jpg" alt=""/> </div> And here is the correspo ...

What is the best way to ensure a div element on a printed page has a space between its bottom edge and the physical paper, as well as a space between its top

Within my div element lies a collection of other div elements. These elements contain lengthy text that may span multiple pages. I am attempting to print this text starting 50mm from the top edge of every physical paper, and stopping 20mm before the edge o ...

"Design the website with a WYSIWYG editor while preventing users from disrupting the page's

I am considering using an HTML WYSIWYG editor like CKEditor, but I am concerned about the possibility of users submitting HTML code that could alter the layout of the page when rendered. Here is a comparison between two posts: <p><b>This is m ...

Selecting specified elements in Jsoup using CSS selectors

Check out this HTML snippet: <div class="last-minute"> <span>Modulo:</span>4-3-3<p>Mandorlini is hopeful to have Juanito Gomez and Cirigliano back in action after the break. There's no need to worry about Hallfredsson who was ...

Ensuring a full height div using CSS

I have encountered an issue and created a fiddle to help illustrate it: http://jsfiddle.net/XJpGT/ The challenge I am facing is ensuring that the height of the green box always remains at 100%, while also making sure that the green and orange boxes do not ...