When hovered over, the submenu quickly adjusts its size within 0.1 seconds

Whenever you hover over the Galerija, a submenu pops up. However, there seems to be an issue where the right side of the submenu twitches or resizes for about 0.1 seconds initially.

If anyone has any insight on this problem, I would greatly appreciate it. I'm hesitant to share the CSS code as I'm not sure where the problem lies. Perhaps someone could diagnose the issue by inspecting the elements or viewing the source code.

For reference, here is the link to the page:

In case the code is necessary, the section below may be relevant, but I haven't been able to resolve the issue:

/* Dropdowns */

    .sf-menu li li {
        background: #c18484;
        margin-left:6px;
        margin-top:8px;
        border: 1px solid white;
        border-radius:3px;
    }

    /* Sub Menu Item Links */

    .sf-menu li li a {
        border-color: #c48484;
        color: #fff;
        font-weight:bold;
    }

    /* Sub Menu Hovering */

    .sf-menu li li:hover, 
    .sf-menu li li.sfHover,
    .sf-menu li li a:focus, 
    .sf-menu li li a:hover, 
    .sf-menu li li a:active {
        background-color: #a07272;
        color: #fff;
        border-radius:3px;
    }

Answer №1

Your menu is being cut off on the right due to an unexpected overflow: hidden setting in the sub-menu when it's hovered over. It's hard to pinpoint where this overflow: hidden is coming from without seeing the entire CSS file since there are numerous inline CSS declarations. If you're able to locate the source, remove that property or add a CSS rule specifically for the submenu:

.sub-menu {
  overflow: visible !important;
}

It may not look pretty but it should do the trick ;)

UPDATE: Upon further thought, it could be the JavaScript responsible for creating the submenu animation that's applying the overflow: hidden style.

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

Tips for eliminating the default margin without using a float

Exploring the world of divs and buttons led me to an interesting discovery: removing a float creates a natural margin. Upon entering this styling: body { background: gray; } button { font-size: 17px; color: white; margin-l ...

What could be the reason my HTML5 application is not working offline on my android device?

Hello, I am encountering a problem and I could really use your assistance in figuring out what I am missing. There is a webpage that showcases numerous HTML5 mobile/web applications which can be found at For instance, let's look at this app where yo ...

Is there a way to create an HTML select element where each option has a unique background color, and will display properly

I want to create multiple HTML select elements with unique background colors for each option: <select runat="server" id="select"> <option value="A">White</option> <option value="B">Red</option> <option value="C">Yellow& ...

Struggling to manipulate the transparency of an image contained within a div element

I am struggling to achieve the desired effect of having an opaque image inside a transparent div. I have tried setting the opacity for both the image and the div, but it doesn't seem to be working as expected. Here is my jsFiddle Link for reference: ...

What is preventing me from using header() to redirect to the page?

There seems to be an issue with the URL redirection. Instead of redirecting to Activated.php, it is currently showing http://localhost/SP/activation.php/Activated.php instead of http://localhost/SP/Activated.php. <?php require 'db.php'; $msg= ...

Exploring the Transition from React.js with Material UI to Next.js for Server-Side Rendering: A Comparison of Tailwind CSS, Material UI, and Chakra UI

Currently, I am in the process of moving my React.js application with Material UI components to Next.js for server-side rendering (SSR) while considering some UI changes. In my research, I have come across three UI frameworks: Material UI, Chakra UI, and T ...

Is it possible to link click and onchange events?

My code includes a function that updates an empty array and displays content in two separate HTML elements each time a radio button is selected from a select list. The content is displayed in a div and a ul element. Additionally, I want to display more rad ...

Using Selenium in Python, identify and choose a class

Hello, I am currently working on automating a process using selenium, python, and GLPI. I have been struggling with selecting a user from a menu bar, despite trying various methods like linkText, cssSelector, and xpath. I suspect I may be doing something w ...

What is the process for transferring data (BLOB datatype) to a different table?

I need assistance with transferring data from one blob to another table in the same data type blob. However, I encountered an error message regarding SQL syntax: You have an error in your SQL syntax; check the manual that corresponds to your MariaDB serv ...

Oops! Looks like we have encountered an issue with reading the property 'checked' of nothing

Whenever I click the checkbox, an image should be displayed. Unfortunately, I encountered an error: Uncaught TypeError: Cannot read property 'checked' of null at (index):185 at dispatch (VM576 jquery.min.js:3) at i (VM5 ...

Eliminate the standard cell padding in nested HTML tables

In my setup, there is a parent table where each td tag in the tr tag contains a child table. Specifically, as shown in the example with Data WS-C3.... in the picture. [![<table class="table table--bordered table--nostripes table-top"> <thead& ...

Adding alternative content when embedding an SWF file in HTML5 - What's the best way to do it?

I am looking to incorporate an SWF file into HTML5. Currently, I have successfully used this code: <embed src="main.swf" width="550" height="400" /> However, I am wondering how I can display alternative content (such as an animated GIF image, or a ...

What is the best way to show a message next to a text box in a form?

I have a form called test.php with two buttons for entering an email ID and user ID, as well as a submit button. Upon clicking the submit button, my code checks if the email ID exists and displays a message to the user. I want to show this message next to ...

Creating a loading screen in Angular2: Step-by-step guide

How can you best integrate a preloader in Angular 2? ...

Issue with border radius not applied to input-group in Bootstrap 3

Can anyone explain why the input-group in Bootstrap 3.4 is missing all border radius? <form action="{{ route('dashboard.users.index') }}" method="get"> <div class="input-group"> <input type="text" name="search" class="f ...

Elevation on Tab button from the upper side

On my website, I have a large form where pressing the tab key switches between input fields. The inputs will also jump to the top if we reach the bottom of the form. The issue is that I have a fixed header at the top, covering the first 60px. Is there a w ...

Unable to use .click function to choose image within container

Apologies for the lengthy post, but I believe providing all details is essential to understanding the issue at hand. The following code snippet is intended to display the first image in a pop-up box when a user clicks on any of the images shown: <div ...

What are some strategies for keeping the focus state on the parent item in a dropdown menu?

When I interact with the dropdown menu in my navigation bar, the color changes for the child items. How can I make sure that the parent item maintains the same colored background even after clicking elsewhere on the page? To better understand the issue, i ...

Having difficulty retrieving the value from a database column as it consistently displays both the column name and value

I am currently working on setting up a dynamic site title that will be controlled by my database. This way, I can easily update the database with a new title and have it reflect on my website. Below is an example of the controller setup: TestController: ...

Place images within a card container using Bootstrap 4

I'm currently working with Bootstrap 4 and I am utilizing a card div. The card uses display flex and I am having trouble floating images within it, possibly because the card is configured to only allow one image. How can I successfully float multiple ...