Menu that can be accessed on mobile devices by dropping down

Help needed! I'm facing a problem with my drop-down menu, where a black block is covering one of the menu lists. A picture has been added to illustrate this issue.

I believe it's a simple problem, any assistance would be highly appreciated.

Here is the JSfiddle link https://jsfiddle.net/8pgn79cp/1/

<body>
<div id="MainContainer"><!--Start of MainContainer-->

    <div id="Header"><!--Start of Header-->

        <div><img id="Logo"src="images/logo.png"></div>


       <!-- more content goes here -->
       
            /*CSS styling and media queries included as well */

       <!-- End of main container -->

</body>
htmlcss

Answer №1

The CSS code you currently have is:

nav .nav li:hover {
    width: auto;
    background: black;
    transition: all 0s;
}

When hovering over an li element within the navigation, it will change to a black background.

Answer №2

the reason for this behavior is that your CSS includes the following:

/*Show submenu at hover                                                           sub test*/
    nav .nav li:hover ul {
    width:50%;
    padding:0px;
    margin:0px;
    left:75px;
    top:10px;
    background-color:black;
}

If you require further assistance, feel free to leave a comment. Here is the link to your fiddle: https://jsfiddle.net/8pgn79cp/3/ I have also included some script.

$('.nav-btn').click(function(){
    $('.nav').slideToggle(300);
});

This will display your menus when the nav-btn is clicked.

Additional note: Avoid assigning a width to the li elements to simplify hover effects. Instead, set a padding or width on the a tag and use display: inline-block, allowing the parent li to contain the width of the a tag for hover effects.

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

Unable to click on the password field using a mouse - encountering a problem on a PHP

The link to access the email admin panel is While I am able to click on the username field, I am unable to click on the password field. The only way to place focus on it is by using the tab button on the keyboard. Initially, everything was functioning co ...

htmlcss

Utilizing CSS nth-child on dynamically generated HTML in Angular

Ensuring that the columns are floated to the left without large gaps between rows is my current challenge. Here's the HTML structure I'm working with: <div class="row hide-for-small"> <div ng-repeat="module in modules"> ...

htmlcssangularjs

Arranging my pictures through CSS styling

Upon examining my webpage, I've noticed that the images are not properly aligned. My goal is to have the icons perfectly lined up; however, it seems there's a discrepancy depending on another cell, based on the size of the container where the tim ...

htmlcss

Using dots instead of lines for the carousel indicators in PrimeNG

I'm currently working on a carousel feature, but I want to change the indicators from lines to small dots. I know the solution lies within the CSS files, but I'm not sure how to implement it. I think I need to create a new CSS class, but I could ...

cssangularprimeng

Positioning of Responsive Slider

I'm currently working on a responsive website, but I am facing challenges with the placement of the slideshow dots. When I switch to the device toolbar, they seem to change position. I have tried various methods such as using relative and absolute uni ...

javascripthtmlcss

Is it possible to center the image and resize it even when the window is resized?

My goal is to position an image in the center of the screen by performing some calculations. I've tried using: var wh = jQuery(window).innerHeight(); var ww = jQuery(window).innerWidth(); var fh = jQuery('.drop').innerHeight(); var fw = jQ ...

javascriptjqueryhtmlcss

Is it possible to trigger a JavaScript function by manipulating the URL of an HTML page?

Imagine this scenario: You have an HTML page located at example.com/test.html that contains several pre-defined JavaScript functions, including one named play(). How can I add JavaScript to the URL in order to automatically trigger the play() function wh ...

javascripthtmlurl

JQuery Challenge: Solving Dynamic Modal Issues

I'm in the process of creating a webpage that features multiple divs, each with its own unique image and title. Within each div, there's a button that, when clicked, should grab the specific image and title and display them in a modal. However, I ...

javascriptjqueryhtmltwitter-bootstrap

Modify the internal class style to set overflow property to visible for a particular class in PrimeNG

Looking for a way to customize the styles of PrimeNG or Angular2 components? The documentation may be lacking clarity, but you can find more information at this URL: http://www.primefaces.org/primeng/#/dialog So, how do you actually go about changing the ...

cssangularprimeng

Why is the child's CSS hover not functioning when the body has an event listener attached to it?

Check out the repository link here: https://codepen.io/Jaycethanks/pen/WNJqdWB I am trying to achieve a parallax effect on the body and image container, as well as a scale-up effect on images when hovered over. However, the hover functionality is not work ...

javascriptcssevent-listenermousemove

Developing a personalized file upload button in React

I have been working on creating a custom <input type="file"> upload button in React. My goal is to display the name of the uploaded file on the button itself after the upload. I encountered some challenges while trying to create a codepen demo, so I ...

javascripthtmlreactjscssecmascript-6

Obtain the incremented input's value

Seeking advice: I have a dilemma with two buttons that increase or decrease an input value. How can I retrieve the value upon submission of the result? Previous attempts have yielded 'undefined' or '0' values. Your insights and guidanc ...

javascriptjqueryhtmlbuttoninput

Adjusting the front size while utilizing the SideNav feature in Materialize

While creating a website using Symfony and Materialize, my client requested to have the menu displayed on the side. I followed the guidelines from and successfully implemented the side menu on the left. However, I am encountering two issues: The first ...

javascriptcssmaterialize

Preventing right-aligned images from overflowing inside a div on Google Chrome

I am currently utilizing the jQuery cycle plugin to display a slideshow of images that floats to the right within an outer div element. The CSS I am using is as follows: .slideshow { float:right; margin-left: 20px; } The image alignment works per ...

jqueryhtmlcssimagecss-float

Script for automated functions

I have implemented 4 functions to handle button clicks and div transitions. The goal is to hide certain divs and show one specific div when a button is clicked. Additionally, the background of the button should change upon hovering over it. Now, I am look ...

jqueryhtmlcss

Creating a dynamic table accordion with PHP and MySQL

I am currently working on creating an accordion table to display data retrieved from a database. I want the description data to be shown in a row below when clicking on the respective row. Despite my efforts in modifying various code snippets that I have c ...

javascriptphpjquerymysqlhtml

How can I retrieve dt/dd elements and store them in an array using Simple HTML DOM?

Similar Question: Retrieving data from HTML table using preg_match_all in PHP This is the HTML code snippet: <div class="table"> <dl> <dt>ID:</dt> <dd>632991</dd> <d ...

phphtmlarrayssimple-html-dom

Slideshow Display Suddenly Halts at the Last Image

I am currently working on a Bootstrap JS Carousel that showcases several images stored in the project folder. Each image's filepath is retrieved from an SQL Server database and displayed within the carousel. While the images are displaying correctly ...

javascriptc#jqueryhtmlasp.net

What is the reason behind div elements shifting when hovering over a particular element?

Currently, I have floated all my div elements (icons) to the left and margin-lefted them to create space in between. I've displayed them inline as well. However, when I hover over one element (icon), the rest of the elements move. Can you please help ...

javascriptjqueryhtmlcss

Storing a complete Bootstrap 3 <div> element in a JavaScript array

Hey there, I'm fairly new to the world of web development and I've been working on incorporating a collection of images and containers within a div array. The goal is to be able to hide the entire div using (display: none) and then show another d ...

javascriptjqueryhtmlarraystwitter-bootstrap