Simple Drop-Down Menu

I created a test page that is uses a blank template with no header/footer and put the code for the drop-down on it and it seems to work fine. See the link below. It’s not using the Avia Layout Builder.

Hi Jordan,
All I did was add a code block on the first page with a couple divs and the text that appears on the mousover and items that appear below it. On the second page that uses a blank template I just copied and pasted the html into the WordPress editor under the “Text” tab without activating the Avia Layout Builder.

Login info is below in the private info.

Thanks!

Hi Jordan,
Sorry for not getting back to you. I had posted a reply, but it looks like something happened to it and I don’t see it here now. Anyway, yes I think you are on the right track. Like options in a form or a pull-down like what you would see in the blog to select different categories. A good example would be if you went to appearance > widgets and added the “A list or dropdown of categories” widget to the sidebar in the website or created a new widget with that. But I want to link to pages in the dropdown, not categories. I hope that helps.

That’s actually what I ended up doing in two links I sent on December 5th. But it looks like something in the theme is preventing you from mousing over or selecting the links in the drop-down. So I was hoping you might know what is causing that.

Hi Jordan,
Yes, that’s what I’m referring to. Here’s the code:

<div class="dropdown">
	<span><strong>Filter By:</strong></span>
    <div class="dropdown-content">
        <p><a href="/blog/arts-culture/">Arts & Culture</a></p>
        <p><a href="/blog/attractions/">Attractions</a></p>
        <p><a href="/blog/eat-drink/">Eat & Drink</a></p>
        <p><a href="/blog/entertainment-music/">Entertainment & Music</a></p>
        <p><a href="/blog/outdoor/">Outdoor</a></p>
        <p><a href="/blog/shopping/">Shopping</a></p>
	</div>
</div>

And here is the CSS:

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

.dropdown strong {
	color: #fff !important;
	text-transform: uppercase;
	background-color: #00548B;
	padding: 15px 30px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
	margin-top: 15px;
    z-index: 1;
}

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