Struggling to make the CSS menu implement dropdown submenus and become mobile responsive

After spending a week trying to make my beautiful CSS menu responsive and add drop down sub-menus with unlimited depth, I've hit a roadblock. I can't seem to figure out how to achieve both functionalities simultaneously. Is there anyone out there who can help me navigate through this challenge and make my menu responsive and dropdown?

HTML

<header id="header" class="page-header js-header" data-selenium="page-header">
  <div class="main-nav">
<div class="nav" id="main_menu">
  <ul class="topnav">
    <li><a href="/c/browse/Photography/ci/989/N/4294538916" target="_self"><span>Photography</span></a></li>
    <li><a href="/c/browse/Computers-Solutions/ci/9581/N/4294542559 " target="_self"><span>Computers</span></a></li>
    <li><a href="/c/browse/Professional-Video/ci/3755/N/4294545851" target="_self"><span>Pro Video</span></a></li>
    <li><a href="/c/browse/Lighting-Studio/ci/1161/N/4294551176" target="_self"><span>Lighting <span class="lighting">&amp; Studio</span></span></a>
      <ul class="hidden">
        <li><a href="#">Drop Down Test</a></li>
        <li><a href="#">Drop Down Test</a></li>
        <li><a href="#">Drop Down Test</a></li>
      </ul>
    </li>
    <li><a href="/c/browse/Professional-Audio/ci/12154/N/4294550705" target="_self"><span>Pro Audio</span></a></li>
    <li><a href="/c/browse/Mobile/ci/8565/N/4294542748" target="_self"><span>Mobile</span></a></li>
    <li><a href="/c/browse/Home-Entertainment/ci/4600/N/4294544179" target="_self"><span>TVs &amp; Entertainment</span></a></li>
    <li><a href="/c/browse/Camcorders/ci/1820/N/4294548420" target="_self"><span>Camcorders</span></a></li>
    <li><a href="/c/browse/Surveillance-Video/ci/3496/N/4293342959" target="_self"><span>Surveillance</span></a>
      <ul>
        <li><a href="#">Drop Down Test</a></li>
        <li><a href="#">Drop Down Test</a></li>
        <li><a href="#">Drop Down Test</a></li>
      </ul>
    </li>
    <li><a href="/c/browse/Binoculars-Scopes/ci/978/N/4294541872" target="_self"><span>Optics</span></a></li>
    <li><a href="/c/browse/A-V-Presentation/ci/3644/N/4294546288" target="_self"><span>A/V Presentation</span></a></li>
    <li class="border-link"><a href="/c/category/2870/Used_Equipment.html">Used</a></li>
    <li class="border-link"><a href="/explora">Boogers</a></li>
    <li class="icon">
      <a href="javascript:void(0);" onclick="myFunction()">☰</a>
    </li>
  </ul>
</div>

</div>
</header>

CSS

(CSS code here...

If you'd like to experiment with the code, here's the link to the fiddle: https://jsfiddle.net/zyh7grur/1/

htmlcssdrop-down-menumenuresponsive

Answer №1

Upon reviewing your fiddle css stylesheet, I noticed that you had overlooked a section for the 'hover' event on each li element. To rectify this, I have inserted the following code:

.main-nav li:hover > ul {
  display: block;
  position: absolute;
  top: 50px;
  z-index: 9999;
  background: #769e2d;
}

I also made a correction to this part of your code:

.main-nav li ul {
display: none;
position: absolute;
}

After implementing these changes, everything seems to be functioning properly now. However, feel free to verify by checking out the updated jsfiddle link here: https://jsfiddle.net/zyh7grur/29/

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

Utilize HTML/CSS for text that changes automatically

Is it possible to dynamically change text using HTML and CSS based on the page being viewed? For example, when on the home page, the text would automatically display "Home Page" without needing manual changes on each page. I want this process to be seamles ...

htmlcss

Can a stroke in an SVG image be created using a gradient color?

Is it possible to create a gradient in the stroke color of these two lines, currently set to #389967, within this SVG? .chart-three svg .circle-foreground { stroke: #389967; stroke-dasharray: 494.55px 549.5px; stroke-dashoffset: 494.55px; stroke- ...

csssvgsass

What are the steps to establish a distinct websocket channel?

Imagine wanting to establish a chatroom with one public room and user-generated private rooms. How can Websocket facilitate the creation of private channels for these rooms? Platforms like Pusher and JWebSocket offer solutions for this, but what if you pr ...

javahtmlwebsocket

Error: Unable to retrieve the value of a null property | ReactJS |

There are two textboxes and one button designed as material UI components. </p> <TextField id="chatidField" /> <br /> <p> <code>Enter Your Name:</code> <hr /> & ...

javascripthtmlcssreactjsmaterial-ui

I am interested in shuffling the letters within words that I receive from the input in my textarea

Is there a way to modify some of the letters in certain words entered into a textarea without changing the order of the words? I'm looking to shuffle around the letters within specific words rather than scrambling the entire sentence. I considered ut ...

javascripthtmlrandomoutputtextarea

Share the hyperlink to a webpage with someone else

In my SQL command, I have a unique feature that retrieves the complete URL value of the current page: [##cms.request.rawurl##]. This code returns the entire URL. I need to send this address to another page and load it into a special div called "load-fac". ...

javascriptjqueryhtml

Bootstrap Carousel fails to wrap content to the left

My Bootstrap Carousel seems to be working fine, however, I am facing an issue where it does not move from the first slide to the last slide when clicking the left arrow. The left arrow functions correctly except on the first slide, after which the carousel ...

javascriptjqueryhtmltwitter-bootstrapcarousel

Adding -moz & -o prefixes to code that only has -webkit tags can be done by manually duplicating each line of

Imagine having a webpage located at this link: After saving the page and running the HTML file on my localhost, everything seems to work smoothly in Chrome due to the presence of -webkit prefixes in the CSS. Now the question arises - how can I ensure that ...

cssvendor-prefix

Having difficulties with incrementally rotating a CSS cube to every direction

Can anyone help me with rotating a cube one side at a time using CSS? I can make the cube rotate to the top / bottom and each side correctly, but when I try to rotate to the top or bottom first and then to a side, the cube spins without rotating left or ri ...

javascripthtmlcss

Tips on automatically clearing caches when refreshing a webpage

I am working on a php + jquery website project. Every time I navigate to a page using jquery ajax, I have to manually clear the cache using ctrl + F5. Otherwise, the buttons on the page become unresponsive. I have tried forcing a page refresh with "windo ...

phpjqueryhtmlcss

Executing .js files within .html documents

Looking for assistance with Javascript Recently, I've been delving into the world of javascript and exploring ways to create interactive graphs. I stumbled upon some promising source code that could help me achieve my goal, but unfortunately, I' ...

javascripthtml

"Converting an angular date-picker into a popup-date-picker: A step-by-step

I am currently working on a project in Plunker and I would like to implement an Angular date-picker-popup similar to the one in my design. Any suggestions or ideas on how to achieve this? Thank you in advance! ...

angularjshtmlangular

The Bootstrap Grid System Column is Experiencing Issues

Check out my code snippet: I've attempted changing the container class to container-fluid and resizing the page, but no luck. <div class="container"> <div class="row"> <!--Product: banana split--> ...

htmlcssbootstrap-5col

The <h:outputStylesheet> tag fails to display any content on the HTML page

I am having trouble getting my CSS sheet to load while using JSF2 and PrimeFaces. The CSS file is located at WebContent/resources/css/style.css Here is the xhtml code: <h:head></h:head> <h:body> <h:outputStylesheet name="css/styles. ...

htmlcssjsf-2

Adjusting webpage background with JavaScript

I've been struggling with this for the past six hours and can't seem to get it right. I've checked out various solutions on Stack Overflow, but nothing seems to work. What am I missing here?!? My html5 page doesn't have a background an ...

javascriptjqueryhtmlcss

react: implement custom context menu on videojs

Can someone assist me with adding a quality selector and disabling the right-click option in a webpage that uses videojs? I am unsure about using plugins, as there were no examples provided in react. Any guidance would be appreciated. VideoPlayer.js impor ...

javascripthtmlreactjsreact-routervideo.js

Is there a way to save the values of all input fields in a single container using local storage simultaneously?

Let's say I have the following structure: <div id="main"> <div id="wrapper"> <input/> <input/> <input/> </div> </div> My goal is to use localstorage to store the entire wrappe ...

javascriptjqueryhtml

Live visualization from a Remote System (External Network)

I am looking to visually represent real-time sensor data (streaming data) using Node.js, HTML, and MySQL. I have set up MySQL to store the real-time sensor data, an index.html file that implements Google Chart through the doPoll app.js file, and the app.js ...

htmlmysqlnode.js-stream

preventing elements from moving unexpectedly as the navigation bar becomes fixed at the top of the page

I have a website that features a Bootstrap 3 navbar. This navbar is positioned 280px below a block div and becomes sticky at the top of the page when scrolled to that point. HTML (within < head > tags) <script> $(document).ready(function() ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to ensure text in a paragraph remains at the bottom of a div without any additional space below it?

I would like the text and its border to remain fixed at the bottom of the body element. Additionally, I want the text to be positioned right at the edge of the div boundary. @import url(https://fonts.googleapis.com/css?family=Bungee); body { margin: ...

htmlcss