I needs some css help with dropdown menu

HTML-CSS
1

heya

I want my dropdown menu items to be separated one from another, and not so stacked.
can any1 help?

https://web-platform-jfwuhz.stackblitz.io

2

trouble is when i add margin, it adds margin to where i want, and to where i dont want.

tried with gap - no effect

3

Hmm. Trying to view your project but its been loading for 10 minutes now. Looked at my connection, and its fine with everything else opening right away

4

here you go, on codepen

I thought stackblitz will be ok, but I guess not.

5

I wish someone would take a look @ this.

7

they used to be stacked, but then I added

nav ul li ul li,
nav ul li ul li a {
  display: block;  margin-bottom: 1em;

}

which unstacks them, but still doesnt solve my issue of wanting to have it look normally

8

Hey Diomed,

I would remove the selector nav ul li ul li a from those styles which will remove some of the extra blockiness.

But, it would help greatly if you had a sketch of what you’re trying to achieve.

1 Like
9

i’m simply trying to have drop down menu centered and equally moved one item from other. which would include equally placed from main menu.

10

I’m also not really sure what you are trying to achieve.

  1. Use left: 0 and top: 100% for the menu placement.

  2. You can use grid, gap, and padding for the items.

/* Nav Dropdown */
nav ul li:hover ul {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

nav ul li ul {
  background: var(--color-bg);
  border: 1px solid var(--color-bg-secondary);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow) var(--color-shadow);
  display: none;
  height: auto;
  left: 0;
  top: 100%;
  padding: .5rem 1rem;
  position: absolute;
/*   top: 1.7rem; */
  white-space: nowrap;
  width: auto;
  z-index: 1;
}

/* code removed */
/* nav ul li ul::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.5rem;
  height: 0.5rem; 

}

nav ul li ul li,
nav ul li li  {
  display: block;  margin: 1em;

}
*/
11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.