Gap Between Dropdown Menu And Sub Menu

July 29, 2023 Post a Comment

I'd like for the menu sub menu to show 10 pixels underneath the menu, i can achieve that using margin-top on the ul, but then i cant move my mouse down to the sub menu because ther

Solution 1:

UPDATE:

Now that you gave the reference, the hover menu is not actually distant from the li itself, but it is positioned right below it. On the example site the li has a height bigger than the text within and has position: relative; on it.

The dropdown is absolute positioned right below this bigger <li> element with a top: 100%; that way it is distant from the text that triggers the dropdown.

Check the updated Snippet bellow with an updated solution.

Margins are not 'hoverable', and therefore the hover selector is not triggered. One way to keep it distant whilst 'hoverable' is to use padding instead of margins.

So you could change your .lmao li ul, although I wouldn't advise adding style to tags as a CSS best practice, I usually adopt a CSS naming convention such as BEM, SMACSS, among others.

/* Reset the ul style */ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

deepMenu {
  background: black !important;
  margin-left: 100px!important;
  position: absolute !important;
}

.lmao {
  width: 100%;
  text-align: center;
}

.lmaoli {
  display: inline-block;
  background-color: white;
  padding: 15px;
  position: relative;
  padding: 20px;
}

.lmaolia {
  text-decoration: none;
  color: black;
}

.lmaolia:hover {
  text-decoration: none;
  color: #f38763;
}

.lmaoliul {
  display: none;
  position: absolute;
  border-top: 5px solid black;
  top: 100%;
  min-width: 200px;
}

.lmaoliulli {
  display: none;
  border-top: 0.1px solid #F2F2F2;
  padding: 10px40px10px10px;
  margin: 0;
  position: relative;
  z-index: 9999999;
  background: white;
  font-size: 8pt;
  line-height: 24px;
  text-align: left;
}
.lmaoli:hover > ul,
.lmaoli:hover > ulli {
  display: block;
}

<ulclass="lmao"><liclass="point1"><ahref="index.html">home</a><ul><li><ahref="#">Sub Menu 1</a></li><li><ahref="#">Sub Menu 2 long lel</a></li><li><ahref="#">Sub Menu 3 really bare long mad</a></li><li><ahref="#">Sub Menu 4 dvg</a></li></ul><liclass="point"><ahref="index.html">features</a><ul><li><ahref="#">sdfgsdfgsdfgsdfgsdfgsdfg</a></li><li><ahref="#">sdfg</a></li><li><ahref="#">sdfgsdfgsdfgsdfg</a></li><li><ahref="#">sdfgsdfgsdfgsdfgsdfg</a></li></ul><liclass="point layout"><ahref="#">Layouts</a><ul><li><ahref="#">sfdgsdfgsdfgsdfgsdfgdfgsdgsdf</a></li><li><ahref="#">sfdgsdfgsdfgl</a></li><li><ahref="#">dfsgsdfgsdfgsdfgsdfgsdfgsdfg</a></li><liclass="arrow"><ahref="#">sfgsdfg</a><ulclass="deepMenu"><li><ahref="#">Deep Menu 1</a><ul><li><ahref="#">Sub Deep 1</a></li><li><ahref="#">Sub Deep 2</a></li><li><ahref="#">Sub Deep 3</a></li><li><ahref="#">Sub Deep 4</a></li></ul></li><li><ahref="#">Deep Menu 2</a></li></ul></li></ul></li><liclass="point"><ahref="index.html">pages</a></li><liclass="point"><ahref="index.html">light version</a></li></ul>

Solution 2:

body {
    background-color: #cac3bc
}
nav {
	float: left;
}
navulul {
	display: none;
}
	navulli:hover > ul {
		display: block;
	}
	navul {
	background-color: #fff;
	margin-top: 10px;
	padding: 020px;  
	list-style: none;
	position: relative;
	display: inline-table;
	margin-right: -80px;
}
	navulli {
	float: left;
}
		navulli:hover {
			border-bottom: 5px solid #f5aa65;
            color: #fff;
			
		}
		navullia:hover {
			color: #000;
		}
	
	navullia {
		display: block; 
		padding: 15px15px;
		font-family: 'PT Sans', sans-serif;
		color: #000; 
		text-decoration: none;
	}
	navulul {
	background-color:#fff;
	border-radius: 0px; 
	padding: 0;
	position: absolute;
	top: 100%;
	box-shadow: 0px0px9pxrgba(0,0,0,0.15);
}
	navululli {
		float: none; 
		position: relative;
	}
		navulullia {
			padding: 15px40px;
			color: #000;
		}

navulul:before {
        content: "";
        display: block;
        height: 20px;
        position: absolute;
        top: -20px;
        width: 100%;
    }

<body><nav><ul><li><ahref="#">One</a><ul><li><ahref="1.html">A</a></li><li><ahref="2.html">B</a></ul></li><li><ahref="#">Two</a><ul><li><ahref="3.html">A</a></li><li><ahref="4.html">B</a></li><li><ahref="5.html">C</a></li></ul></li><li><ahref="#">Three</a><ul><li><ahref="6.html">A</a></li><li><ahref="7.html">B</a></li></ul></li><li><ahref="8.html">Four</a></li></ul></nav></body>

Build Html5

Gap Between Dropdown Menu And Sub Menu

Solution 1:

Solution 2:

Post a Comment for "Gap Between Dropdown Menu And Sub Menu"