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: 267 |
Lo-Fi Version | Time is now: 27th April 2024 - 09:44 PM |