Dropdown menu disappears

Report · Nov 18, 2020

The following style and code creates a dropdown menu. I place the cursor over the hamburger and the menu opens, but when I move the cursor to pick a link the menu disappears. I've read about this problem, but I think that I have it right, but obviously I don't. Can someone help me fix this?

<style>

a.dropdown:link {

color: #000000;

text-decoration: underline;

}

a.dropdown:visited {

color: #000000;

text-decoration: underline;

}

a.dropdown:hover {

color: #0000DD;

text-decoration: underline;

}

a.dropdown:active {

color: #000000;

text-decoration: underline;

}

.dropdown {

position: relative;

display: inline;

text-align: left;

}

.dropdown-content {

display: none;

position: absolute;

font-size: 14px;

font-weight: normal;

background-color: #DCDCDC;

min-width: 225px;

padding-left: 10px;

z-index: 1;

}

.dropdown:hover .dropdown-content {

display: block;

}

#dropdown_wrapper {

position: relative;

display: inline-block;

}

</style>

<body>

<div class="dropdown"> ☰

</div>

</body>

Report · Nov 18, 2020

I realize you may want to know the contents of #wrapper is. It's in the CSS and contains:

#wrapper {
width: 756px;
height: auto;
position: relative;
text-align: center;
margin: auto auto;
margin-bottom: 5px;
}

Report · Nov 19, 2020

This is a flawed concept. I've never seen hover used on a small hamburger menu before. Its usually applied on a conventional navigation menu where there is more room for the hover to work properly and then only on desktop devices, hover doesnt work on mobile devices.

Because you have assigned position: absolute; to '.dropdown-content' <p> it takes it out of the normal code flow so the '.dropdown' <div> is NOT wrapped around the '.dropdown-content' <p> like you might think it is. Your problem is you have space between the hamburger icon <div> (.dropdown) and the navigation <p> ('.dropdown-content'), some caused by the default margin on the <p> tag and any small amount of vertical space means when the mouse is moved outside of the hamburger <div> the '.dropdown-content' <p> will immediately close itself before you have chance to get your mouse over it, unless you are very fast.

You can adjust your code to as shown below BUT as I say its a flawed concept - as soon as you move left or right horizontally out of the hamburger <div> the menu closes - there's not enough what we call 'real-estate' for any margin of error from the users perspective, they have to move the mouse directly down in a careful vertical motion.

.dropdown {
position: relative;
display: inline;
text-align: left;
}
.dropdown-content {
position: absolute;
display: none;
font-size: 14px;
font-weight: normal;
background-color: #DCDCDC;
min-width: 225px;
z-index: 1;
margin: -2px 0 0 0;
padding: 0 0 0 10px;
}

You also should NOT be using a <p> tag to display a list of menu items, but that's for another day.

Report · Nov 19, 2020

Why are you doing this? I thought you were using Bootstrap. This is pure junk.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Nov 19, 2020

I hadn't programed html in a long time. I was using Dreamweaver when it was part of Macromedia. One used mouseover commands to do dropdown menus. Now everything is different. I've been trying to learn how to do this using current methods.

I read that I should use "dropdown" class to create my menus. I also read, and maybe misunderstood, that:

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is an intentional design decision.

So I thought that I was using Bootstrap. My mistake if I errored. But I know that my code did not work until I linked to Bootstrap.

After reading a reply to something else I realized that I probably should not be using a hover-activated dropdown menu. So today I've changed it to a clickable dropdown menu. I like it better. I only have one issue remaining. Maybe you would be so kind as to help me.

I do not use a button, but rather a hamburger icon. But the code that I have been following assumes that you are using a button. That's critical because it includes the following script to close the dropdown when one clicks outside of it.

Can this be changed to work with an icon instead of a button? The icon is simply a png. Or maybe you have a better suggestion.

I very much appreciate any help you can give me.

FYI, I'll be 73 in 6 weeks. I work with a very small nonprofit. I do this programing myself, rather than hiring someone not to save a few dollars, but rather to keep my mind active. But obviously I need help.

My main interest right now is re-writing the html that displays the maps and descriptions for more than 200 backcountry ski tours. Originally these were published in my books, but eventually made them available online for free. The old code used flash and that obviously needs to be replaced. Also, now we have all sizes of devices that must be accommodated. I've come up with a very, very simple design that will work on even phones. So that's what I'm doing. See www.backcountryskitours.com.

Report · Nov 19, 2020

Marcus,

You just need to add the class name 'dropbtn' to your hamburger png image like below:

I've simplified the javscript (see below) as the script you are currently using is intended for applying multiple events to each element with the class name of 'dropdown-content' - you only have one drop down - presumably being evoked when the hamburger icon is clicked.

Make sure the <div> you want to show has the class name of 'dropdown-content'

<div class="dropdown-content">
Links go here
</div>

And use the css below to initially hide the 'dropdown-content' div and then show it when the hamburger is clicked. Click the hamburger again and the 'dropdown-content' <div> will be hidden.

.dropdown-content {
display: none;
}
.show {
display: block;
}

Usually the hamburger icon is replaced with a cross (close) icon on clicking so the user has something visual to guide them.

Report · Nov 19, 2020

The navigation on your old site is too complicated for modern mobile devices. You'll need to simplify it to make it more user friendly. I suggest putting links to major points of interest inside your main content area so people can find them easily. This is a basic 1, 2, 3 column Bootstrap starter page.

Desktop

Here's the code I used. 99% Bootstrap. No other custom styles required.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4.5 Starter Page </title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--latest Bootstrap on CDN-->
<link rel="stylesheet" href="
https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!--Font Awesome Icons-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
/**a little bit of custom styles**/
body {min-height: 100vh;
padding-top: 10vh;
background: url( https://placeimg.com/1000/900/nature?t=1531616140833) no-repeat center center fixed;
background-size: cover;
}
.flex-grow { flex: 1; }

/**Font Awesome Icons**/
i.fa {color: rgba(213,213,213,0.60);}
i.fa:hover {color:rgba(213,213,213,1.00);}
</style>
</head>
<body class="d-flex flex-column">
<!--BEGIN RESPONSIVE NAVBAR-->
<nav class="navbar navbar-dark navbar-expand-lg bg-info justify-content-center fixed-top"> <a class="navbar-brand" href="#"><img class="img-fluid rounded"  src="https://dummyimage.com/300x65" alt="Your Logo" title="Company Logo or Brand"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"><a class="nav-link" href="#">Menu2</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu3</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu4</a></li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="https://example.com" id="mydropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="mydropdown"> <a class="dropdown-item" href="#">Something</a> <a class="dropdown-item" href="#">Another thing</a> <a class="dropdown-item" href="#">One more thing</a> </div>
</li>
</ul>
</div>
</nav>

<!--BEGIN MAIN CONTENT-->
<main class="container flex-grow">
<div class="row">
<div class="jumbotron mx-auto">
<h1>XYZ Website</h1>
<h2>Some Pithy Slogan</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi ipsa facilis voluptatum non perferendis alias veniam nemo accusamus placeat obcaecati molestiae, maiores, dignissimos exercitationem, voluptatem deserunt aperiam sint. Earum, fuga.</p>
</div>
</div>

<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 bg-info pt-3">

<div class="col mb-4">
<div class="card h-100"> <img src="https://dummyimage.com/250x125" class="card-img-top rounded-circle" alt="placeholder image">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a card with supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-center">
<a href="#" class="btn btn-lg btn-dark">More Info +</a>
</div>
</div>
</div>

<div class="col mb-4">
<div class="card h-100"> <img src="https://dummyimage.com/250x125" class="card-img-top rounded-circle" alt="placeholder image">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a card with supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-center">
<a href="#" class="btn btn-lg btn-dark">More Info +</a>
</div>
</div>
</div>

<div class="col mb-4">
<div class="card h-100"> <img src="https://dummyimage.com/250x125" class="card-img-top rounded-circle" alt="placeholder image">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a card with supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-center">
<a href="#" class="btn btn-lg btn-dark">More Info +</a>
</div>
</div>
</div>

<div class="col mb-4">
<div class="card h-100"> <img src="https://dummyimage.com/250x125" class="card-img-top rounded-circle" alt="placeholder image">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a card with supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-center">
<a href="#" class="btn btn-lg btn-dark">More Info +</a>
</div>
</div>
</div>

<div class="col mb-4">
<div class="card h-100"> <img src="https://dummyimage.com/250x125" class="card-img-top rounded-circle" alt="placeholder image">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a smaller card.</p>
</div>
<div class="card-footer text-center">
<a href="#" class="btn btn-lg btn-dark">More Info +</a>
</div>
</div>
</div>

<div class="col mb-4">
<div class="card h-100"> <img src="https://dummyimage.com/250x125" class="card-img-top rounded-circle" alt="placeholder image">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a card with a little text...</p>
</div>
<div class="card-footer text-center">
<a href="#" class="btn btn-lg btn-dark">More Info +</a>
</div>
</div>
</div>

</div>
</main>
<!--BEGIN FOOTER-->
<footer class="bg-info text-white mt-4">
<div class="container-fluid py-3">
<div class="row text-center">
<div class="col-md-4">
<h5>Footer Column 1</h5>
</div>
<div class="col-md-4">
<h5>Footer Column 2</h5>
</div>
<div class="col-md-4">
<!--Font Awesome Icons-->
<p><a href="#"><i class="fa fa-3x fa-twitter-square" aria-hidden="true"></i></a> &nbsp;
<a href="#"><i class="fa fa-3x fa-facebook-square" aria-hidden="true"></i></a> &nbsp;
<a href="#"><i class="fa fa-3x fa-youtube-square" aria-hidden="true"></i></a> &nbsp;
<a href="#"><i class="fa fa-3x fa-vimeo-square" aria-hidden="true"></i></a>
</p>
</div>
</div>
<div class="row">
<div class="col-md-8"> <small>Footer remains at bottom on short pages.</small></div>
<div class="col-md-4 text-right small align-self-end"><small>©2020 XYZ Company, all rights reserved.</small></div>
</div>
</div>
</footer>

<!--First jQuery then Popper then Bootstrap--> 
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap 4 tutorials:

https://www.w3schools.com/bootstrap4/

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

Dropdown menu disappears