Clicking on the responsive CSS menu causes it to disappear

Recently, I experimented with creating a Responsive Menu using CSS.

The menu responds well to different screen resolutions, but there is one issue.

When the menu is in wide mode and an anchor link is clicked, the menu quickly disappears and reappears without any action taking place. The hyperlink does not work as expected.

I have shared my code on jsfiddle: http://jsfiddle.net/za1yduqv/

You can replicate the problem by clicking the menu multiple times.

Here is a snippet of the HTML code:

        <nav>
            <a href="#" id="menu-icon"></a>
            <ul>
                <li><div class="nav-sep"></div><a href="#">Blog</a></li>
                <li><div class="nav-sep"></div><a href="#">About</a></li>
                <li><div class="nav-sep"></div><a href="#">Media</a></li>
                <li><div class="nav-sep"></div><a href="#">Contact</a></li>
                <li><div class="nav-sep"></div></li>
            </ul>
        </nav>

If you require more code snippets or details, feel free to reach out!

Thank you for your time,

Daniel

Answer №1

Don't forget to include the following line:

nav:hover ul {display: block;}

The current :hover styling has a display: none; property which causes the menu to disappear when hovered over!


Important Update: It may be more effective to explore alternative solutions rather than modifying this specific code! :(

Answer №2

To stop the blinking effect, simply remove the display:none from your :active rule and change absolute to relative.

http://jsfiddle.net/za1yduqv/

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

The Bootstrap modal demonstration fails to function on a local server but operates successfully on a live website environment

I am currently experimenting with the bootstrap modal feature using the official Bootstrap documentation. I have copied the code exactly from their website and conducted the following tests: Verified in the browser that the sources for js, jquery, and cs ...

Style the Google reCAPTCHA element with CSS

I have integrated Google reCAPTCHA into my forms along with some validation workaround that prevents form submission if the reCAPTCHA is not checked. However, I am facing an issue where I want to add CSS rules (such as border-color) to the captcha element ...

Arrange radio buttons vertically in a table

I am attempting to display a vertical list of radio buttons within a table cell. Is this achievable? Here is the code snippet I am currently working with: <table> <tr> <td> First Name </td> ...

What is the best way to determine the dimensions of thumbnails for photos stored on external servers?

I am currently working on an auction platform using Python/Django. Users have the ability to input URL's for their product images from external sites like Photobucket. My approach involves linking to the external product image when showcasing a speci ...

What is the best way to extract both the link and text from an <a> tag that contains another element in XPath?

In a similar way to my current data (which cannot be shared due to company policy), the example below is based on information extracted from this response and this response. The aim is to extract both the text of the <a> element and the link itself. ...

Having trouble displaying API JSON data in a Vue.js table component

In my HTML file, I have implemented fetching data from an API and displaying it in a table successfully. Now, I am trying to convert the HTML file to use Vue.js, but encountering some issues. Despite being able to fetch data from the API with Vue, the tab ...

Issue with margin spacing not desired on Internet Explorer 7

Encountering an unusual issue in Internet Explorer 7 where the heading appears with excessive space from the top. This issue is exclusive to IE 7 and not present in other browsers or newer IE versions. Any suggestions on how to resolve this? Chrome Versi ...

What is the best technology to implement for a band website design?

I'm in the process of creating a website for my friend's band, and I need some creative input. The site will feature minimal content such as a bio, news, and embedded audio/visual material. While my web development skills are decent, I'm loo ...

Unable to alter Mui input label color upon focus using theme.ts

In my next.js app, I'm facing an issue with changing the color of the label in a Material UI input field using Mui. Despite updating the theme.ts file to change the border bottom color and label color, only the border bottom color is being applied. T ...

What is the best way to incorporate a custom margin within a grid system while ensuring it remains responsive?

I'm currently working on incorporating 4 non-bootstrap "cards" into my HTML layout, with some space between them. Here is an image depicting how it's supposed to look: https://i.sstatic.net/bppvW.png The problem arises when I attempt to make the ...

What is the best way to replicate tags in selenium when an element has multiple class names?

Extracting information from a webpage where a significant amount of text was concealed behind the "see more" tab. Using selenium to click on all such buttons and then extracting data with beautifulsoup. However, some of these buttons have additional space ...

Feeling lost when it comes to CSS selectors

Alright, I need some help with this code snippet: <div id="carousel"> <div class="active"><img id="pic1" src="http://i.imgur.com/gWGqZly.png" /></div> <div><img id="pic2" src="http://i.imgur.com/mC1FD81.png" />& ...

If checkboxes are found within the table's rows and cells, add the parent row class if none of the

I am attempting to implement a small script within my table under the following conditions: The table contains a checkbox within each tr td, and I want my jQuery script to be applied only if the selector identifies a tr where all td checkboxes are unchecke ...

I am curious about this "normalize.less" that appears in the F12 Developer Console

Trying to track down information on this mysterious "normalize.less" that is appearing in the Chrome 76 developer console has proven to be a challenge for me. In Firefox 69's console, it displays bootstrap.min.css instead, leading me to believe that i ...

The Bootstrap 5 navigation bar remains fully expanded and does not collapse as intended

I'm having trouble getting the navbar to collapse on my landing page created using react and bootstrap. Here is the code for my header component: import React from 'react'; import logo from '../images/logonoBG.png'; export default ...

Attempting to conceal a section with CSS styling

Here's a simple question for you: which one of these options is correct? I am attempting to hide this particular div: <div class="notice important-message"> .notice .important-message { display: none } Or should the classes be joined tog ...

Utilizing HTML5 to Access and Update custom data attributes

I have implemented the following code: var activeFilter = $('<li></li>').data('input-id', 'mycustomId'); $('#container').append(activeFilter); Now, I am faced with the challenge of retrieving a specific ...

Ensure that the video continues playing from where the host left off instead of restarting from the beginning upon reloading

Is there a way to seamlessly stream a video from the host server on my website, so that it picks up exactly where it left off rather than starting from the beginning every time someone accesses the site? I want the video to remain synchronized with the o ...

Implementing a method to ensure both filters remain active with jquery

I am currently working on filtering a table based on the columns for department and location. Currently, these filters work individually but I am stuck on how to implement both filters simultaneously. I need assistance in figuring out how to filter all " ...

Markdown Custom Parsing

Every week, I create a digest email for my university in a specific format. Currently, I have to manually construct these emails using a cumbersome HTML template. I am considering utilizing Markdown to automate this process by parsing a file that contains ...