CODEWITHSUNDEEP
htmlcss
user5635857
user5635857

Reputation:

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>

Upvotes: 3

Views: 4552

Answers (2)

Lucas Lazaro
Lucas Lazaro

Reputation: 1526

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;
}

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

.lmao li a {
  text-decoration: none;
  color: black;
}

.lmao li a:hover {
  text-decoration: none;
  color: #f38763;
}

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

.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>

Upvotes: 1

Razia sultana
Razia sultana

Reputation: 2211

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>

Upvotes: 1

Related Questions