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

How can I place a div using pixel positioning while still allowing it to occupy space as if it were absolutely positioned?

Error: Placeholder Loading Card malfunctioning

What causes an absolutely positioned element to be positioned by its sibling rather than at the top corner of the page?

Is there a way to adjust the positioning of an image within a <div> element?

Why is it that when I refresh the page in Angular, my logged-in user is not being recognized? What could be causing this

"960-css: Building a Unique Framework for Sty

If the div element contains an <li> element, jQuery animate() will not function properly

I'm looking for help on creating a three-column table using javascript/jquery. The table should display Product, Price, and Discount (which is calculated at 20%). Can anyone

Error: The PHP contact form is displaying field names instead of the actual values being entered

Utilizing CSS files to incorporate loading icons in a component by dynamically updating based on passed props

Creating animated effects through Javascript and CSS triggered by user events

Animation does not trigger before switching pages

Displaying modal popups limited to one per session

Directional Div CSS Transition

Switching the menu in mobile view: utilizing vue and pug

Maintaining Flexbox layout without triggering item re-rendering for a new container

Tips for dynamically passing a string into a Javascript function

The script ceased functioning immediately following the inclusion of a case-insensitive search feature and interactive images

Unleashing the power of JavaScript: Sharing arrays and data structures effortlessly

Having trouble sending data from AJAX to PHP