Menu within a menu, accessed by hovering

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                <a href="index.html" class="navbar-brand display-4">NintendoWorlds</a>
                <button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="menu">
                    <ul class="navbar-nav">
                        <li class="nav-item dropdown">
                                <a href="#" class="nav-link" data-toggle="dropdown">Games</a>
                                <ul class="dropdown-menu" >
                                    <li><a href="#" class="dropdown-item">Latest</a></li>
                                    <li><a href="#" class="dropdown-item">Best Selling</a></li>
                                    <li><a href="#" class="dropdown-item">Our Pick</a></li>
                                </ul>
                        </li>
@media all and (min-width:992px){
    .navbar .nav-item .dropdown-menu{display:none;}
    .navbar .nav-item:hover .dropdown-menu{display:block;}
    .navbar .nav-item .dropdown-menu{margin-top:0;}
}
ul.dropdown-menu a.dropdown-item{
    padding: 14px;
    margin: 8px;
}

I am looking to make the menu appear when hovering over the "Our Pick" option in this navigation bar. Can someone help me achieve this effect?

htmlcssbootstrap-4

Answer №1

You have the option to include a nested ul element within your selected li and display the sub menu on the right side of the selected item.

This can be achieved using the :hover pseudo-class. The sub menu will disappear when the mouse pointer is moved away from the selected item.

Demo in Action

@media all and (min-width:992px) {
  .navbar .nav-item .dropdown-menu {
    display: none;
  }
  .navbar .nav-item:hover .dropdown-menu {
    display: block;
  }
  .navbar .nav-item .dropdown-menu {
    margin-top: 0;
  }
}

ul.dropdown-menu a.dropdown-item {
  padding: 14px;
  margin: 8px;
}

.our-pick {
  display: none;
  list-style-type: none;
}

.sub-menu:hover .our-pick {
  display: block;
}
<!-- Incorporating compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library inclusion -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS integration -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Implementation of Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a href="index.html" class="navbar-brand display-4">NintendoWorlds</a>
  <button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="menu">
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a href="#" class="nav-link" data-toggle="dropdown">Games</a>
        <ul class="dropdown-menu">
          <li><a href="#" class="dropdown-item">Latest</a></li>
          <li><a href="#" class="dropdown-item">Best Selling</a></li>
          <li class="sub-menu"><a href="#" class="dropdown-item">Our Pick</a>
            <ul class="our-pick">
              <li><a href="#" class="dropdown-item">Our Pick 1</a></li>
              <li><a href="#" class="dropdown-item">Our Pick 2</a></li>
              <li><a href="#" class="dropdown-item">Our Pick 3</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Answer №2

If you place the menu directly after the link like this:

<ul class="dropdown-menu" >
    <li><a href="#" class="dropdown-item">Latest</a></li>
    <li><a href="#" class="dropdown-item">Best Selling</a></li>
    <li>
        <a href="#" class="dropdown-item">Our Pick</a>
        <ul class = "menu">
         // menu
        </ul>
    </li>
</ul>

In CSS, you can utilize the + selector:

.dropdown-item:hover + .menu { display:block; }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Uncover the HTML tag associated with specific text on a webpage with the help of selenium

<div class="searchSummary floatL"> <span>18</span> results for "gloves" </div> Can someone assist me in using Selenium to extract the 'span' tag containing '18'? I am trying to specifically retrieve the 'sp ...

cssseleniumselenium-rc

Having difficulty accessing object property using Chunk Template Engine

I am working on a project where I have created a list of objects and now need to retrieve the object name from a template using the Chunk Template Engine. The object list has been initialized as follows: html.set("items", new Item[]{new Item("Item 1", 2) ...

javaandroidhtmlstringchunk-templates

Inquiring about the best method to determine the intersection point between two lines in Draw i.o

Can someone please explain how to find the coordinate point where two lines intersect in draw i.o? I am looking for a Javascript function to solve this issue and get the coordinate of the point only. For example: ...

javascripthtmlcssdraw

Instructions for implementing onclick functionality on an iframe element

Is it possible to use the onclick event in an iframe tag to call a JavaScript function? I have integrated a Facebook like button on my website using an iframe code. When a user clicks on the like button, I would like them to be redirected to a 'thank ...

javascripthtml

Revolutionizing the Industry: Discover the Power of Dynamic Models, Stores, and Views for

As a newcomer to EXT JS, I am exploring the use of MVC in my projects. Consider a scenario where I have a web service with a flexible data model. I would like to dynamically create models, stores, and components based on the data from these stores. Let&a ...

javascriptjqueryhtmlcssextjs

Replacing Material-UI dialog fonts

I have created a unique User Confirmation Dialog using the Material UI Dialog component, similar to the example provided here While working on customizing the dialog, I encountered an issue with changing the font. Although I was able to change the color a ...

cssreactjsmaterial-ui

What is the best method for utilizing the CSS :target selector in order to generate a versatile modal box?

I am looking for a way to display my vast collection of proverbs from an endangered language without overcrowding the page. I have implemented a modal box solution using CSS :target selector, which expands a hidden div element when clicked on. However, I n ...

htmlcss

Do we actually need all of these DIVs?

Do you ever find yourself creating a div purely to house another element? Take for example, when designing a menu. You may create a div with specific styling and then place an unordered list within it. Alternatively, you could apply all the styling direc ...

csshtml

Map through the index and render the component while closing the tag

I have a piece of code that I'm working on. How can I dynamically add a tag based on the index? My goal is to create a grid with 3 columns. <div> {items.map((row, i) => ( {i % 3 === 0 && <div className={'grid-cont ...

htmlreactjs

Show image details on hover?

I have six images displayed full width using a flex grid. I would like the image information (along with a visit button) to appear on hover, and the brightness of the image should decrease. I am struggling to position the information in the center of the i ...

htmlcss

HTML checkbox URL

Can you design an HTML checkbox form that generates a URL format like this: ?cat=cars+tree Currently, with the following code: <form name="input" action="/" method="post" > <br />Select Categories: <br /> <input type="checkbox" name ...

htmlurlcheckbox

Ways to hide the value from being shown

I have integrated jscolor (from jscolor) to allow users to pick a color with an input field. However, I am facing issues in styling it as I'm unable to remove the hex value of the selected color and couldn't find any relevant documentation on av ...

javascripthtmlcsscolor-pickerjscolor

I'm just beginning to delve into Python and have a question about Beautiful Soup

Recently, I attempted to extract the web crawling element from Google Drive. Specifically, I was looking for the file's modification date. To find the necessary elements, I used F12 and discovered the following selector: body > div.ndfHFb-c4Y ...

htmlbeautifulsouppython-requests

CSS Accordion Collapse Widget

I currently have a CSS collapse accordion created using pure CSS, and it is functioning perfectly. However, I am facing one issue: When the user clicks on any label - Label One, Label Two, or Label Three, they are unable to close it by clicking on the sam ...

htmlcssaccordion

Enable the set body to have certain sections that are scrollable by setting overflow=hidden

I am currently working on a website that features the following structure: <body> <section></section> <section></section> ... </body> To prevent scroll bars on the body, I have set the CSS property body{overflow:hidden ...

cssscrolloverflow

Enhance Your Website with HTML5 Video Transition Effects

Is it possible to recreate video transition effects using HTML5 similar to the ones shown in this example: Can this be achieved across all major browsers, including Safari, Firefox, Chrome, and IE9? ...

jquerycsshtmleffectstransition

What steps can be taken to design a unique CSS pop-up that triggers upon page load, limited to one appearance per visitor every week

I have the following code snippet that allows me to display a pop-up either by clicking on the link or hovering over it. I am looking to modify it so that the pop-up opens when the page loads and restrict it to open only once per visitor per week. As some ...

javascripthtmlcssjquery

Incorporating .json files into an HTML template with the help of an HTML form designed for selecting a particular

I am faced with a collection of various .json files that I wish to specify by name on an HTML page (local) form, enabling me to load this data onto a table. This is how my HTML form appears: <form> File: <input type="text" Id="file_name"&g ...

javascriptphpjqueryhtmljson

Switch up the placement of articles, going back and forth between left

On the page, I want to display articles with alternating positions - one on the left, the next on the right. In this example, all the articles are currently being displayed twice, both on the left and the right side. How can I ensure that only one instanc ...

htmlcss

Can responsive images be utilized with a DIV's background-image property?

For my website, I want to incorporate a variety of Thumbnails that are retrieved from a database and displayed in different sizes within a Masonry grid. Typically, I would use background-image:url(image.jpg); background-size: 100% 100%:, but I am aiming t ...

htmlcssimageresponsive-design