CSS Dropdown Menu Alignment with Content
Question
I am currently trying to make a (responsive) navigation bar, and while I have already troubleshooted with it a lot I can't find my way through it. :(
I have 2 issues at the moment. 1) In wide screen, I want to center the dropdown under its "button" title. 2) In smartphone/tablet screen, I want to make the dropdown, when appearing, push down the rest of the "button" titles and not covering them.
About 1, I have tried changing right and left attributes of the dropdown list but it justs sticks to the side of the screen no matter the changes I make to the position of dropdown list and parent element.
About 2, I have messed around with position but still I can't make it work as if it was static.
Ideally I would like to use just HTML and CSS.
Here is a demo: https://jsfiddle.net/SteliosKts/01o6cem5/10/
PS.I am sorry if it's a repost, it's just that I can't solve my prolbem although I have checked most of the relative threads
2 answers
solution1
0 2018-08-29 19:11:44
You need to:
- remove
position:absolute;from the.dropdownItem:hover .dropdownList. - change
display: block;todisplay: inline-block;in.dropdownList. - remove
max-height: 55pxinli:nth-child(n + 2) - Add
flex-basis: 30px;for mobile view.
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>
solution2
0 2018-08-29 21:10:47
只需从此处删除绝对值，您就会在按钮下方的大屏幕中看到下拉列表，在小屏幕中也将在按钮下方看到下拉列表：
.dropdownItem:hover .dropdownList {display: block;/* position: absolute; */}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.