Skip to main content
Soundsbetteroutside
Soundsbetteroutside
Participant
August 17, 2023
Question

Dropdown Menu doesnt work

  • August 17, 2023
  • 2 replies
  • 388 views

Good day Community,

 

I have not too much experience in Dreamweaver and my question is a very simple one:

 

I would like to create a dropdown menu from a nav bar, which is only displayed when I hover above the given text.

I have searched for hours now and cant seem to find a solution.

 

I know my request is a pretty basic one, nevertheless I would appreciate your time and answer with my question.

 

Thank you very much for your time.

And I wish you all a good day,

 

In the following you will find my CSS and HTML codes...

 

The CSS:

 

@charset "UTF-8";
/* CSS Document */
 
 
 .hidden {
display: none;
}
 
HTML:
 
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link href="css.css">
<title>NAV</title>
</head>
 
<body>
 
<div>
<ul>
<li>1</li>
<li>2</li>
<ul class:"hidden">
 
<li >2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
<li>3</li>
</ul>
</div>
</body>
</html>

 

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    August 17, 2023

    Forget this notion about HOVER events.  It's not user-friendly.  How are people on touch screen devices supposed to interact with your drop-down menus when they don't have a MOUSE?

     

    A site without usable menus is a waste of everyone's time.  You need to set-up navigation that ALL users on ALL devices can access.   I use Bootstrap because it saves a lot of production time and it works well on all devices.  See working example below.

     

     

    CODE:

    <!doctype html>
<html lang="en">
<head>
<title>Bootstrap 5.1.3 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Minified Bootstrap 5 CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!--Bootstrap Icons-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">

<!--latest minified Bootstrap JS bundle-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">

<!--My Styles-->
<style>
.navbar a {font-size: 1.35rem}
</style>
</head>
<body class="d-flex flex-column min-vh-100">
<!--Begin Navbar-->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img class="rounded-circle" src="https://dummyimage.com/125x125&text=Brand/Logo" alt="Brand/logo"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-house"></i> Home</a>
</li>
<!--Begin Dropmenu-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"><i class="bi bi-gear"></i> Dropmenu</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Link</a>
</li>
<li>
<a class="dropdown-item" href="#">Another link</a>
</li>
<li>
<a class="dropdown-item" href="#">A third link</a>
</li>
</ul>
</li>
<!--end dropmenu-->
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-film"></i> Video</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-instagram"></i> Instagram</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-facebook"></i> Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-envelope"></i> Contact</a>
</li>
</ul>
</div>
</div>
</nav><!--/Navbar-->
</body>
</html>

     

    Hope that helps.

     

    Nancy O'Shea— Product User & Community Expert
      Soundsbetteroutside
      SoundsbetteroutsideAuthor
      Participant
      August 20, 2023

      Thank you very much for your time and effort!

      This looks great and I will spend some time this week with bootstrap.

      It definately looks exciting!!

       

      Have a great Sunday evenening!

      O
      osgood_
      Legend
      August 17, 2023
      quote

       

      I would like to create a dropdown menu from a nav bar, which is only displayed when I hover above the given text.

       

      By @Soundsbetteroutside

       

      Hover is not much use as it wont work on mobile devices:

       

       

      <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NAV</title>
<style>
.hidden {
display: none;
}
li {
cursor: pointer;
}
li:hover .hidden {
display: block;

}
</style>
</head>

<body>

<div>
<ul>
<li>Link 1</li>
<li>Link 2
<ul class="hidden">
<li >2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li>Link 3
<ul class="hidden">
<li >3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

       

      Soundsbetteroutside
      SoundsbetteroutsideAuthor
      Participant
      August 20, 2023

      GREAT!

      It all works now! 

       

      I will rethink that hover thing and work on a website that can be used by any device.

      Thank you very, very much for making it work!

       

      Have a good start in the week.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices