Как убрать пробел между выпадающим списком ul внутри ul с html и css - PullRequest
Новая
       0

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

1 голос
/ 30 марта 2020

Я не знаю, что не так с моим кодом, я следовал учебнику на YouTube, чтобы создать панель навигации с html и css. Но мой дизайн показывает разрыв между выпадающим и родительским ul

Я искал ответ в StackOverflow, пробовал ответ, который нашел в StackOverflow, но он тоже не работает. 

* {
	box-sizing: border-box;
	font-family: "Roboto", sans-serif;
}
body {
	padding: 0px;
	margin: 0px;
}

header {
	background-color: #217e6a;
	height: 66px;
	color: white;
}
header * {
	color: white;
}

header .logo {
	padding-left: 2em;
	padding-right: 2em;
	float: left;
	height: inherit;
	background-color: #0f5042;
}

header .logo-text {
	margin: 5px;
}

header ul {
	float: right;
	margin: 0px;
	padding: 0px;
	list-style: none;
}

header ul li {
	float: left;
	position: relative;
	border: 1px solid red;
	vertical-align: top;
}

header ul li ul {
	position: absolute;
	top: 66px;
	right: 0px;
	width: 200px;
	display: none;
	background-color: #217e6a;
	border: 1px solid black;
	vertical-align: top;
}

header ul li:hover ul {
	display: block;
	transition: 0.5s;
}

header ul li ul li {
	width: 100%;
}

headerulli ul li:hover {
	background-color: #0f5042;
}

header ul li a {
	display: block;
	padding: 21px;
	font-size: 1.1em;
	text-decoration: none;
}

header ul li a:hover {
	background-color: #0f5042;
	transition: 0.5s;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=DM+Sans&display=swap" rel="stylesheet"> -->
    <link href="https://fonts.googleapis.com/css" rel="stylesheet">


    <link rel="stylesheet" href="<?php echo base_url() ?>assets/css/admin.css">

</head>

<body>
    <header>
        <div class="logo">
            <div class="logo-text">
                <h1>COVID-19 BJN</h1>
            </div>

        </div>
        <ul>
            <li>
                <a href="#" id="header_profile">Profile</a>
                <ul>
                    <li>
                        <a href="#">Profile</a>
                    </li>
                    <li>
                        <a href="#">Sign Out</a>
                    </li>
                </ul>
            </li>
        </ul>
    </header>
</body>

</html>

Это мой код. Пожалуйста, помогите мне, как это исправить. Спасибо

Ответы [ 2 ]

0 голосов
/ 30 марта 2020

Проблема здесь 

header ul li ul {
  position: absolute;
  top: 65px;
  right: 0px;
  width: 200px;
  display: none;
  background-color: #217e6a;
  border: 1px solid black;
  vertical-align: top;
}

У вас слишком низкое абсолютное позиционирование, просто измените top и сделайте его немного выше, и пропасть исчезнет.

0 голосов
/ 30 марта 2020

Тег a должен иметь высоту, поэтому вы не видите полную высоту.

ПРИМЕЧАНИЕ. Если вы используете границу, вам необходимо уменьшить свойство пикселя до высоты, так как граница заполнит этот контент, поэтому вам нужно переключиться между этим требованием и решить, что нужно. 

* {
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}

body {
  padding: 0px;
  margin: 0px;
}

header {
  background-color: #217e6a;
  height: 65px;
  color: red;
}

header * {
  color: white;
}

header .logo {
  padding-left: 2em;
  padding-right: 2em;
  float: left;
  height: inherit;
  background-color: #0f5042;
}

header .logo-text {
  margin: 5px;
}

header ul {
  float: right;
  margin: 0px;
  padding: 0px;
  list-style: none;
}

header ul li {
  float: left;
  position: relative;
  border: 0px solid red;
  vertical-align: top;
}

header ul li ul {
  position: absolute;
  top: 65px;
  right: 0px;
  width: 200px;
  display: none;
  background-color: #217e6a;
  border: 1px solid black;
  vertical-align: top;
}

header ul li:hover ul {
  display: block;
  transition: 0.5s;
}

header ul li ul li {
  width: 100%;
}

headerulli ul li:hover {
  background-color: #0f5042;
}

header ul li a {
  display: block;
  padding: 21px;
  font-size: 1.1em;
  text-decoration: none;
  height: 65px;
}

header ul li a:hover {
  background-color: #0f5042;
  transition: 0.5s;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=DM+Sans&display=swap" rel="stylesheet"> -->
  <link href="https://fonts.googleapis.com/css" rel="stylesheet">


  <link rel="stylesheet" href="<?php echo base_url() ?>assets/css/admin.css">

</head>

<body>
  <header>
    <div class="logo">
      <div class="logo-text">
        <h1>COVID-19 BJN</h1>
      </div>

    </div>
    <ul>
      <li>
        <a href="#" id="header_profile">Profile</a>
        <ul>
          <li>
            <a href="#">Profile</a>
          </li>
          <li>
            <a href="#">Sign Out</a>
          </li>
        </ul>
      </li>
    </ul>
  </header>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...