Issues with navigation menu not showing dropdown options and impacting webpage layout (HTML/CSS)

I'm having trouble creating a drop-down navigation menu using HTML and CSS. When I add the drop-down list, my menu extends onto two lines instead of one, and the drop-down menu doesn't appear when hovering. Here is a link to the jsfiddle for reference: https://jsfiddle.net/qbwyLzqj/

I can't seem to figure out where I went wrong.

.menu li {
  padding: 10px;
}


.navigation {
      width: 80%;
      margin: 0 auto;
    }
    
    .menu {
      display: inline-block;
      width: 70%;
      text-align: center;
    }
    
    .menu a {
      text-decoration: none;
      color: black;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 11px;
    }
    
    #menu-item-1,
    #menu-item-2,
    #menu-item-3,
    #menu-item-4,
    #menu-item-5,
    #menu-item-6 {
      display: inline-block;
    }
    
    .menu li {
      padding: 10px;
    }
    
    .menu li a:hover {
      color: grey;
    }
    
    .sub-menu-2 li {
      display: none;
    }
    
    .menu li:hover .sub-menu-2 li {
      display: block;
    }
 <nav class="navigation">
    
      <ul class="menu">
        <li id="menu-item-1"><a href="#">Portfolio</a></li>
    
        <li id="menu-item-2"><a href="#">More Info</a></li>
    
        <ul class="sub-menu-2">
          <li id="sub-menu-item-2-1"><a href="#">About Me</a></li>
          <li id="sub-menu-item-2-2"><a href="#">Work</a></li>
          <li id="sub-menu-item-2-3"><a href="#">Services</a></li>
          <li id="sub-menu-item-2-4"><a href="#">FAQ</a></li>
        </ul>
    
        <li id="menu-item-3"><a href="#">Designs</a></li>
    
        <li id="menu-item-4"><a href="#">Shop</a></li>
    
        <li id="menu-item-5"><a href="#">Blog</a></li>
    
        <li id="menu-item-6"><a href="#">Contact</a></li>
      </ul>
    
    
    </nav>

htmlcss

Answer №1

Not only did I fix the layout breaking, but I also enhanced it further.

The issue was due to not utilizing the .sub-menu-2 within its parent li. I have rectified this and made your code more flexible by allowing the sub-menu to display when hovering over the parent list-item.

Take a look for yourself. Check out the fiddle here 

.navigation {
  width: 80%;
  margin: 0 auto;
}

.menu {
  display: inline-block;
  width: 70%;
  text-align: center;
}

.menu a {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
}

#menu-item-1,
#menu-item-2,
#menu-item-3,
#menu-item-4,
#menu-item-5,
#menu-item-6 {
  display: inline-block;
}

.menu li {
  padding: 10px;
  position: relative;
}

.menu li a:hover {
  color: grey;
}

.sub-menu-2 {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
  text-align: left;
}

.sub-menu-2 li {
display: block;
}

.menu li:hover .sub-menu-2 {
  display: block;
}
<nav class="navigation">

  <ul class="menu">
    <li id="menu-item-1"><a href="#">Portfolio</a></li>

    <li id="menu-item-2"><a href="#">More Info</a>

    <ul class="sub-menu-2">
      <li id="sub-menu-item-2-1"><a href="#">About Me</a></li>
      <li id="sub-menu-item-2-2"><a href="#">Work</a></li>
      <li id="sub-menu-item-2-3"><a href="#">Services</a></li>
      <li id="sub-menu-item-2-4"><a href="#">FAQ</a></li>
    </ul>
    </li>

    <li id="menu-item-3"><a href="#">Designs</a></li>

    <li id="menu-item-4"><a href="#">Shop</a></li>

    <li id="menu-item-5"><a href="#">Blog</a></li>

    <li id="menu-item-6"><a href="#">Contact</a></li>
  </ul>


</nav>

I trust this information was beneficial. Cheers!

Answer №2

Check out this JSFiddle link:

Update HTML

<li id="menu-item-2"><a href="#">More Info</a>
      <ul class="sub-menu-2">
        <li id="sub-menu-item-2-1"><a href="#">About Me</a></li>
        <li id="sub-menu-item-2-2"><a href="#">Work</a></li>
        <li id="sub-menu-item-2-3"><a href="#">Services</a></li>
        <li id="sub-menu-item-2-4"><a href="#">FAQ</a></li>
      </ul>
</li>

Include CSS

.sub-menu-2 {
  position: absolute;
  background: #fff;
}

JSFiddle Link

Answer №3

  1. Ensure the dropdown menu ul is nested within the li element
  2. Utilize positioning to isolate the dropdown menu from impacting other list items

Access the fiddle here

.navigation {
  width: 100%;
  margin: 0 auto;
}

.menu {
  display: inline-block;
  width: 70%;
  text-align: center;
}

.menu a {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
}

#menu-item-1,
#menu-item-2,
#menu-item-3,
#menu-item-4,
#menu-item-5,
#menu-item-6 {
  display: inline-block;
}

.menu li {
  padding: 10px;
}

.menu li a:hover {
  color: grey;
}

#menu-item-2 {
  position: relative;
}

.sub-menu-2 {
  display: none;
  position: absolute;
  list-style: none;
  text-align: left;
  margin: 0;
  padding: 0;
}

.sub-menu-2 li {
  padding: 10px 0;
}

.menu li:hover .sub-menu-2 {
  display: block;
}
<!-- nav -->
<nav class="navigation">

  <ul class="menu">
    <li id="menu-item-1"><a href="#">Portfolio</a></li>

    <li id="menu-item-2"><a href="#">More Info</a>

      <ul class="sub-menu-2">
        <li id="sub-menu-item-2-1"><a href="#">About Me</a></li>
        <li id="sub-menu-item-2-2"><a href="#">Work</a></li>
        <li id="sub-menu-item-2-3"><a href="#">Services</a></li>
        <li id="sub-menu-item-2-4"><a href="#">FAQ</a></li>
      </ul>
    </li>
    <li id="menu-item-3"><a href="#">Designs</a></li>

    <li id="menu-item-4"><a href="#">Shop</a></li>

    <li id="menu-item-5"><a href="#">Blog</a></li>

    <li id="menu-item-6"><a href="#">Contact</a></li>
  </ul>


</nav>

Answer №4

Make sure to try the updated file

.menu li {
  position:relative;
}
.sub-menu-2 {
    position:absolute;
    left:0;
    text-align:left;
    width:100%;

 }


.navigation {
  width: 80%;
  margin: 0 auto;
}

.menu {
  display: inline-block;
  width: 70%;
  text-align: center;
}

.menu a {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
}

#menu-item-1,
#menu-item-2,
#menu-item-3,
#menu-item-4,
#menu-item-5,
#menu-item-6 {
  display: inline-block;
}

.menu li {
  padding: 10px;
  position:relative;
}

.menu li a:hover {
  color: grey;
}

.sub-menu-2 li {
  display: none;
}

.menu li:hover .sub-menu-2 li {
  display: block;
  padding-left:0;
}
.sub-menu-2 {
  position:absolute;
  left:0;
  text-align:left;
  width:100%;
  
}
<!-- nav -->
<nav class="navigation">

  <ul class="menu">
    <li id="menu-item-1"><a href="#">Portfolio</a></li>

    <li id="menu-item-2"><a href="#">More Info</a>
    <ul class="sub-menu-2">
      <li id="sub-menu-item-2-1"><a href="#">About Me</a></li>
      <li id="sub-menu-item-2-2"><a href="#">Work</a></li>
      <li id="sub-menu-item-2-3"><a href="#">Services</a></li>
      <li id="sub-menu-item-2-4"><a href="#">FAQ</a></li>
    </ul>
    </li>

    

    <li id="menu-item-3"><a href="#">Designs</a></li>

    <li id="menu-item-4"><a href="#">Shop</a></li>

    <li id="menu-item-5"><a href="#">Blog</a></li>

    <li id="menu-item-6"><a href="#">Contact</a></li>
  </ul>


</nav>

Check out the fiddle fiddle

Answer №5

Kindly review the code snippet provided below.

.navigation {
  width: 80%;
  margin: 0 auto;
}

.menu {
  display: inline-block;
  width: 70%;
  text-align: center;
}

.menu a {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
}

#menu-item-1,
#menu-item-2,
#menu-item-3,
#menu-item-4,
#menu-item-5,
#menu-item-6 {
  display: inline-block;
}

.menu li {
  padding: 10px;
  position: relative;
}

.menu li a:hover {
  color: grey;
}

.sub-menu-2 {
  display: none;
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
  margin: 0;
}

.menu li:hover .sub-menu-2 {
  display: block;
}
<nav class="navigation">

  <ul class="menu">
    <li id="menu-item-1"><a href="#">Portfolio</a></li>

    <li id="menu-item-2"><a href="#">More Info</a>

      <ul class="sub-menu-2">
        <li id="sub-menu-item-2-1"><a href="#">About Me</a></li>
        <li id="sub-menu-item-2-2"><a href="#">Work</a></li>
        <li id="sub-menu-item-2-3"><a href="#">Services</a></li>
        <li id="sub-menu-item-2-4"><a href="#">FAQ</a></li>
      </ul>
    </li>
    <li id="menu-item-3"><a href="#">Designs</a></li>

    <li id="menu-item-4"><a href="#">Shop</a></li>

    <li id="menu-item-5"><a href="#">Blog</a></li>

    <li id="menu-item-6"><a href="#">Contact</a></li>
  </ul>


</nav>

Answer №6

Utilize the following code snippet for creating a navigation bar:

<!-- nav -->
<nav class="navigation">

  <ul class="menu">
    <li id="menu-item-1"><a href="#">Portfolio</a></li>

    <li id="menu-item-2"><a href="#">More Info</a>
    <ul class="sub-menu-2">
      <li id="sub-menu-item-2-1"><a href="#">About Me</a></li>
      <li id="sub-menu-item-2-2"><a href="#">Work</a></li>
      <li id="sub-menu-item-2-3"><a href="#">Services</a></li>
      <li id="sub-menu-item-2-4"><a href="#">FAQ</a></li>
    </ul>

    </li>

    <li id="menu-item-3"><a href="#">Designs</a></li>

    <li id="menu-item-4"><a href="#">Shop</a></li>

    <li id="menu-item-5"><a href="#">Blog</a></li>

    <li id="menu-item-6"><a href="#">Contact</a></li>
  </ul>

</nav>

.navigation{
   width: 80%;
  margin: 0 auto;
}
.menu,.menu ul{
  list-style:none;
  padding:0;
}
.menu >li{
  position:relative;
  display:inline-block;
   padding: 5px;
}
.menu a {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
}
.menu >li ul{
  position: absolute;
    display: none;
    left: 0;
    top: 100%;
      display: none;
  }
  .menu >li:hover ul{
   display: block;
  }

For a live demonstration, check out this Fiddler link: https://jsfiddle.net/8engpfu1/1/

Answer №7

If you're looking to create a stylish navigation menu, consider using the following code snippet:

.navigation {
  width: 80%;
  margin: 0 auto;
}
.menu {
  display: inline-block;
  width: 100%;
  text-align: center;
  list-style-type: none;
  padding: 0px; 
  margin: 0px;
  display: flex;
  justify-content: center;
}
.menu a {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
}
.menu li {
  padding: 10px;
}
#menu-item-2 {
  position: relative;
  white-space: nowrap;
}
.sub-menu-2 {
  list-style-type: none; 
  padding: 0px;
  margin: 0px;
}
.sub-menu-2 li {
  display: none;
  padding: 0px; 
  margin: 0px;
  width: 100%;
}
.menu li:hover .sub-menu-2 li {
  display: block;
}
<nav class="navigation">
  <ul class="menu">
    <li id="menu-item-1"><a href="#">Portfolio</a></li>
    <li id="menu-item-2"><a href="#">More Info</a>
      <ul class="sub-menu-2">
        <li id="sub-menu-item-2-1"><a href="#">About Me</a></li>
        <li id="sub-menu-item-2-2"><a href="#">Work</a></li>
        <li id="sub-menu-item-2-3"><a href="#">Services</a></li>
        <li id="sub-menu-item-2-4"><a href="#">FAQ</a></li>
      </ul>
    </li>
    <li id="menu-item-3"><a href="#">Designs</a></li>
    <li id="menu-item-4"><a href="#">Shop</a></li>
    <li id="menu-item-5"><a href="#">Blog</a></li>
    <li id="menu-item-6"><a href="#">Contact</a></li>
  </ul>
</nav>

Answer №8

To revert your menu back to a single line, simply add display: none; to the <ul class="sub-menu-2">.

.sub-menu-2 {
  display: none;
}

The menu is currently splitting because you are only hiding .sub-menu-2 li and not .sub-menu-2 itself.

Consider setting the z-index to a higher value, such as 1000, to ensure the submenu displays on top of other elements when necessary.

Answer №9

Revise your 'menu-item-2' as shown below,

  <li id="menu-item-2"><a href="#">More Details</a>
  <ul class="sub-menu-2">
    <li id="sub-menu-item-2-1"><a href="#">About Us</a></li>
    <li id="sub-menu-item-2-2"><a href="#">Projects</a></li>
    <li id="sub-menu-item-2-3"><a href="#">Features</a></li>
    <li id="sub-menu-item-2-4"><a href="#">Help</a></li>
  </ul>
</li>

insert the following css into your code

    .sub-menu-2 {
      position: fixed;
      background: #ffffff;
     }

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

Using .get methods with jQuery's .on

I need to retrieve the tag name of the element that is clicked inside an li when the user interacts with it. The li element gets dynamically added to the HTML code. I have implemented the following code, but unfortunately, it does not seem to be functionin ...

javascriptjqueryhtml

Is there a way to evenly space out the buttons in the Nav element with more room in between each one?

I need the buttons to be evenly spaced with more room between them. And, of course, they need to be responsive in the end. I attempted to use Bootstrap's "d-flex" class to arrange the buttons, but it didn't work as expected. If you review my Boo ...

javascripthtmlcssbootstrap-5

The battle between Hover, Focus, and Blur modes intensifies

My goal is to implement 4 different effects on an element: When hovering over the element. When moving away from the element. When focusing on the element. When blurred. However, I'm encountering a conflict where when I focus on the element, the ...

javascriptjqueryhtmlcss

Upon opening index.html in the browser, the jQuery code fails to execute, as no errors are displayed in the console

I am struggling to make a simple toggleClass() function work in jQuery and I can't seem to figure out why. This is just a beginner exercise for me with jQuery. The code works perfectly when I test it as a snippet or manually in the console, but when I ...

javascriptjqueryhtmlcss

Unable to load the CSS file

Having trouble with the folder structure in my content directory: -Content --jquery-ui-1.10.4.custom --------------------------css --------------------------smoothness ------------------------------------jquery-ui-1.10.4.custom.css ----------------------- ...

jquerycssasp.net-mvc-4

Guide to adding a new Vue-Grid-Item with a button

Currently, I am working on a software project for the Research department at my university, specifically focusing on an Atomic Layer Deposition system. The main goal of this program is to allow users to create and customize their own 'recipe' for ...

javascripthtmlvue.jsgridvuex

What causes an :before content element positioned absolutely to exceed the boundaries of its parent when set as an inline element?

Check out this CodePen: https://codepen.io/jossnaz/pen/BMwpjR HTML <br> <div class="" style=" "> <span class="" style=""> Lorem ipsum nunc hendrerit imperdiet aliquet class massa suspendisse libero, enim condimentum himenaeos h ...

htmlcss

Ensure the cursor is continually grabbing while moving items within a list using the @angular/cdk/drag-drop functionality

I have an example on stackblitz where I am using @angular/cdk/drag-drop in my project. I am attempting to change the cursor to cursor:grabb and cursor:grabbing when the cursor is over an element and when I drag a picked element. Here is the CSS line I am ...

cssangular

The span is unresponsive

When focusing on an input or checking its validity, the span should move up but it's not responding to any styles. <div class="login"> <span class="logtxt">Username or email</span> <input type=& ...

htmlcss

Should CSS variables be defined within the render method of a React component?

Yesterday, I mistakenly created and deleted a post. Now, I am facing an issue with creating a component that requires specific styling. The problem arises when the componentDidMount() method causes flickering during the rendering process, as it takes some ...

javascripthtmlcssreactjscss-variables

Does an href and click events both happen simultaneously?

JavaScript Purpose: Implement a series of loops and create anchor links with the 'href' attribute <a class="mui-control-item" v-for="(item, index) in dai" v-on:click ="abc(item)" :href="'#item'+(index+1)+ 'mobile'" ...

javascripthtmlvue.js

How can I close the menu when a menu item is clicked in a React.js application?

I am facing an issue where I want to close the menu when clicking on any menu item in React JS. The functionality works fine with a button icon but not with individual menu items. How can I resolve this problem? I have been trying to implement it using CSS ...

javascriptcssreactjs

arranging a collection of images based on their values in increasing order

cardShop is a container with various images, each with its own unique ID and value attribute. These values consist of two numbers separated by a comma, such as 2000,500 or 1500,200. My goal is to sort these images in ascending order based on the first numb ...

javascripthtml

Using jQuery UI to trigger Highlight/Error animations

Apologies if this question seems obvious, but I can't seem to find a clear answer anywhere... Is there a way to add a highlight/error message similar to the ones on the bottom right of this page: http://jqueryui.com/themeroller/ by simply using a jQu ...

javascriptjquerycssjquery-ui

Align pictures in the middle of two divisions within a segment

This is the current code: HTML: <section class="sponsorSection"> <div class="sponsorImageRow"> <div class="sponsorImageColumn"> <img src="img/kvadrat_logo.png" class="sponsorpicture1"/> </div& ...

javascripthtmlcss

Locate the checkbox label using CSS

Is there a way to replace the standard checkboxes with font-awesome icons without modifying the generated HTML or using jQuery? EDIT: The code includes JavaScript that prevents me from making changes. Also, note that the label text class can be -1 or -2 a ...

htmlcsscheckboxcss-selectors

React - Next Blog: Issue with empty lines displaying on the browser

Currently, I am developing a blog that retrieves data from Mongo Atlas. The blog is built using Next.js version 9.5.4 and is hosted on Vercel. The blog page utilizes static props and regeneration. The data is fetched in JSON format and then stringified fo ...

htmlcssreactjsclassnext.js

What is the best way to handle HTML files that have the same name as folders?

I am looking to incorporate a News section on my website with the unique URL: mysite.com/news Each news article should be stored in a specific folder named "News" like this: mysite.com/news/2021 However, when I attempt to access the news.html file (witho ...

htmlcss

Developing and integrating views within a node-webkit desktop application

For my file copier desktop application built with node webkit, I aim to create a seamless flow where the initial check for existing profile data determines the first page displayed. The header with static links/buttons to various views remains consistent ...

javascripthtmlcssnode.jsnode-webkit

Optimizing loading times for mobile banners through media queries

I currently have a standard size banner that loads when my page is accessed on a computer. However, I would like to optimize the loading speed by having a smaller version specifically for mobile devices using a media query. My main question is how does t ...

cssmobilemedia-queriesloadingbanner