Separation between dropdown menu subcategories

Question

Separation between dropdown menu subcategories

I have searched through various discussions but haven't found a solution that addresses my specific issue, especially at a beginner level. I would really appreciate some guidance.

The problem I'm facing involves my drop-down menu displaying gaps between the drop-down items and their sub-elements.

This issue specifically pertains to the "Restaurants" menu item. One of the submenu items immediately appears upon hovering over the main restaurant tab, but there is a significant gap between this submenu and its contents.

Below are snippets of my CSS and HTML code:


        body {
            font-family: verdana, sans-serif;
            font-size: 100%;
        }
        #siteWrapper {
            background-color: yellow;
            width: 65%;
            margin: 0 auto;
        }
        // Other CSS properties omitted for brevity


        <!DOCTYPE html>
        <!-- HTML code snippet omitted for conciseness -->

html css drop-down-menu

Answer 1

Answer №1

Your previous code had some issues with unclosed list items and lists, making it a bit messy. However, you can use the CSS properties position: relative; and position: absolute; to correctly position the third menu layer.

Check out my solution on JSFiddle.

Here's the cleaned up navigation:

<div class="nav">
  <ul>
    <li><a href="#">Index</a></li>
    <li><a href="#">Parks</a>
      <ul>
        <li><a href="disneyland.html">Disney Land</a></li>
        <li><a href="universal.html">Universal</a></li>
        <li><a href="buschgardens.html">Busch Gardens</a></li>
      </ul>
    </li>
    <li><a href="#">Restaurants</a>
      <ul>
        <li><a href="logans.html">Logans</a></li>
        <li><a href="outback.html">Outback</a>
          <ul>
            <li><a href="#">Test Restaurant</a></li>
          </ul>
        </li>
        <li><a href="perkins.html">Perkins</a>
      </ul>
    </li>
    <li><a href="statistics.html">Statistics</a></li>
  </ul>
</div>

And here's the CSS code that makes it work:

.nav ul ul li {
  position: relative;
}

.nav ul ul ul {
  min-width: 175px;
  background-color: #ADC9F0;
  position: absolute; /* Positioning the third layer */
  left: 100%; /* Positioning the third layer */
  top: 0; /* Positioning the third layer */
}

Answer 2

Your previous code had some issues with unclosed list items and lists, making it a bit messy. However, you can use the CSS properties position: relative; and position: absolute; to correctly position the third menu layer.

Check out my solution on JSFiddle.

Here's the cleaned up navigation:

<div class="nav">
  <ul>
    <li><a href="#">Index</a></li>
    <li><a href="#">Parks</a>
      <ul>
        <li><a href="disneyland.html">Disney Land</a></li>
        <li><a href="universal.html">Universal</a></li>
        <li><a href="buschgardens.html">Busch Gardens</a></li>
      </ul>
    </li>
    <li><a href="#">Restaurants</a>
      <ul>
        <li><a href="logans.html">Logans</a></li>
        <li><a href="outback.html">Outback</a>
          <ul>
            <li><a href="#">Test Restaurant</a></li>
          </ul>
        </li>
        <li><a href="perkins.html">Perkins</a>
      </ul>
    </li>
    <li><a href="statistics.html">Statistics</a></li>
  </ul>
</div>

And here's the CSS code that makes it work:

.nav ul ul li {
  position: relative;
}

.nav ul ul ul {
  min-width: 175px;
  background-color: #ADC9F0;
  position: absolute; /* Positioning the third layer */
  left: 100%; /* Positioning the third layer */
  top: 0; /* Positioning the third layer */
}

Answer 3

Answer №2

The issue lies in the fact that you have added padding to all sides of every tag. It would be better to reorganize your CSS code so that padding is only applied to the necessary elements.

For instance, while anchor tags in your menu require padding on all sides to create space above and below, the sub-items within the menu are also anchor tags and end up receiving the same styling. This results in an unwanted gap between the submenu items.

A solution could involve creating divs with specific class names and applying padding as needed to those classes.

Answer 4

The issue lies in the fact that you have added padding to all sides of every tag. It would be better to reorganize your CSS code so that padding is only applied to the necessary elements.

For instance, while anchor tags in your menu require padding on all sides to create space above and below, the sub-items within the menu are also anchor tags and end up receiving the same styling. This results in an unwanted gap between the submenu items.

A solution could involve creating divs with specific class names and applying padding as needed to those classes.

Separation between dropdown menu subcategories

Answer №1

Answer №2

Similar questions

Connecting to an element within a separate node (XSLT)

Blockage preventing text entry in a textarea

The svg image could not be loaded from an external URL due to a Content Security Policy directive violation stating: "default-src 'none'"

Issues encountered with integrating external jQuery/JavaScript functions with Wordpress child theme template

Tips for extracting text from nested elements

I am having trouble with node.js express not recognizing the path to my CSS files

Having an issue with Jquery selector where the text does not match

Tips for adjusting the width of an HTML element that is set to position: fixed

Question: When referencing $(this) in a different div, how can you navigate back to the previous div and access its children elements in jQuery?

Utilizing the map function to display elements from a sub array

Capturing a variety of input values from a form and storing them in an array

Applying CSS styles to a page depending on certain conditions

Tips for retrieving data from Angular Material Table source

ASP.NET Core MVC: Issue with Passing C# Razor Variable to HTML Tag

Is there a way to display only the specific child div within the parent div using JavaScript without affecting the others?

The impact is felt across every button in CSS

Deactivate the second subradio button when the first option is selected and vice versa

How to transform a hyperlink into a clickable element within an absolutely positioned container

How to customize a dropdown menu with the size property?

Displaying the Price of a Product in a Different Location on Your Wordpress Site