导航栏子菜单将内容下推

Question

我有一个由 css 制作的导航栏，但是当显示导航栏子菜单时，它会将下面的内容向下推

这是一个 link codepen 的完整代码 https://codepen.io/muhamedhashem/pen/GqNQaE

图片

html

<!DOCTYPE html>
<html>
<head>
    <title> </title>
    <link href="style.css" rel="stylesheet" />
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">One</a></li>


            <li>
                <a href="#">
                    Two
                    <i class="fa fa-arrow-circle-down"></i>
                </a>
                <ul>
                   <li><a href="#">Two #1</a></li>
                    <li><a href="#">Two #2</a></li>
                    <li><a href="#">Two #3</a></li>
                </ul>
            </li>


            <li>
                <a href="#">
                    Three
                    <i class="fa fa-arrow-circle-down"></i>
                </a>
                <ul>
                    <li><a href="#">Three #1</a></li>
                    <li><a href="#">Three #2</a></li>
                    <li><a href="#">Three #3</a></li>
                </ul>
            </li>


            <li>
                <a href="#">
                    Four
                    <i class="fa fa-arrow-circle-down"></i>
                </a>
                <ul>
                    <li><a href="#">#1</a></li>
                    <li><a href="#">#2</a></li>
                    <li><a href="#">#3</a></li>
                    <li><a href="#">#4</a></li>
                </ul>
            </li>


            <li>
                <a href="#">
                    Five
                    <i class="fa fa-arrow-circle-down"></i>
                </a>
                <ul>
                    <li><a href="#">Five #1</a></li>
                    <li><a href="#">Five #2</a></li>
                    <li><a href="#">Five #3</a></li>

                </ul>
            </li>
        </ul>
    </div>
    <h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>
     <h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>
    <h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>
    <h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>


</body>
</html>

css

.nav {
  width:900px;
  margin: 0 auto}

ul{
  margin: 0;
  padding: 0;
  list-style-type:none;
 text-align:center;}


ul li{
  float:left;
  width:180px;}






li ul{  display:none;}

li:hover ul{
  display:block;}




ul li a{
  display:block;
  padding: 5px 15px 5px 15px;
  background:#69F;
  color:#ffffff;

  border-top: 1px solid #FFF;
  margin-left:1px;}



ul li a:hover{
  background:#F80;
  color:#fff}


h1 {
clear:both;
}

Answer 1

这是因为导航栏本身的高度在增加。如果您希望导航栏与内容重叠，请查看 z-index 和绝对显示。

li:hover ul{
  position:absolute;
  z-index: 10; //can be any number higher than the content's z-index.
  width: 180px; //This controls the size of the dropdowns container
  display:block;
}

Answer 2

您的子菜单需要设置为绝对位置，您的父菜单项需要设置为相对位置。您应该将可见性设置为隐藏，然后为 :hover 显示它。此方法不会下推内容

此外，您需要确保为 ul li ul <--- 子菜单设置了宽度。

导航栏子菜单将内容下推

navbar submenu pushes content down

html

css

position