时间戳

首页 > 解决方案 > 改变孩子的宽度和位置时，父母的宽度和位置发生变化

html - 改变孩子的宽度和位置时，父母的宽度和位置发生变化

问题描述

我正在尝试使用下拉菜单制作导航栏。我希望导航栏在下拉悬停事件期间保持相同的宽度。同时，我希望下拉 div 覆盖父导航栏的宽度并以它为中心。

CSS 和 HTML

/*Navigation bar CSS*/

nav { /*Give nav element it´s space and color*/
  width: 100%;
  background-color: #333;
  position: fixed;
  margin-top: 50px;
}

.navbar {
  max-width: 1095px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 75px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  list-style: none;
}
.nav-item a {
  display: inline-block;
  padding: 10px 15px;
  text-decoration: none;
  color: white;
  width: 100px;
  text-align: center;
}

li a:hover {
  background-color: #111;  
}



/*dropdown CSS*/
.our-work-dropdown{
    position: relative;
    display: flex;
}

.dropdown-content {
    visibility: hidden;
    position: absolute;
    background-color: #f9f9f9;
}

.our-work-item:hover .dropdown-content {
  visibility: visible;
}



/*Our Work Dropdown CSS*/
.our-work {
  display: flex;
  align-items: center;
  border: solid;
  position: relative;
  width: 1095px;
  left: 100px;
}
.our-work-dropdown{
  position: relative;
  display: flex;
  list-style: none;
  justify-content: center;


}
.our-work{
  border: solid;
}
<!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 rel="stylesheet" type="text/css" href="dropwdown troubleshoot.css"/>
</head>
<body>
    <nav class = "navbar">
        <li class ="nav-item our-work-item">
            <a href="#">
                Our Work
            </a>
            <ul class ="our-work-dropdown dropdown-content">
                <li>
                    <div class = our-work>
                        <section>
                            <div>
                                Left Text
                            </div>
                            <div>
                                Right Text
                            </div>
                        </section>
                    </div>  
                </li>
            </ul>
        </li>
    </nav>
</body>
</html>

在这段代码中，我终于得到了ul li div扩展到导航栏的宽度，但是父li元素也扩展了......所以我实际上并没有扩展子元素，虽然我修改了它的 CSS，但实际上修改了父元素。

标签： htmlcssnavbardropdown

解决方案

推荐阅读