Dropdown menu not lining up in list, Trying to get my hover dropdown menu in a list but it wont lineup with |
Dropdown menu not lining up in list, Trying to get my hover dropdown menu in a list but it wont lineup with |
mapguy |
Oct 11 2017, 11:46 AM
Post
#1
|
Group: Members Posts: 1 Joined: 11-October 17 Member No.: 26,511 |
It will include the Hover Dropdown in the list but the bullet point is way off to the left. The code im using:
CSS styling: <style> .dropbtn { background-color: white; color: blue; padding: 0px; font-size: 16px; border: none; cursor: pointer; btn-indent: 20px; width: 235px; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: white; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: blue; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #f1f1f1; } </style> HTML list: <ul> <li class="cent" style="margin-left: 20.0px; text-align: left;"><span style="font-size: large;"><a href="https://www.ok.gov/odot/Programs_and_Projects/Metropolitan_Planning/index.html">Metropolitan Planning Orginization (MPO)</a></span></li> <li class="cent" style="margin-left: 20.0px; text-align: left;"><span style="font-size: large;"><a href="">Regional Transportation Planning Orginization (RTPO)</a></span></li> <div class="dropdown"> <button class="dropbtn"><strong>Bicycle & Pedestrian Planning</strong></button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </ul> Ill attach the html associated with the code for context. Thanks in advance Attached File(s) PlanningandPerfTest.html ( 81.52k ) Number of downloads: 265 |
Christian J |
Oct 11 2017, 01:14 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
It will include the Hover Dropdown in the list but the bullet point is way off to the left. You can't put a DIV directly inside a UL, it must be inside an LI element. Maybe that fixes it, otherwise try adding a border to the .dropdown class for debugging. QUOTE btn-indent: 20px; I don't recognize that property. Also it's more practical to avoid inline styles (i.e. the STYLE attribute), put all CSS in the stylesheet instead. |
Lo-Fi Version | Time is now: 24th April 2024 - 06:09 AM |