Showing a secondary menu when hovering over the main menu using CSS styling

I am looking to enhance the functionality of my menu system. Currently, I have implemented code that displays sub-menus on click, but now I need assistance in displaying sub-sub-menus when hovering over a sub-menu item. Can anyone provide guidance on how to achieve this?

var ddmenuitem = 0;

function jsddm_open() {
  jsddm_close();
  ddmenuitem = $(this).find('ul.submenu').css('display', 'block');
}

function jsddm_close() {
  if (ddmenuitem) ddmenuitem.css('display', 'none');
}
$(document).ready(function() {
  $('#topnav > ul > li').bind('click', jsddm_open)
  $('#topnav > ul > li > a').click(function(ev) {
    if ($(this).hasClass('current')) {
      ev.preventDefault();
    }


    if ($(this).attr('class') != 'active') {
      $('#topnav ul li a').removeClass('active');
      $(this).addClass('active');
    }
  });
});
#topnav {
  float: left;
  width: 600px;
  height: 30px;
  background: black;
  margin-top: 10px;
  position: relative;
  font-size: 15px;
  margin-left: 30px
}

#topnav ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

#topnav ul li {
  float: left;
  margin: 0;
  padding: 0;
}

#topnav ul li a {
  padding: 5px 15px;
  color: red;
  text-decoration: none;
  display: block;
  font-weight: bold;
}

#topnav ul li a:link {
  color: red;
  text-decoration: none;
}

#topnav ul li a:visited {
  color: #FFF;
  text-decoration: none;
}

#topnav ul li a:hover {
  color: red;
  text-decoration: none;
}

#topnav ul li a.active {
  text-decoration: none;
  color: black;
  background: #e0e0e0;
}

#topnav ul li ul.submenu {
  float: left;
  padding: 4px 0;
  position: absolute;
  left: 0;
  top: 30px;
  display: none;
  background: #e0e0e0;
  color: #00537F;
  width: 600px;
  height: 30px;
}

#topnav ul li ul.submenu a {
  display: inline;
  color: #00537F;
  padding: 4px 8px;
}

#topnav ul.submenu a:hover {
  background-color: black;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="topnav">
  <ul>sds
    <li>
      <a href="#">Admin</a>
    </li>
    <li>
      <a href="#"> MAC </a>
      <ul class="submenu">
        <li><a href="#">Master Data</a></li>
        <li>
          <a href="#">Transaction Data</a>
          <ul>
            <li><a href="#">Company Master</a></li>
            <li><a href="#">Location Master</a></li>
            <li><a href="#">Size Master</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Admin Data</a>
        </li>
      </ul>

    </li>
  </ul>
</div>

Answer №1

Give this code snippet a try without relying on jquery or javascript - you can achieve the desired result using just css. I have made adjustments to fit your specific requirements.

#nav {
  list-style: none inside;
  margin: 0;
  padding: 0;
  text-align: center;
}

#nav li {
  display: block;
  position: relative;
  float: left;
  background: #000000;
}

#nav li a {
  display: block;
  padding: 0;
  text-decoration: none;
  width: 200px;
  line-height: 35px;
  color: #fff;
}

#nav li li a {
  font-size: 80%;
}

#nav li:hover {
  background: #ff0000;
}

#nav ul {
  position: absolute;
  padding: 0;
  left: 0;
  display: none;
}

#nav li:hover ul ul {
  display: none;
}

#nav li:hover ul {
  display: block;
}

#nav li li:hover ul {
  display: block;
  margin-left: 200px;
  margin-top: -35px;
}
<div id="topnav">
  <ul id="nav">
    <li>
      <a href="#">Admin</a>
    </li>
    <li>
      <a href="#"> MAC </a>
      <ul class="submenu">
        <li><a href="#">Master Data</a></li>
        <li>
          <a href="#">Transaction Data &#8658; </a>
          <ul>
            <li><a href="#">Company Master</a></li>
            <li><a href="#">Location Master</a></li>
            <li><a href="#">Size Master</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Admin Data</a>
        </li>
      </ul>

    </li>
  </ul>
</div>

Answer №2

you should definitely give this a try

#menu {
  background: #343434;
  color: #eee;
  height: 35px;
  border-bottom: 4px solid #eeeded
}

#menu ul,
#menu li {
  margin: 0 0;
  padding: 0 0;
  list-style: none
}

#menu ul {
  height: 35px
}

#menu li {
  float: left;
  display: inline;
  position: relative;
  font: bold 12px Arial;
  text-shadow: 0 -1px 0 #000;
  border-right: 1px solid #444;
  border-left: 1px solid #111;
  text-transform: uppercase
}

#menu li:first-child {
  border-left: none
}

#menu a {
  display: block;
  line-height: 35px;
  padding: 0 14px;
  text-decoration: none;
  color: #eee;
}

#menu li:hover > a,
#menu li a:hover {
  background: #111
}

#menu input {
  display: none;
  margin: 0 0;
  padding: 0 0;
  width: 80px;
  height: 35px;
  opacity: 0;
  cursor: pointer
}

#menu label {
  font: bold 30px Arial;
  display: none;
  width: 35px;
  height: 36px;
  line-height: 36px;
  text-align: center
}

#menu label span {
  font-size: 12px;
  position: absolute;
  left: 35px
}

#menu ul.menus {
  height: auto;
  width: 180px;
  background: #111;
  position: absolute;
  z-index: 99;
  display: none;
  border: 0;
}

#menu ul.menus li {
  display: block;
  width: 100%;
  font: 12px Arial;
  text-transform: none;
}

#menu li:hover ul.menus {
  display: block
}

#menu a.home {
  background: #c00;
}

#menu a.prett {
  padding: 0 27px 0 14px
}

#menu a.prett::after {
  content: "";
  width: 0;
  height: 0;
  border-width: 6px 5px;
  border-style: solid;
  border-color: #eee transparent transparent transparent;
  position: absolute;
  top: 15px;
  right: 9px
}

#menu ul.menus a:hover {
  background: #333;
}

#menu ul.menus .submenu {
  display: none;
  position: absolute;
  left: 180px;
  background: #111;
  top: 0;
  width: 180px;
}

#menu ul.menus .submenu li {
  background: #111;
}

#menu ul.menus .has-submenu:hover .submenu {
  display: block;
}
<nav>
  <ul id='menu'>
    <li><a class='home' href='/'>Home</a></li>
    <li><a class='prett' href='#' title='Menu'>Menu</a>
      <ul class='menus'>
        <li class='has-submenu'><a class='prett' href='Dropdown 1' title='Dropdown 1'>Dropdown 1 + Sub Menu</a>
          <ul class='submenu'>
            <li><a href="#" title="Sub Menu">Sub Menu</a></li>
            <li><a href="#" title="Sub Menu">Sub Menu 2</a></li>
            <li><a href="#" title="Sub Menu">Sub Menu 3</a></li>
          </ul>
        </li>
        <li><a href='#' title='Dropdown 2'>Dropdown 2</a></li>
        <li><a href='#' title='Dropdown 3'>Dropdown 3</a></li>
      </ul>
    </li>
  </ul>
</nav>

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

Having trouble utilizing Selenium to choose the Date range picker through its XPATH

Trying to extract information from by scraping the data. The goal is to automate the process of changing the date range through a script. However, encountering difficulty in selecting the date range picker using the XPATH provided below. //*[@id="bod ...

Ensuring the footer stays at the bottom of the page using Tailwindcss and ReactJS

I've read numerous articles and posts about achieving this, but none of the methods seem to be effective for me. My goal is to have the footer stick to the bottom of the page when viewed on mobile devices. It displays correctly on larger screens, but ...

Angular 2's innovative approach to implementing a sticky footer concept

Is there a way to make my footer sticky without being fixed? I attempted using the CSS negative margin trick, but it did not work as expected. In the provided Plunker code, I tried to replicate the issue in my Angular 2 app. The goal is for the footer to s ...

Guide to executing a batch file using electron

I've been struggling all morning to find a solution. I've gone through several tutorials, but I still can't wrap my head around how this should work. In my Electron app, there is a button that, when clicked, should execute a batch file (hpm ...

I'm having trouble with my delete function. How can I fix it?

When I try to use the delete function in Python to remove a user's post, it doesn't actually delete the post as expected. Instead, it just redirects the user back to the homepage without removing the post. Clicking the "delete link" should make t ...

Tips for aligning objects within a bootstrap column so that they all have the same starting point on the X axis

To recreate the issue I am facing, I created a basic HTML structure with 2 bootstrap columns. My aim is to have multiple <p> elements in the second column, stacked one below the other. However, the problem arises when these <p> tags contain tex ...

Update destination upon click

I'm new to JavaScript and attempting to modify a redirect link using checkboxes that will modify the URL, followed by a button that will use the updated URL. However, I'm facing some challenges with my code and could use some guidance. Here is t ...

Positioning an individual element to the right side of the navigation bar in Bootstrap 5

I've been attempting to shift a single nav-item to the right side of the navbar, but I'm having trouble. My navbar is fairly basic, without a search tool or dropdown menu, as seen below: <nav class="navbar navbar-expand-lg bg-body-tertiar ...

Postpone the execution of the toggleClass function

I have a tab that, when clicked, fades in to reveal content loaded with AJAX. However, the content loads immediately upon clicking the button. I attempted to use toggleClass with delay, but it was unsuccessful. How can I effectively delay the loading of t ...

Is there a way for me to adjust my navbar menu items so they are aligned to the right

Currently, I'm designing a navbar and I'm facing an issue with aligning a specific part to the right side: Here is the current setup I have: Moreover, the collapsible navbar feature seems to be malfunctioning. When I try to shrink the screen, t ...

Real-time preview of a text field in JavaScript

I'm attempting to create a similar piece of code like the one at the bottom of this page for leaving comments. I have the basic code, but the result doesn't display new lines (or HTML, although that's not essential). I have the function belo ...

Styling buttons with different colors using React onClick event.getSelectedItem() method

I am having an issue with adding a border when the class is set to "transportation active" in my React code. When I click on one of the icons, all of them become active instead of just the clicked one. This behavior is not what I want, as I only want the ...

Data is not being stored in Parse

I am currently facing a challenge while working with Parse for Javascript: When users sign up, along with their username and password, I also need to save their first and last names in Parse. However, at the moment, only the username and password are bein ...

The Videojs controls are unresponsive to clicks

Having a strange issue with videojs. I've been attempting to load videojs in the same way as outlined in the documentation, using a dynamic video tag. videojs(document.getElementById('myVideo'), { "controls": true, "autoplay": false, "prelo ...

Can the ::before selector be used in HTML emails?

Hey there, I have a question that might sound silly but I'm having trouble finding an answer online. My issue is with styling the bullet point before a list item in an HTML email. All I want to do is change the bullet point to a square and give it a ...

Overlap one element entirely with another

Currently, I am working on a way for an element called overlayElement to completely cover another element known as originalElement. The overlayElement is an iFrame, but that detail may not be significant in this scenario. My goal is to ensure that the over ...

Unveiling the search bar as it expands horizontally from the center, causing the submit button to slide to adjust

Wishes and Aspirations My goal is to design an .input-group with one input[type=text] and one button[type=button]. Initially, the text box should be hidden, leaving only the button visible at the center of the page. Upon activation, the text box should ...

Removing the hash from the URL

My website built with Bootstrap consists of two main pages: index.html impressum.html I have successfully implemented page jumps within the index.html page and would like to access these page jumps from the impressum.html page as well. The functionalit ...

Where can I find guidance on utilizing CSS keyboards with styled-components?

image one image two 1-Is there a way to apply colored text to styled-components similar to what is shown in the tutorial video on the left in the second image? I really dislike this red text :( 2-Can styled-components provide CSS support like in the secon ...

Disabling the scaling feature in IE11's WebBrowser control: A step-by

After investing 48 hours into resolving this particular issue, I am reaching out to the knowledgeable StackoverFlowers community for assistance. My current project involves developing an application for large 27-inch multi-touch screens using C# 4.5. Withi ...