What could be causing my CSS menu to occasionally display incorrectly?

I'm currently facing a challenge with the main menu on my website.

Occasionally, about 1 out of every 10 times, the menu fails to load correctly.

Please see the images below for comparison!

This is how the menu is intended to appear:

...and this is how the menu actually appears at times:

ul.menu {
    font-size: 1.21em;
    color: #333333;
    padding: 0;
    margin: 0;
    padding-top: 29px;
    height: 100%;
    font-weight: 600;
    width: auto;
    float: right;
}
li.menu {
    list-style-type: none;
    padding-left: 26px;
    text-decoration: none;
    width: auto;
    float: left;
}
li:hover.menu { 
    text-decoration: underline;
}

HTML

<ul class="menu">
    <li class="menu"><a href="page_1.html" class="menu">PAGE 1</a></li>
    <li class="menu"><a href="page_2.html" class="menu">PAGE 2</a></li>
    <li class="menu"><a href="page_3.html" class="menu">PAGE 3</a></li>
</ul>
htmlcss

Answer №1

In the HTML code, your class is 'top_menu' but in the CSS it's 'menu'. Additionally, make sure to include:

display:inline-block;
vertical-align:top;

for the menu class since li is not inline by default.

Also, remember to remove:

float:left;

Answer №2

Your inquiry lacks specificity. Are you aiming for your menu to align all the way to the right of the page? This is essentially achieved by your current implementation of float:right/left; properties.

If this is not your desired outcome, or if you seek more precise control over the styling of your menu items, it is advisable to switch out float: right; and float: left; with display: inline; or display:inline-block; (both will create the in-line style you desire, with the latter offering more padding on top and elsewhere).

An additional issue lies in your li:hover.menu selector code, which currently serves no purpose; as text-decoration: underline; is already the default behavior for links upon hover. To achieve your intended effect of text-decoration: none; on links until hovered over, some adjustments to your selectors are necessary. Presently, your text-decoration: none; property targets the li elements but not their children (the a elements). I have rectified this in the provided CSS below.

Modified CSS:

ul.menu {
    font-size: 1.21em;
    color: #333333;
    padding: 0;
    margin: 0;
    padding-top: 29px;
    height: 100%;
    font-weight: 600;
    width: auto;
    display: inline-block;
}
li.menu {
    list-style-type: none;
    padding-left: 26px;
    text-decoration: none;
    display: inline-block;
}

li.menu>a {
    text-decoration: none;
    color: #333333;
}

li:hover.menu { 
    text-decoration: underline;
}

JSFiddle

In any case, unless a fixed width is specified for your menu div, the links will always stack vertically when the viewport is insufficient to showcase them side by side.

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

A guide on implementing CSS and Styling in a React component

Struggling to style my React.js file that was converted from a standard web page. I have the original CSS but unsure how to use React for proper styling. Any assistance is welcomed! var NavBar = React.createClass({ render: function() { return ( ...

htmlcssreactjs

Positioning the comments box on Facebook platform allows users to

Need assistance, I recently integrated the Facebook comments box into my Arabic website, but I am facing an issue where the position of the box keeps moving to the left. Here is an example of my website: Could someone please suggest a solution to fix the ...

javascriptcssfacebookfacebook-comments

Simple Easyui design featuring collapsible regions

I'm currently working on a frontend application and I've decided to utilize the Easyui library to help with managing the page layout. One particular section of code is causing me some trouble: <div id="stgis-app" class="stgis stgis-content e ...

javascriptjquerycssjquery-easyui

Sleek CSS3 Slide Menu - Smooth Transition to Top when Sliding

I have been experimenting with a CSS-only slide menu. Essentially, I set the nav menu position to fixed with top: 0 and right:-200 using radio buttons for control. <input type="radio" id="nav-expand" name="nav" /> <input type="radio" id="nav-col ...

htmlcss

Discover the closest location using geolocation technology

My collection includes various national parks like Alcatraz Island, Death Valley, and Biscayne, each with their respective coordinates. Is there an efficient method to determine the closest park from my database based on the user's current location, ...

phphtmlmysqlgeolocation

Is it possible to execute a PHP script within a .css file and ensure it functions correctly?

Recently, I've been making some changes to the .css file in order to get my PHP codes to work. However, when I insert them as usual, they appear as regular text. I'm curious to find out if it's possible to execute a PHP file within a .css fi ...

phpcss

Guidelines for transforming an HTML string into a JavaScript document

Is there a simplified method to transform an HTML string into JavaScript code that generates the same markup using the DOM? Something similar to: Input <div class="foo" tabindex="4"> bar <button title="baz">bar ...

javascripthtmldom

Guide to taking a screenshot of an HTML page using Javascript, Jquery, and HTML5 functionality

I am looking to add a unique feature to my website - the ability to capture the current image of my webpage with just the click of a button. Inspired by Google's "send feedback" function, I want to implement something similar on my own site. After res ...

javascriptjqueryhtml

Angular backslash is encoded

Experiencing the same issue as this individual: angularjs-slash-after-hashbang-gets-encoded The URL is getting encoded and not routing correctly, causing it to fall to the otherwise in my route config. I have not been able to identify the root cause yet, ...

javascripthtmlangularjsurl-rewriting

Responsive Line Breaks in Bootstrap 4

I can't seem to find any information in the documentation to guide me in the right direction here. I'm hesitant to use columns as it could result in gaps between the text. Currently, I have the date displayed at the top of my website like this u ...

htmlcsstwitter-bootstrapbootstrap-4

Using JavaScript to insert a value through AJAX

I'm currently working on a website that displays the value of a .TXT file, and here is the progress I've made so far: <script> $(document).ready(function() { $("#responsecontainer").load("info.txt"); var refreshId = setInterval(function( ...

javascriptjqueryhtmlajax

"Experiencing a callstack overflow due to multiple carousels on one page using Jquery or Vanilla

Currently, I am working on implementing a Jquery infinite autoplay multiple carousel. What I have done is created two separate carousel blocks on the same page within the body section. <div class="rotating_block"> <div class="bl ...

javascripthtmljquerycsscarousel

What is the best way to access a specific element within a component from a different component?

Seeking assistance with communication issues between React components. I have a Container component containing child components Contact, More, and About for a single-page website. Each child component has a reference set. The problem arises when trying to ...

javascripthtmlreactjs

Error encountered in Flatpickr NextJS+TS application: Uncaught DOMException - accessing CSSStyleSheet.cssRules getter is not permitted for cross-origin stylesheet

After successfully integrating Flatpickr into my project, I encountered an issue when testing in mobile view. When trying to open the calendar by clicking on the input field, I received the following error: Uncaught DOMException: CSSStyleSheet.cssRules get ...

cssnext.jsflatpickrdomexception

Tips for stopping a browser from automatically opening a new page when a form is submitted

On a webpage, there is a form for email subscription. When a user enters their email and clicks the submit button, we do not want the page to redirect to a specific URL. Instead, we simply want the text value of the submit button to change to something lik ...

javascriptjqueryhtmlajaxforms

Passport and Node.js team up to create powerful user group functionalities

Seeking advice on this topic. I am interested in setting up a page with a login form as the main page. Upon logging in, users would be directed to their personalized dashboard. However, if someone logs in with admin privileges, they should be redirected t ...

htmlnode.jsexpresspassport.jspassport-local

html - displaying a new page within the content of the current page

I have a question about basic HTML knowledge that I find embarrassing Is it possible to open or load a second page within my first page? I want a menu button that will load the second page. <li class="current"><a href="first.html" target = "myC ...

htmlcss

Using a combination of radio buttons and JavaScript to adjust the color of a div element

Currently, I am experimenting with radio buttons to modify the background color of my div tag. My goal is to incorporate more than one condition. For example, if button A and button B are both clicked, then change the color to green. This is what I have im ...

javascripthtmlradio-button

position the next and previous buttons of the bootstrap carousel to be located outside of the images

I am currently using a bootstrap carousel with the following code: <div class="slider-main-container d-block"> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> ...

htmlcssbootstrap-4carousel

Utilizing the webpack CSS loader in combination with Reason-React

I am having difficulties setting up webpack for my reason app. I successfully installed webpack using this command : npm install --save-dev webpack I also installed style-loader and css-loader using this command : npm install --save-dev style-loader ...

csswebpackreasonreason-react