Show the submenu at all times

I am looking to customize the code in order to always display the submenu of the active main menu item. How can I adjust the following code to meet these requirements?

p,
ul,
li,
div,
nav {
  padding: 0;
  margin: 0;
}
body {
  font-family: Calibri;
}
#menu {
  overflow: auto;
  position: relative;
  z-index: 2;
}
.parent-menu {
  background-color: #0c8fff;
  min-width: 200px;
  float: left;
}
#menu ul {
  list-style-type: none;
}
#menu ul li a {
  padding: 10px 15px;
  display: block;
  color: #fff;
  text-decoration: none;
}
#menu ul li a:hover {
  background-color: #007ee9;
}
#menu ul li:hover > ul {
  left: 200px;
}
#menu ul li > ul {
  position: absolute;
  background-color: #333;
  top: 0;
  left: -200px;
  min-width: 200px;
  z-index: -1;
  height: 100%;
}
#menu ul li > ul li a:hover {
  background-color: #2e2e2e;
}
<nav id="menu">

  <ul class="parent-menu">

    <li><a href="#">Home & Kitchen</a>

      <ul>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

      </ul>

    </li>

    <li><a href="#">Electronics</a>

      <ul>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

      </ul>
    </li>

    <li><a href="#">Clothing</a>

      <ul>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

      </ul>
    </li>

    <li><a href="#">Cars & Motorbikes</a>

      <ul>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

      </ul>

    </li>

    <li><a href="#">Books</a>

      <ul>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

        <li><a href="#">item</a>
        </li>

      </ul>

    </li>

    <li><a href="#">Support</a>

      <ul>

        <li><a href="#">Contact Us</a>
        </li>

        <li><a href="#">Forum</a>
        </li>

        <li><a href="#">Deliveries</a>
        </li>

        <li><a href="#">T&C</a>
        </li>

      </ul>

    </li>

  </ul>

</nav>

htmlcss

Answer №1

Here is a step-by-step guide to customize your menu:

  1. Add the .active class to emulate the :hover functionality.
  2. Assign the class="active" to the specific <li> element you want to remain visible.

Books Always Stay Active

Snippet of CSS code:

p,
ul,
li,
div,
nav {
  padding: 0;
  margin: 0;
}
body {
  font-family: Calibri;
}
#menu {
  overflow: auto;
  position: relative;
  z-index: 2;
}
.parent-menu {
  background-color: #0c8fff;
  min-width: 200px;
  float: left;
}
#menu ul {
  list-style-type: none;
}
#menu ul li a {
  padding: 10px 15px;
  display: block;
  color: #fff;
  text-decoration: none;
}
#menu ul li.active a,
#menu ul li a:hover {
  background-color: #007ee9;
}
#menu ul li.active > ul,
#menu ul li:hover > ul {
  left: 200px;
}
#menu ul li > ul {
  position: absolute;
  background-color: #333;
  top: 0;
  left: -200px;
  min-width: 200px;
  z-index: -1;
  height: 100%;
}
#menu ul li > ul li a:hover {
  background-color: #2e2e2e;
}

Cars Are also Active Here

Another snippet of CSS code:

p,
ul,
li,
div,
nav {
  padding: 0;
  margin: 0;
}
body {
  font-family: Calibri;
}
#menu {
  overflow: auto;
  position: relative;
  z-index: 2;
}
.parent-menu {
  background-color: #0c8fff;
  min-width: 200px;
  float: left;
}
#menu ul {
  list-style-type: none;
}
#menu ul li a {
  padding: 10px 15px;
  display: block;
  color: #fff;
  text-decoration: none;
}
#menu ul li.active a,
#menu ul li a:hover {
  background-color: #007ee9;
}
#menu ul li.active > ul,
#menu ul li:hover > ul {
  left: 200px;
}
#menu ul li > ul {
  position: absolute;
  background-color: #333;
  top: 0;

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

To add an image, simply click on the designated area instead of using the traditional file input button. The image will then be displayed in the specified image container and resized on the client-side

Objective: I am aiming to enhance the image upload functionality by enabling users to click on an <img> element to initiate the file selection process, instead of using the traditional <input type="file"> button. There will be three placeholde ...

jquerycssimage

Assigning input array values with jQuery

I'm currently working on incorporating HTML input arrays. <input type="text" name="firstName[]" id="firstName[]"> I also need to populate another form that looks like this: <form id="tempForm"> <input type="text" name="userName" i ...

javascriptjqueryhtml

Utilize JavaScript or jQuery to align a list item center on a horizontal scrolling navigation bar

Currently, I am utilizing bootstrap 4.6 for a webpage, and while the default navbar doesn't meet my requirements for mobile navigation, I am attempting to customize it to function like MODE_SCROLLABLE in Android. Therefore, I need it to activate the l ...

javascripthtmljquerycssbootstrap-4

What is the best method for uploading photos via ajax in a django application?

Currently, I am in the process of creating a function that allows users to update their profiles by changing their email addresses, names, and profile pictures. While I have been successful in updating emails and names, I have encountered difficulties in u ...

jqueryhtmlajaxdjango

Show picture depending on the button pressed

Is it possible to only display the selected image? I have a set of buttons that allow customers to customize an image. For example, the user selects a shape like a circle, which is then displayed. The next step involves selecting a pattern to display insi ...

javascriptjquerycsshtml

Utilizing Bootstrap, the layout structure consists of 4 columns for desktop, 3 columns for small laptops, 2 columns for tablets, and

I need assistance with setting up responsive columns in my HTML code using Bootstrap. Specifically, I want 4 columns per row on desktop, 3 columns per row on tablet, and 2 columns per row on mobile devices. Despite searching on Stack Overflow, I couldn&apo ...

htmlcssbootstrap-5

Retrieve outcome from successful AJAX post and update HTML using globalEval

I have a function in JQuery that asynchronously posts data function post_data_async_globalEval(post_url, post_data, globaleval) { $.ajax({ type: 'POST', url: post_url, data: post_data, dataType: 'html', async: true, ...

javascriptjqueryhtmlajax

Generate a consolidated dataframe by parsing through various HTML files

I have a collection of 23 HTML files that all contain data in the same tabular format. I am looking to combine this data into one large dataframe for further analysis. Below is the code snippet I am using: import glob import pandas as pd all_records = g ...

pythonhtmlarrayslist

What is preventing the inner box from stretching to match the width of the outer box?

This question isn't really related to academics, it's more of a work-related inquiry that I've simplified into a basic question. I placed one div inside another expecting the inner div to inherit the width of the outer div. Initially, this ...

htmlcss

Activate dropdown menu link when tapped twice on tablet devices

I am trying to implement a dropdown navigation link feature on tablets where the child menu div drops down only on the second click. This functionality already works on iPads, but on Android and Windows tablets, the link is triggered at the same time as th ...

javascriptandroidjqueryhtmlcss

Using the 'get' command to read a text file locally in JavaScript

I am struggling to use the get command in JavaScript to open a text file and populate a div tag in my HTML. The text file is located in the same folder as my html file, but I can't seem to make any progress with this task. When I click on the button I ...

javascriptjqueryhtmlcss

Tips on converting buttons from bootstrap3 to bootstrap4

For Bootstrap 3, I have been using this button style which is typically used to update or modify a row in a table. Now that I want to switch to Bootstrap 4, I am having trouble getting this button to display correctly. I understand that things have change ...

htmlbootstrap-4

When using an `if` statement in CSS to determine if the value of `left` is

Is there a way to trigger an event only when the object reaches a specific percentage of its left position? I am trying to achieve this using jQuery with the .css() method. Here is what I have so far: HTML: <div id="midDiv"><img ..../></di ...

javascriptjqueryhtml

Issues with input group visibility on smaller devices are being observed

While attempting to create a shopping cart page inspired by this design https://i.sstatic.net/VjvhQ.png, everything seemed fine on a regular screen size https://i.sstatic.net/0mvEx.png. However, when viewed on smaller screens like the Iphone SE, the quanti ...

htmlionic-frameworkbootstrap-5

Make the inner div fill the entire width within a container of a fixed width

On my blog page, I am currently using the col-md-8 class. Inside this column, my content is displayed. However, I want to stretch a particular div to occupy the full width within the col-md-8. Here is the section of my code: https://i.stack.imgur.com/uPS5 ...

htmlcsstwitter-bootstrapbootstrap-4

The responsiveness of the container in Bootstrap 4 is not optimized for mobile devices

In one of my school projects, I decided to incorporate Bootstrap 4. The layout I created consists of a carousel positioned alongside some text. However, the issue lies in the fact that the carousel on the right is responsive across various device widths ex ...

htmlcssbootstrap-4

Excessive background image size causing issues on iPad 4

Upon launching the website on an iPad4 in portrait mode, I noticed that the background image is too high, matching the height of the section set to 100vh. Is there a way to adjust the background image to be shorter? Here is the link to the website for re ...

cssipadbackground

Discover the secrets to obtaining live website information using Google Script!

I am looking to retrieve the exchange rate data from a specific website. My understanding is that the website is dynamic (I'm still new to javascript) and the data is not easily accessible. Can anyone guide me on how to extract the exchange rates? For ...

javascripthtmlgoogle-apps-script

Guide to verify the user selection within a select form

Here is a form with a select field: <form method="post" name="posting_txt" onSubmit="return blank_post_check();" id="post_txt"> <select style="background: transparent; border-bottom:5px;" name="subname" class="required"> ...

javascriptjqueryhtmlajaxjquery-plugins

Modifying the location of an element in an array with jQuery

Using jQuery and JavaScript var movableItems = new Array(); movableItems.push($('#cloud1')); movableItems.push($('#comment1')); if(leftPressed == true){ for(var i = 0; i < movableItems ...

javascriptjqueryhtmlcssdhtml