Как убрать поле между основным меню и подменю?

Question

Сделал меню и два подменю, но проблема в том, что между пунктом основного меню и подменю находится поле. Как исправить? Пример кода:

     nav {
      position: relative;
    }
    ul {
      position: relative;
    }
    li {
      position: relative;
      display: inline;
    }
    li ul {
      display: none;
    }
    li:hover ul {
      display: inherit;
      position: absolute;
      padding: 0px;
      padding-top: 20px;
      margin: 0px;
    }
    li ul li {
      display: block;
      padding: 0px;
      margin: 0px;
      
    }

    <nav>
      <ul>
      <li>
      Пункт 1
      <ul>
      <li>Подпункт 1</li>
      <li>Подпункт 2</li>
      </ul>
      </li>
      <li>
        Пункт 2
        <ul>
        <li>Подпункт 3</li>
        <li>Подпункт 4</li>
        </ul>
      </li>
      </ul>
    </nav>

Если добавить в селектор li ul li position: absolute и left: 0px, то элементы подменю наложатся друг на друга.

Answer 1

ну раз уж объявили position: absolute; то и используйте всю его силу, т.е. управляйте 'left: xxx; top: xxx;'

nav {
  position: relative;
}

ul {
  position: relative;
}
    
li {
  position: relative;
  display: inline;

  cursor: pointer;
}

nav li {
   margin: 0px 10px 0px 10px;
}
  
li ul {
  display: none;
}

li:hover ul {
  display: inline-block;
  position: absolute;
  padding: 30px 0px 0px 0px;
  margin: 0px;
  
  left: 20px;
  top: 0px;
}

li ul li {
  display: inline-block;
  padding: 0px;
  margin: 0px;    
}

li ul li:hover {
    background: rgba(255, 0, 0, 0.1);
}

    <nav>
      <ul>
      <li>
        Пункт 1
        <ul>
          <li>Подпункт 1</li>
          <li>Подпункт 2</li>
        </ul>
      </li>
      <li>
        Пункт 2
        <ul>
          <li>Подпункт 3</li>
          <li>Подпункт 4</li>
        </ul>
      </li>
      </ul>
    </nav>

БЛОГ НА HUSL

Как убрать поле между основным меню и подменю?

Ответы (1 шт):