CSS下拉菜单与内容对齐

Question

我目前正在尝试制作一个（响应的）导航栏，尽管已经对其进行了很多故障排除，但我找不到通过它的方法。 :(

我目前有2个问题。 1）在宽屏中，我想将下拉菜单的“按钮”标题置于居中位置。 2）在智能手机/平板电脑屏幕上，我要下拉菜单，出现时，按下其余的“按钮”标题，而不覆盖它们。

大约1，我尝试更改下拉列表的right和left属性，但是无论我对下拉列表和父元素的position进行什么更改，它都只会停留在屏幕的一侧。

大约2时，我已经弄乱了position但仍然无法使它像静态的那样工作。

理想情况下，我只想使用HTML和CSS。

这是一个演示： https : //jsfiddle.net/SteliosKts/01o6cem5/10/

PS。很抱歉，如果是重新发布，尽管我已经检查了大多数相关线程，但是我无法解决我的问题

Answer 1

你需要：

1. 去除position:absolute; 从.dropdownItem:hover .dropdownList 。
2. 更改display: block; display: inline-block; 在.dropdownList 。
3. 在li:nth-child(n + 2)删除max-height: 55px
4. 添加flex-basis: 30px; 用于移动视图。

 html, body { font-size: 100%; margin: 0px; padding: 0px; height: 100vh; width: 100vw; align-content: center; text-align: center; overflow-y: auto; } * { box-sizing: border-box; } /*------------Top Header & Logo------------*/ #background_Header { display: inline-block; background-color: #9a999b; width: 350px; height: 100px; } #vertical_top_header_placeHolder { float: left; background-color: #9a999b; width: 100%; height: 45px; position: absolute; } /*------------------------------------------*/ /*-------------------Navgiation Bar---------------*/ ul { list-style-type: none; display: flex; justify-content: center; /*border: 1px solid black;*/ padding-left: 0px; } li { /* required for logo positioned in center */ flex-basis: 90px; padding-top: 10px; padding-right: 0px; /*border: 1px solid black;*/ } li a:hover { background-color: #f1f1f1 } li:first-child, li:nth-child(n + 5) { order: 3; } li:first-child { flex-basis: auto; z-index: 1; } li:nth-child(n + 2) { padding-top: 65px; } li:nth-child(6) { padding-top: 55px; } .dropdownItem:hover .dropdownList { display: inline-block; } .dropdownButton { display: inline-block; text-align: center; text-decoration: none; color: black; } .dropdownList { display: none; position: relative; background-color: #d6d6d6; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdownList a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /*---------------------------------------------------*/ /*---------------Smartphone Header Style---------------*/ @media only screen and (max-width: 600px) { li:first-child { background-color: #9a999b; } li { flex-basis: 30px; } #vertical_top_header_placeHolder { display: none; } } /*-----------------------------------------------------*/ /*---------------Vertical Navigation Style---------------*/ @media only screen and (max-width: 900px) { ul { flex-direction: column; } .dropdownItem {} .dropdownButton {} .dropdownList { margin: 0 auto; width: 100%; } li { flex-basis: 30px; } li:first-child, li:nth-child(n + 5) { order: 0; } li:nth-child(n + 2) { padding-top: 10px; } } /*--------------------------------------------------------*/ 

 <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&subset=latin,greek" rel="stylesheet" type="text/css" /> <link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600&subset=latin,greek-ext,greek" rel="stylesheet" type="text/css" /> </head> <body> <!--<div id="vertical_Conteiner">--> <div id="vertical_top_header_placeHolder"></div> <nav> <ul> <li> <div id="background_Header"> </div> </li> <li class="dropdownItem"> <a class="dropdownButton" href="javascript:void(0)"> Team 1 </a> <div class="dropdownList"> <a href="#">T1I1</a> <a href="#">T1I2</a> <a href="#">T1I3</a> <a href="#">T1I4</a> </div> </li> <li class="dropdownItem"> <a class="dropdownButton" href="javascript:void(0)"> Team 2 </a> <div class="dropdownList"> <a href="#">T2I1</a> <a href="#">T2I2</a> <a href="#">T2I3</a> <a href="#">T2I4</a> <a href="#">T2I5</a> </div> </li> <li class="dropdownItem"> <a class="dropdownButton" href="javascript:void(0)"> Team 3 </a> <div class="dropdownList"> <a href="#">T3I1</a> <a href="#">T3I2</a> <a href="#">T3I3</a> <a href="#">T3I4</a> </div> </li> <li class="dropdownItem"> <a class="dropdownButton" href="javascript:void(0)"> Team 4 </a> <div class="dropdownList"> <a href="#">T4I1</a> <a href="#">T4I2</a> </div> </li> <li class="dropdownItem"> <a class="dropdownButton" href="javascript:void(0)"> Team 5 BigWord </a> <div class="dropdownList"> <a href="#">T5I1</a> <a href="#">T5I2</a> </div> </li> <li class="dropdownItem"> <a class="dropdownButton" href="javascript:void(0)"> Team 6 </a> <div class="dropdownList"> <a href="#">T6I1</a> <a href="#">Team6_BigItem2</a> <a href="#">T6I3</a> <a href="#">T6I4</a> <a href="#">T6I5</a> </div> </li> </ul> </nav> <article> <div> </div> </article> </body> </html> 

Answer 2

只需从此处删除绝对值，您就会在按钮下方的大屏幕中看到下拉列表，在小屏幕中也将在按钮下方看到下拉列表：

.dropdownItem:hover .dropdownList {display: block;/*   position: absolute; */}