MyBB Community Forums

Hello all,

I'm using the drop down code here, but for some reason while it works perfectly in the 'Try me' window, it looks messy and ugly when I add it to the forum.

I'm not sure what to edit/adjust to make it look proper on the site.

Any help would be appreciated <3

You have to edit the css portion of their code to adjust the "look" of the drop down menu.
You may want to adjust the background-color, the padding size, font color, etc.    This part in their example:

<style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    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: #3e8e41;
}
</style>

I did. You can see my CSS below. However, as I said, it is not seeming to be working properly. Any changes I make make the way it appears worse instead of better.
For example, in the 'Try Now' window, the buttons are not aligned to the right and the hover field goes across the entire row. On my forum, the text is aligned to the right for some reason and the hover field only covers the width of the menu option.

.ddmzdown {
    position: relative;
    display: inline-block;
	padding: 0 10px 0 10px;
}

.ddmzdown-content {
    display: none;
    position: absolute;
    background-color: #251A33;
    min-width: 160px;
	overflow:auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.ddmzdown-content a {
    color: black;
    padding: 8px 8px;
    text-decoration: none;
    display: inline-block;
}

.ddmzdown-content a:hover {background-color: #f1f1f1}

.ddmzdown:hover .ddmzdown-content {
    display: block;
}

.dropdown:hover .ddmzbtn {
    background-color: #251A33;
}

.ddmzdown-content a {
    color: black;
    padding: 8px 8px;
    text-decoration: none;
    display: inline-block;
}

I haven't tried it out but can see that you changed the: display: block;   to>  display: inline-block;

Works fine for me. What browser are you using? A link to your site will help.

Sorry, I thought I'd included it. My bad; the site is here. I am using both Chrome (default) and FireFox to view the site.

My CSS now looks like this, and I'm quite happy with how it appears, except there is a LOT of padding between each item in the drop down, and I'm not sure how to make it smaller.

.ddmzdown {
    position: relative;
    display: inline-block;
	padding: 0 10px 0 10px;
}

.ddmzdown-content {
    display: none;
    position: absolute;
    background-color: #251A33;
    min-width: 160px;
	overflow:auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.ddmzdown-content a {
    color: black;
    padding-left: 15px;
    text-decoration: none;
    display: block;
	text-align: left;
}

.ddmzdown-content a:hover {background-color: #150E1D}

.ddmzdown:hover .ddmzdown-content {
    display: block;
}

.dropdown:hover .ddmzbtn {
    background-color: #150E1D;
}

It appears to be working on your site, however I don't think you have implemented it correctly. You should not have

<ul>
  <li>...</li>
  <div>..</div>
</ul>

As the validator confirms:
https://validator.w3.org/check?uri=http%...ne&group=0

document type does not allow element "div" here; assuming missing "li" start-tag