Display issue with sub-menu when hovered over

I've been dedicating time to a project that is almost completed. The one issue that has me stumped is the sub menus not appearing next to the "active menu."

Check out this gif demonstrating the problem

You can view the website at: www.su.fi

Previously, I encountered a problem where the sub-menu would disappear after hover. I managed to solve it by adding:

.sub-nav, .sub-nav > ul {
width: 500px !important;
box-shadow: none;
background-color: #FF008C;
display: block;
}

#main-nav .act .sub-nav {
visibility: visible !important;
opacity: 1 !important;

However, now I'm facing the issue of the menu items to the left of the active menu not showing up.

Warm regards, Thank you!

I would greatly appreciate any suggestions on how to resolve this issue.

htmlcss

Answer №1

One issue I noticed is with your 

#main-nav .act .sub-nav {
    visibility: visible !important;
    opacity: 1 !important;
}

It appears that the div.sub-nav layer is overlapping the li:hover. One potential solution could involve adjusting the z-index: Apply z-index: 999; to the children of li:hover that have a div.sub-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

Is there a way to modify the margin of items in my table affected by the Angular Material ng-tns class without encountering a different variant of ng-tns when using CSS for the adjustment?

In my Angular project, I am utilizing Angular Material and material table components. One issue I have encountered is that all the text in my table seems to have a 10px margin applied at the top and bottom due to classes like .ng-tns-c5-1 or .ng-tns-c6-1, ...

htmlcssangularangular-material

Tips for utilizing the nth-child selector to exclude hidden divs

I am facing an issue with displaying random blocks in rows. Each time a block falls into a new row, I want it to have a different style. However, when the user clicks on a button to hide certain blocks using display:none, the problem arises because the nth ...

javascriptjqueryhtmlcsscss-selectors

The sixth character that is not in SGML format

I encountered a validation error while working on a website project Line 1, Column 1: non SGML character number 6 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.… In Firefox source viewer, certain lines are highlight ...

phphtmlvalidationcodeignitersgml

Tips for aligning the list style icon perfectly with the text

I need help aligning text in the center of a customer list style image for an LI element. I've attempted using margins and paddings, but it hasn't worked. Here's the code and screenshot: HTML: <ul class="homeList"> <li>Over ...

htmlcsslisthtml-lists

The PHP code I wrote will be executed on the subsequent HTML page, not the one currently being displayed

I have a school project where I am creating a quiz-game web page. Each question will have 4 possible answers. The questions, along with their 4 answer choices and the correct answer, are randomly selected from a database. However, I am facing an issue w ...

phphtmlmysql

Tips for choosing the initial paragraph within a div that has a designated class (CSS 2)

I have a <div> that contains multiple <p> elements, and I want to apply specific styling only to the first <p> within each <div> with a unique class called cnt. Please take note that this question may seem similar to others on SO, ...

htmlcsscss-selectors

Verify that the web element has a class containing the pseudo selector (:first-child) applied using Selenium WebDriver

Whenever I have a css style that uses the pseudo selector first-child: .point:first-child { margin-left: 0; } Could one find out if a specific DOM element has the class point with the :first-child pseudo-selector applied? .getAttribute("class") isn&a ...

cssselenium

Showing a placeholder image in the absence of any image

I need help with displaying a default image when there is no uploaded image in the CMS. Here is the code I have so far: <li><img alt="" class="img-responsive" src=" <? if($artikel[0]['images'] == '' ...

phphtmlarrays

The bootstrap select dropdown seems to have a mind of its own and doesn't want to

While using the bootstrap-select picker to select an option, I encountered an issue where the drop-down structure with the top bar does not properly follow the parent element when the container is scrolled. If you want to see the issue in action, please c ...

jqueryhtmlcssbootstrap-selectpicker

When you hover over an image, both the image's opacity and the color of the title beneath it change. However, if the title expands to two lines, it messes up

I am currently working on a project where I have an image and a title displayed below the image. My goal is to change the color of the text when hovering over the image, as well as adjust the opacity of the image. Additionally, when hovering over the title ...

javascriptjqueryhtmlcssdjango

Is there a way to modify my code to eliminate the need for a script for each individual record?

Whenever I need to create a code with the ID by browsing through my records, is there a way to make just one function for all the records? $tbody .= '<script> $(document).ready(function(){ $("#img'.$idImage .'").click(functi ...

javascriptphphtml

Guide to making Bootstrap collapsible panels with full-width content that do not affect neighboring columns

I'm currently working on a responsive grid that displays items with expandable details when clicked. My issue is that when one item expands, the elements next to it collapse down, which is not what I want. I want all items to stay at the top and have ...

javascriptjqueryhtmlcsstwitter-bootstrap

The jquery animation feature seems to be malfunctioning as the div element is not displaying

My goal is to create a div that smoothly appears and disappears while moving randomly, but I'm having trouble as it seems fixed in place. Below is a snippet of the code causing issues. Currently, the div only fades in and out. Any assistance would be ...

javascriptjquerycss

Adding HTML created by PHP to a document fragment

I am trying to add a large amount of HTML generated by PHP (5000 div elements) to a document fragment and then append it to the body of the page. Here is an example of the HTML: <div itemscope itemtype="http://schema.org/Article"> <link itemprop ...

phpjavascriptjqueryhtml

JavaScript time zone error specific to Internet Explorer

In my code, I am attempting to retrieve the timezone name or ID based on the client's local time. When testing with clients from the United States, I correctly receive EDT. However, when trying the same code with clients in the Indian timezone, it ret ...

javascripthtmlinternet-explorerdatetimetimezone

Tips on creating two columns with varying backgrounds and spacing on the left and right sides in Bootstrap

I am in need of assistance to create a website top bar similar to the image provided at this link: https://i.sstatic.net/wfc1w.jpg The first column should display color-1, while the second column should showcase color-2. I want an angled design between th ...

htmlcsstwitter-bootstrapbootstrap-4

Is it possible to conceal and completely empty the TextBox once the checkbox is deselected?

When the checkbox is checked, the textbox is displayed; otherwise, it remains hidden. However, the value is not being cleared. Can someone please help me with this issue? Thank you in advance. HTML <div class="munna"> <in ...

javascripthtmlajaxjquery

Troubleshooting: HTML Image Map not showing tooltips

Everything seems to be working fine on the webpage, except for the tooltips on certain areas of the image. Only the first area title displays a tooltip when hovering over any part of the image. Here is the HTML code I am using: <html> <map nam ...

htmltooltipimagemap

CSS - Image not adapting to screen size

If you take a look at the website www.markallanholley.com, you will notice that the robot-girl image on the right is not responsive. I have tried coding what I thought was the correct way to make it responsive, but unfortunately, it's not working. I w ...

htmlcss

Having difficulty with collapsing Bootstrap side navigation menu levels

I've been searching high and low for an example that matches my current issue, but so far, no luck. I'm attempting to design a collapsible side navigation with multiple levels in bootstrap using bootstrap.js. The problem I'm facing is that ...

javascriptjqueryhtmlcsstwitter-bootstrap