Strange behavior from the CSS dropdown menu

I am currently working on implementing a dropdown menu from gosu.pl/menu, specifically dropdown menu 1, example 1.

Interestingly, I am experiencing varying effects in different browsers, not the typical situation where IE causes issues across the board.

While running on my localhost using cakephp (though this should not impact it), everything appears fine in FF with the menu displaying correctly and the dropdown functioning as expected. You can see how it's supposed to look here.

However, if I clear the cache by hitting ctrl+f5 and then refresh, it transforms into something like this.

The strange part is that simply pressing f5 to reload the page brings it back to normal, but another ctrl+f5 sends it wonkey again.

Testing in IE reveals no issues even after numerous reloads. Unfortunately, both Safari and Chrome consistently display anomalies regardless of what I do, while Opera behaves perfectly.

I have meticulously compared the html and css during both the erratic and normal states, only to find that everything is identical. Can anyone shed light on what might be causing this issue? I suspect it has something to do with caching, but why would it manifest differently in various browsers?

Regrettably, I cannot share the html or css since they are on my local machine.

Please assist!

htmlcssbrowser

Answer №1

Personally, I prefer using lists with list-items over tables for menu items. It's considered better practice.

div#mainmenu_bottom ul {    
    list-style:none;
    margin:0px;
    padding:0px;    
}

div#mainmenu_bottom ul li {
    padding:0px;
    margin:0px;
    display:inline;
    float:left;
    height:25px;
}

div#mainmenu_bottom ul li ul {
    display:none;
    filter:alpha(opacity=90);
    -moz-opacity:0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
    border-width:0px 1px 1px 1px;
}

div#mainmenu_bottom ul li:hover ul {
    position:absolute;
    top:236px;  
    padding:0px;
    margin:0px 0px 0px -5px;    
    width:150px;
    display:block;      
    border:1px solid #00451A;

}

div#mainmenu_bottom ul li li {
    width:140px;
    padding:5px;
    border:1px solid #00451A;
    border-width:0px 1px 1px 0px;
    background-color:#00451A;   
    margin:0px;
    height:15px;
    cursor:pointer;
}

div#mainmenu_bottom ul li li:hover {
    background-position:-50px -4px;
    background-image:url('../images/interface/bg_block_groot.jpg');
}

The structure would look like this:

<div id="mainmenu_bottom">
    <ul>
        <li><a href="" class="mainmenu">Test 1</a></li>
        <li><a href="" class="mainmenu">Test 2</a></li>
        <li>
            <ul>
                <li>link 1</li>     
                <li>link 2</li> 
                <li>link 3</li> 
            </ul>
            <a href="" class="mainmenu">Test 3</a>
        </li>            
    </ul>
</div>

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 concealing a Div in an HTML document with the help of Angular

I need a solution to hide a div that contains only titles, while the div with the actual content is located in a different section <div> <b>Delivery Info\</b> <div class="custom-control">Delivery ID: </div ...

javascripthtmlangularhide

Issue with footer display while utilizing Bootstrap's cover template

When I utilize the Bootstrap cover template, I encounter an issue where if I resize the window to a smaller level or include enough text to require scrolling, the footer background color turns into a solid color. This is also visible in the template I am u ...

htmlcsswebbootstrap-4

Adding a JSON array to HTML using JavaScript

Looking to incorporate JSON Array data into an HTML list with Headings/Subheadings using JavaScript. I experimented with two methods - one involving jQuery and the other mostly vanilla JS. The initial attempt (link here: http://jsfiddle.net/myu3jwcn/6/) b ...

javascripthtmljquery

Using Javascript values within HTML tags

Despite the abundance of posts on this topic, I haven't been able to find a solution to my specific issue. My goal is to set a JS variable as the value of an HTML attribute: <script> var screenWidth = screen.width </script> <img src= ...

javascripthtmlvariables

Different methods to activate and deactivate months by choosing the current or upcoming year

I am a beginner in the world of programming and I have a specific requirement. If the current year is selected, then the previous months should be disabled. However, if a future year is chosen, all 12 months should be available. For example, if today is M ...

javascripthtmljquery

Switch out external CSS stylesheets automatically using toggle scripting

Hello there! I've been trying to figure out a way for this script to switch back to the original CSS external stylesheet. Here is the code that I currently have: $(document).ready(function() { $("#css-master2").click(function() { $("link[title=chang ...

javascriptjqueryhtml

Interact with HTML style attribute using JavaScript

Is there a way to retrieve a specific CSS property from the style attribute of an HTML element, without considering the stylesheet or computed properties? For example: <div style="float:right"></div> function fetchStyleValue(element, propert ...

javascriptjqueryhtmlcss

A feature to reveal additional content when it extends beyond a single line

<div class="questionnaire-description col-xs-12" id="questionnaire_description_wrapper"> <text-truncate> <span ng-class="questionnaire_description.show_more ? 'full-description' : 'ph-ellips ...

javascriptjqueryhtmlcss

Arranging a variety of sophisticated charts side by side using Bokeh

Is there a way to display two or more Bar charts together in a single html file using Bokeh? I have found examples of laying out figures like triangle, square from bokeh.plotting together on this page: However, I have not been able to find any examples s ...

pythonhtmlplotbokeh

Altering the hover functionality for dynamically created class elements

I have a vision to create a unique e-commerce storefront with tile design, featuring an item thumbnail that reveals the item name upon hovering. I found inspiration from this example, but I want the item name to slide up smoothly on hover, rather than simp ...

javascriptjqueryhtmlcsshover

Calculating the subtotal amount using Vue.js is a straightforward process

My Vue.js project functions as a shopping cart, and I am looking to calculate the subtotal for each product row. Here is an excerpt of my HTML code: <div id="app"> <table border="1"> <thead> <tr> <th>#</th ...

javascripthtmlvue.js

How to Align Bootstrap 4 Navbar Brand Logo Separate from Navbar Toggler Button

Can anyone help me with center aligning navbar-brand? When I right align navbar-toggler for mobile devices, it causes the logo to be off-center. Is there a way to independently align these two classes, and if so, how can I achieve this? <nav class="n ...

javascriptcssbootstrap-4hamburger-menu

Applying a class in jQuery to an element when the data attribute aligns with the current slide in Slick

I need to compare the data-group attribute of the current slide to the equivalent attribute in a navigation list. If they match, the anchor element in the navigation list should be given an active class. How can I achieve this using jQuery? Navigation Li ...

javascripthtmljquerycss

The styling of the React component is not being applied as expected by the .Css file

My title component seems to be having trouble applying the CSS styles as expected. I'd like it to have a green background, but for some reason, it's displaying as white. Below is the Component Js file: import React from "react"; funct ...

javascriptcssreactjsclasscomponents

Finding a particular record in a CSV file using a value from that record instead of the line number in JavaScript

I have a simple goal in mind - to develop a website that consists of an input box and a send button where users can enter a name and the website will retrieve information from a CSV file. For instance, let's say my CSV file looks like this: name,valu ...

javascripthtmlcsvdomfind

Guide to adjusting the screen resolution on your iPad 3

Hello everyone, I'm fairly new to designing for the iPad 3. Could someone please provide some guidance on how to set media queries specifically for the iPad 3? Thank you in advance. ...

css

Utilize jQuery to show a specific section of the page based on the hash in the URL

So, the inspiration for this project stemmed from a common issue I encountered: After hitting the register button, the PHP script processes it and displays an error, but the page remains on the login form. Here's the visual representation of the i ...

javascriptjqueryhtml

Is it considered a bad practice to apply overflow: auto to all elements with the exception of html?

My approach to beginning a new design always involves overriding the default padding and margin set by the browser on all elements: * { margin: 0; padding: 0; } After coming across j08691's response regarding a margin collapse issue, I discovered th ...

htmlcssoverflow

Steps for locating the initial instance of content within a DIV

The HTML code below shows information about different types of surgeries: <div class="provInfoSub hidOverflow floatLeft vertAlignT"> <specialty><a title="Plastic Surgery" href="check.aspx">Plastic Surgery</a></specialty> ...

jqueryhtml

Utilizing Javascript to implement a tooltip feature for dynamically inserted text

I recently incorporated a brief jQuery tooltip plugin into my site. It consists of approximately ten lines of code and works smoothly, as demonstrated in this demo. However, I encountered an issue when attempting to add new text that should also trigger t ...

javascriptjqueryhtmlcsstooltip