Rhys Edwards Rhys Edwards - 1 month ago 16
CSS Question

Gap Between dropdown menu and sub menu

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 there is a gap. There are posts very similar to this but i could't extract an answer from them. Like this one

Space between menu and drop down menu



deepMenu {
background: black !important;
margin-left: 100px !important;
position: absolute !important;
}
.lmao li ul {
display: none;
position: absolute;
border-top: 5px solid black;
margin-top: 18px;
}
.lmao li ul li {
display: none;
border-top: 0.1px solid #F2F2F2;
padding: 10px 40px 10px 10px;
margin: 0;
position: relative;
z-index: 9999999;
background: white;
font-size: 8pt;
line-height: 24px;
text-align: left;
}
.lmao li:hover > ul,
.lmao li:hover > ul li {
display: block;
}

<ul class="lmao">
<li class="point1"><a href="index.html">home</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2 long lel</a></li>
<li><a href="#">Sub Menu 3 really bare long mad</a></li>
<li><a href="#">Sub Menu 4 dvg</a></li>
</ul>

<li class="point"><a href="index.html">features</a>
<ul>
<li><a href="#">sdfgsdfgsdfgsdfgsdfgsdfg</a></li>
<li><a href="#">sdfg</a></li>
<li><a href="#">sdfgsdfgsdfgsdfg</a></li>
<li><a href="#">sdfgsdfgsdfgsdfgsdfg</a></li>
</ul>

<li class="point layout"><a href="#">Layouts</a>
<ul>
<li><a href="#">sfdgsdfgsdfgsdfgsdfgdfgsdgsdf</a></li>
<li><a href="#">sfdgsdfgsdfgl</a></li>
<li><a href="#">dfsgsdfgsdfgsdfgsdfgsdfgsdfg</a></li>
<li class="arrow"><a href="#">sfgsdfg</a>
<ul class="deepMenu">
<li><a href="#">Deep Menu 1</a>
<ul>
<li><a href="#">Sub Deep 1</a></li>
<li><a href="#">Sub Deep 2</a></li>
<li><a href="#">Sub Deep 3</a></li>
<li><a href="#">Sub Deep 4</a></li>
</ul>
</li>
<li><a href="#">Deep Menu 2</a></li>
</ul>
</li>
</ul>
</li>

<li class="point"><a href="index.html">pages</a></li>
<li class="point"><a href="index.html">light version</a></li>
</ul>




Answer

body {
    background-color: #cac3bc
}
nav {
	float: left;
}
nav ul ul {
	display: none;
}
	nav ul li:hover > ul {
		display: block;
	}
	nav ul {
	background-color: #fff;
	margin-top: 10px;
	padding: 0 20px;  
	list-style: none;
	position: relative;
	display: inline-table;
	margin-right: -80px;
}
	nav ul li {
	float: left;
}
		nav ul li:hover {
			border-bottom: 5px solid #f5aa65;
            color: #fff;
			
		}
		nav ul li a:hover {
			color: #000;
		}
	
	nav ul li a {
		display: block; 
		padding: 15px 15px;
		font-family: 'PT Sans', sans-serif;
		color: #000; 
		text-decoration: none;
	}
	nav ul ul {
	background-color:#fff;
	border-radius: 0px; 
	padding: 0;
	position: absolute;
	top: 100%;
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
}
	nav ul ul li {
		float: none; 
		position: relative;
	}
		nav ul ul li a {
			padding: 15px 40px;
			color: #000;
		}

nav ul ul:before {
        content: "";
        display: block;
        height: 20px;
        position: absolute;
        top: -20px;
        width: 100%;
    }
<body>
<nav>
	<ul>
		<li><a href="#">One</a>
        	<ul>
				<li><a href="1.html">A</a></li>
				<li><a href="2.html">B</a>
            </ul>
        </li>
		<li><a href="#">Two</a>
			<ul>
				<li><a href="3.html">A</a></li>
				<li><a href="4.html">B</a></li>
				<li><a href="5.html">C</a></li>
			</ul>
		</li>
		<li><a href="#">Three</a>
			<ul>
				<li><a href="6.html">A</a></li>
				<li><a href="7.html">B</a></li>
			</ul>
		</li>
		<li><a href="8.html">Four</a></li>
	</ul>
</nav>
</body>