The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Dropdown menu not lining up in list, Trying to get my hover dropdown menu in a list but it wont lineup with
mapguy
post 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)
Attached File  PlanningandPerfTest.html ( 81.52k ) Number of downloads: 47
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 11 2017, 01:14 PM
Post #2


.
********

Group: WDG Moderators
Posts: 7,736
Joined: 10-August 06
Member No.: 7



QUOTE(mapguy @ Oct 11 2017, 06:46 PM) *

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. unsure.gif

Also it's more practical to avoid inline styles (i.e. the STYLE attribute), put all CSS in the stylesheet instead.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 11th December 2017 - 12:02 PM