The vertical drop-down menu is displaying and functioning incorrectly

My vertical submenu is positioned correctly, but the links are overlapping on top of each other. The submenu doesn't hide when hovering over the main menu, but it does hide when hovering outside the menu. I'm unsure of what changes or additions to make in the CSS.

Check out my vertical submenu here

nav {
    padding-top: 183px;
    margin-left: auto;
    margin-right: auto;
}
    ul {
    padding: 0;
    margin: 0;
}
nav ul {
    list-style: none;
    font-weight: bold;
    font-size: 20px;
    margin: 5px;
    width: 200px;
}
nav ul ul {
    display: none;
    margin: 0px;
    padding: 0px;
}
nav ul li {
    float: left;
}
nav ul a {
    display: block;
    width: 145px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    border: 1px solid #004c99;
    border-radius: 8px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 5px;
    padding-right: 9px;
    padding-bottom: 5px;
    padding-left: 9px;
}
nav ul a:active       {
    background: rgba(255,255,255,0.4);
    color: #FFF;
}
nav ul li a:hover, ul a:focus {
    text-decoration: none;
    background-color: #6699cc;
    color: #FFFFFF;
}
nav ul a:link, nav ul a:visited {
    background: rgba(255,255,255,0.2);
    color: #FFFFFF;
}
nav ul li a {
    display: block;
    margin-top: 0px;
}
nav ul ul li {
    float: none;
    position: relative;
}
nav ul ul li a {
    color: #fff;
    margin-top: -35px;
    position: relative;
    margin-left: 165px;
}
nav ul ul li a:hover {
    background: #6699cc;
}
nav ul ul li a:active, ul ul li a:link , ul ul li a:visited{
    background-color: #3370AD;
}
nav ul li:hover {
    margin-top: 0px;
}
nav ul li:hover > ul{
    display: block;
    position: absolute;
}
nav ul:after {
    content: "";
    clear: both;
    display: block;
}       

Any suggestions are greatly appreciated!

Answer №1

Modify the code for your navigation menu like this: change your nav ul li a { display: block; margin-top: 0px;} to ... margin-top:5px and check if it resolves the spacing problem. This adjustment should address the spacing issue effectively.

Answer №2

One mistake I encountered was incorrectly nesting the submenu in this way:

<ul id="main menu">

    <li> 
        <a>Menu item</a> 
        <!-- Remember not to close this LI tag yet! -->

        <ul>
            <li>Submenu item</li>
        </ul>

    </li> <!-- It's time to close it now -->

</ul>

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

Tips for making a JavaFX Button transparent without reducing the hitbox size

When I create a new Button in JavaFX and make the background transparent using either myButton.setBackground(Background.EMPTY); or myButton.setStyle("-fx-background-color: transparent;"), the hitbox is reduced to just the text inside the button when trigge ...

several tables all set to the identical TD width

Using a css sheet, I have formatted two tables. The first table is used for filter/sort selection, while the second table is a scrollable data table. div#scrollTableContainer { width: auto; margin: 20px; /* just for presentation purposes * ...

Negative margin causes content to conceal itself

I'm facing an issue with using a negative margin for positioning a label. The label is not showing up as expected. Specifically, I need to place a search box on a blue background but when applying a negative margin, the search box does not appear prop ...

Step-by-step guide on preventing an item from collapsing in a Bootstrap navbar

Is there a way to exclude a specific item from the navbar collapse box when the screen size becomes small? Here is the current HTML code: <div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> ...

Use the given URL to set the background image

Having trouble setting a background image for an <a> tag. The image link is set in the background-image:url property, but the image isn't showing up as the background. Here's my code, what could be the issue? <a href="#" data-to ...

Shifting the position of personalized tabs using Jquery

I have created some basic HTML/CSS tabs and I want to move to the next tab by clicking a link at the bottom of every tab. HTML <ul class="tabs"> <li class="active"> <a href="#">Explainer (2mins)</a> <div class=" ...

Unconventional choice for website navigation bar

I'm encountering an issue with my navigation bar. I have implemented a script to fix its position at the top of the site, but the base position for the navigation bar is not at the top by default. To workaround this, I made it jump to the top when the ...

How to keep Vuetify component at the top of the v-layout?

https://i.stack.imgur.com/cKdsk.png I am in the process of creating a website using vuetify and nuxt. My goal is to specify the max-width property for the expansion panel UI component (https://vuetifyjs.com/en/components/expansion-panels). Here is my curr ...

React-Native-Web generates default classes for inline styles and erroneously applies them in a jumbled sequence

Currently working on a project involving react native web and NextJS. I have encountered an issue with inline styles in React that seems to be caused by RN-Web. It appears that there is a mechanism within the framework that automatically generates classes ...

Is there a glitch or a misinterpretation of the specifications concerning the use of relative padding

VIEW DEMO At times, I like to create a square (or any rectangle) that maintains its ratio regardless of size, using a technique similar to this method. My Objective: To prevent the square from extending beyond the viewport on devices with limited heigh ...

Arrangement containing 4 separate div elements - 2 divs are fixed in size, 1 div adjusts dynamically (without scroll), and the remaining div fills the

I am trying to implement a specific layout using HTML and CSS on a webpage. So far, I have successfully created the black, red, and blue areas, but I am facing challenges with the scrollable green content. It currently has a static height, but I need it to ...

How can you use plain javascript to drag and drop the cross sign within the box in the grid?

Creating a grid in HTML where clicking on a box will draw an x sign and remove it if clicked again. View the DEMO here. Challenge Description:- I am now looking to implement dragging the cross (x) sign to another grid within the box, but cancelling the ...

Trigger click functions sequentially to display elements after specific actions are taken

Is there a way to make jQuery listen for clicks only at specific times? It seems that when I add event listeners, like $("#box").click(function(){, they are executing before the code above them finishes running. Let's say I have two boxes that should ...

Help! The CSS height property is not working properly and I'm not sure how to resolve

I'm facing an issue with the height property of a specific div and I can't seem to fix it. SCSS: .security{ border: 3px #1D3176 solid; display: flex; h2{ position: ...

What are some tactics for avoiding movement in the presence of a border setting?

I created a webpage that has the following structure: .topbar-container { width: 100%; position: fixed; top: 0; background-color: #2d3e50; z-index: 999; display: flex; transition: height 500ms; } @media (min-width: 992px) { .topbar-cont ...

Can the Bootstrap grid be arranged vertically?

I'm finding it difficult to work on a project with Bootstrap's horizontal grid system. What I want to achieve is to have my page divided into 4 sections, with the left side blocks having equal height and the right side blocks having varying heigh ...

Unusual Quirk in HTML

I'm having a simple issue that I need help with... Does anyone know how to make the image fill the empty space on the right side of the text? Take a look at this screenshot for reference: Here is the HTML file: And here is the CSS file: dl.drop ...

Tips for aligning buttons vertically within the form-row class in Bootstrap 4

I'm facing an issue where I cannot get a set of buttons in line with labels when using different column widths in Bootstrap. The behavior of a button assigned to a specific column width, like col-3, is not the same as a button assigned with automatic ...

adjusting the background with repeat-y pattern placement

I'm having an issue with setting a background image as a wrapper for the main content of my page. Currently, I've set the background image like this: #background { background: url("../image/bg.png") repeat-y 133px 50px; color: #000000; ...

Is there a way to display menu items in a list when hovering over the parent element using CSS?

Is it possible to make the code below run when hovering over (#cssmenu ul > li > ul > li ) with the mouse? #cssmenu ul > li > ul > li > ul { right: 1170px; } ...