CSS Drop-down Twitchy

I'm currently working on a website project and implementing a CSS-only dropdown menu with some CSS3 features. However, the client has requested specific menu items that are pushing the boundaries of their containers, resulting in some twitchiness during menu transitions.

Here is a snippet of the CSS code:

#nav{
background-image:url(../images/nav-bg.png);
height: 32px;
width: 100%;
padding-right:8px;
background-repeat:repeat-x;
z-index:3;
}

#drop { list-style-type: none; height: 32px; padding: 0; margin: 0 auto; width: 500px; vertical-align: baseline; color: #fbf9ec; }
#drop li { float: left; position: relative; padding: 0; line-height: 32px; background: #3a7c38 url(../images/nav-bg.png) repeat-x 0 0;}
#drop li:hover { background-position: 0 -40px;}
#drop li a { display: block; padding: 0 15px; color: #fbf9ec; text-decoration: none; }
#drop li a:hover { color: #fbf9ec; }
#drop li ul { opacity: 0; position: absolute; left: 0; width: 14em; background: #3a7c38; list-style-type: none; padding: 0; margin: 0; z-index: 2; box-shadow: 4px 4px 7px #888;}
#drop li:hover ul { opacity: 1; }
#drop li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#drop li:hover ul li { height: 30px; line-height: 30px; }
#drop li ul li a { background: #3a7c38; }
#drop li ul li a:hover { background: #254F24; }

You can view a live example at:

MasonandLauren.com/flotec/secondary.html

(Please note that the design is based on customer requirements, not my own)

I would greatly appreciate any suggestions on how to eliminate the twitching issue!

Thank you! ~Mason

htmlcssdrop-down-menu

Answer №1

To improve your navigation, try adjusting the z-index of your main menu items to a value of 3 (one higher than the sub menu items).

It seems that the z-index of the sub tabs was causing them to overlap and shift when moving the mouse.

#trans-nav li {
float: left;
position: relative;
padding: 0;
line-height: 32px;
background: #3A7C38 url(../images/nav-bg.png) repeat-x 0 0;
z-index: 3;  /* <-- this is the updated value */

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

Conceal an entire div using CSS, especially if a portion of it remains unoccupied

Is there a way to conceal an entire division if a part of it is void? For instance, if "dd" is empty as indicated below, can I hide the entire class "test" so that the keyword Restrictions does not display either? I attempted .test dd:empty { display: none ...

csshide

Angular HTML is throwing an error related to object arrays

Is there a way to display only specific fields of an array? <div class="form-check" *ngFor="let periodo of filterPeriodos()"> <div>{{periodo.periodos | json}}</div> <input class="form-check-input mr- ...

javascripthtmlangular

Excess background spills beyond the width of the window

Looking to create a design similar to the following: A main container with 'n' child elements that may extend beyond the width of the window, causing the page to scroll horizontally instead of wrapping to the next line. This main container ...

htmlcssflexboxoverflow

Providing an Object as the Output of an Event Handler, in cases where the data cannot be transformed into another format

My goal is to have the second dropdown menu, labeled Item, dynamically update when a category is selected from the first dropdown menu, labeled Type. If I could access the array I created within the change event, I could easily populate the second dropdow ...

javascriptjqueryhtml

Why use @media (max-width:-1) in your code?

While reviewing CSS code created by another department, I noticed an interesting media descriptor: @media (max-width:-1) { ...standard css stuff here } The value of max-width cannot be less than 0, so what could be the purpose of this? Perhaps it was ...

css

Obtaining the API for a website's functionalities

I’m in need of downloading the API file that facilitates the connection between the website and database. How can I achieve this? I've attempted to use Httrack, wget, and open explorer, but they only seem to download the website itself. While I get ...

phphtmlweb-scraping

The ng-controller (dropdown menu) is functioning properly when tested locally and on JSFiddle, however, it is not working on

My HTML website with ng-app is functioning properly when tested locally and on certain coding platforms like JSFiddle and CodePen. However, it seems to encounter issues when deployed on Google Sites, Github, W3, and similar websites. The main functionalit ...

htmlangularjsangularjs-directive

Is there a way to make my item reach a height of 100%?

I've created a unique Wordpress theme and I'm looking to make an element 100% height to fill the remaining available space. Here is the HTML code snippet: <header id="masthead" class="navbar navbar-default" role="banner" style=" backgrou ...

htmlcsstwitter-bootstrap

The module 'AppModule' encountered an unexpected value 'FusionChartsModule' during import. To resolve this issue, make sure to include a @NgModule annotation

How can I integrate the FusionChartsModule into my app.module using Angular 8? Here is the code snippet: *error:Unexpected value 'FusionChartsModule' imported by the module 'AppModule'. Please add a @NgModule annotation. *, I a ...

javascripthtmlangularfusioncharts

slow loading background slideshow in css

Creating a simple slideshow for the background using CSS has been successful, but I am facing an issue with making all backgrounds utilize background-size: cover. I want the images to fit properly on the screen. Another problem is that the pictures take a ...

javascripthtmlcsskeyframe

Displaying a value in a React component using material-ui's TextField

Can anyone help me with printing the email a user enters into the textfield within the Dialog when a button is clicked? I have been struggling to achieve this due to my function's structure. Any guidance would be greatly appreciated. export default fu ...

javascriptcssnode.jsreactjsmaterial-ui

The vertical dimension of an element does not increase

Currently, I am working on a webpage with a header, page content, and footer sections. The issue I'm facing is that I set the page's height to height :auto;, but it's not functioning as expected. I actually need the page to automatically ex ...

htmlcssheight

Developing a touch-enabled mobile keypad with jquery

I've developed a number keypad with Javascript. Each time a button is clicked, the following actions are taken: List of buttons: <input type="button" value="2' class="num-key" onclick="insertvalue(this.value)"> <input type="button" valu ...

javascriptjqueryhtml

Autofill functions may not be compatible with input fields generated using JavaScript

Having trouble with browsers not using autocomplete in login overlays generated with JavaScript? It can be really annoying. Any suggestions on how to fix this issue? Should I create a hidden form within the original HTML and then move it into the overlay? ...

javascripthtmlcss

Failure to display masonry arrangement

I am working on creating a stunning masonry layout for my webpage using some beautiful images. Take a look at the code snippet below: CSS <style> .masonryImage{float:left;} </style> JavaScript <script src="ht ...

javascriptjqueryhtmlcssjquery-masonry

Utilize express middleware for applying CSS styles in web development

How's it going? I've been experimenting with middleware in Express JS, like this: app.get ('/user/:school/:dual', function (req, res, next) {   ......   ...   ...... }); Everything seems to be working fine so far. But when I na ...

cssnode.jsexpressmiddleware

Could you please explain the mysterious space that appeared between padding-bottom and border-bottom?

I noticed a very subtle orange gap between the padding-bottom and border-bottom. What could be causing it? https://i.sstatic.net/7eFXw.png Below is the code snippet in question: p { border-bottom: 1px solid #E8E8E8; margin: 0 auto; padding-botto ...

htmlcss

Modifying the .textcontent attribute to showcase an image using JavaScript

I am working on a website and I want to change editButton.textContent = 'Edit'; so that it displays an image instead of text. var editButton = document.createElement('button'); editButton.textContent = 'Edit'; After exploring ...

javascripthtmlcss

Is there a way to align all the values in the center of the row, while ensuring that the div above the row does not have the same width as the row below it? If so, how

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src= ...

htmlcssbootstrap-4

Manipulate the visibility of div sections depending on the selected price and category checkboxes using JavaScript

I have a unique div setup where I'm defining data attributes to display a product list. Each div contains data attributes for category (data-category) and price (data-price). I want to be able to show or hide specific divs based on selections made usi ...

javascriptjqueryhtmlcsscheckbox