Css 过渡扩展菜单div在导航栏中展开，但在调整窗口大小时向下推其他菜单div_Css_Transition

Css 过渡扩展菜单div在导航栏中展开，但在调整窗口大小时向下推其他菜单div

css

Css 过渡扩展菜单div在导航栏中展开，但在调整窗口大小时向下推其他菜单div,css,transition,Css,Transition,好的，我在学习html和css，所以我对这方面相对来说是新手。我跟踪了很多youtube视频，创建了不同的布局。然而，我在使用我遵循的这个特定教程（）时遇到了真正的问题。在本教程中，它展示了如何使用css转换效果制作一个非常酷的导航栏，但是，当窗口调整大小并且我悬停以展开一个div时，它会将页面上所有其他div向下移动。我希望div始终保持在容器中，无论窗口大小如何。我希望这真的很简单 <head> <meta http-equiv="Content-Type" conten

好的，我在学习html和css，所以我对这方面相对来说是新手。我跟踪了很多youtube视频，创建了不同的布局。然而，我在使用我遵循的这个特定教程（）时遇到了真正的问题。在本教程中，它展示了如何使用css转换效果制作一个非常酷的导航栏，但是，当窗口调整大小并且我悬停以展开一个div时，它会将页面上所有其他div向下移动。我希望div始终保持在容器中，无论窗口大小如何。我希望这真的很简单

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
@import url("styles.css");
</style>
</head>

<body>
<div id="container">
<a href="#"><div class="menu">
<p class="p1">HOME</p>
<p class="p2">THIS IS OUR INTRO  </p>
</div>
</a>

<div class="menu1">
<p class="p1">GALLERY</p>
<p class="p2">THIS IS MY PHOTOGRAPHY GALLERY</p>
</div>

<div class="menu2">
<p class="p1">ART PROJECTS</p>
<p class="p2">MY ART COLLECTION</p>
</div>

<div class="menu3">
<p class="p1">CONTACT</p>
<p class="p2">CONTACT ME</p>
</div>

</div>
</body>
</html>

使用“flexbox”是一个很好的例子
请使用已实现的flexbox查看您的代码：

我只添加了

display:flex和溢出：隐藏到#容器
还为每个菜单项（与宽度相同）添加了min width，以便flexbox了解其限制。
宽度在。菜单*：悬停可能是你想要的大，所有额外的将被削减flexbox本身
Flexbox在所有现代浏览器上都可以使用：这或多或少是“响应性”的，即它将适应任何环境。为此，您需要考虑媒体查询，或者使用百分比而不是固定的PX宽度（第一个是好得多，好得多）。
a{text-decoration:none;
}
#container{
height: 125px;
width: auto;
background-color:rgba(0,0,0,1);
position: relative;
}   
.menu{
height: 125px;
width: 150px;
background-color: rgba(139,62,181,1);
float: left;
transition: all .5s ease-in-out 0s;
}

.menu1{
height: 125px;
width: 150px;
background-color: rgba(255,153,0,1);
float: left;
transition: all .5s ease-in-out 0s;
}

.menu2{
height: 125px;
width: 150px;
background-color: rgba(53,108,255,1);
float: left;
transition: all .5s ease-in-out 0s;
}

.menu3{
height: 125px;
width: 150px;
background-color: rgba(154,44,21,1);
float: left;
transition: all .5s ease-in-out 0s;
}
.p1{
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
color: rgba(255,255,255,.7);
font-weight: bold;
position: relative;
width: 100px;
top: 0px;
left: 15px;
transition:all .2s ease-in-out 0s;  
}
.p2{
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color: rgba(255,255,255,.5);
position:relative;
top:0px;
left: 11px;
transition:all .2s ease-in-out 0s;  
}
.menu:hover{
width:900px;
}
.menu1:hover{
width:900px;
}
.menu2:hover{
width:900px;
}
.menu3:hover{
width:900px;
}

.menu:hover .p1{
color:rgba(255,255,255,1);
}
.menu:hover .p2{
color:rgba(255,255,255,1);
}

.menu1:hover .p1{
color:rgba(255,255,255,1);
}
.menu1:hover .p2{
color:rgba(255,255,255,1);
}

.menu2:hover .p1{
color:rgba(255,255,255,1);
}
.menu2:hover .p2{
color:rgba(255,255,255,1);
}

.menu3:hover .p1{
color:rgba(255,255,255,1);
}
.menu3:hover .p2{
color:rgba(255,255,255,1);
}