Different position of navigation list-style visible in Chrome browser

Currently, I am working on a website where the main menu navigation is designed using the list-style property to separate each menu item. In Firefox, everything appears as intended with small circles between each menu item. However, when viewed in Chrome, the circles seem to be positioned behind the menu items themselves. I'm unsure if this issue is related to my styling choices or potentially a bug specific to Chrome.

To access the site, please click on the following link:

While I won't include all of my CSS code due to it being part of a Joomla template and thus quite lengthy, here is the additional CSS that may be relevant:

#menubar {
    height: 25px;
}
.menu, .menu ul {
    list-style: circle outside none;
    margin-left: 20px;
}
.menu-dropdown li.level1 {
    height: 18px;
    padding: 0 32px 0 15px;
}
.menu-dropdown a.level1 > span, .menu-dropdown span.level1 > span {
    line-height: 25px;
}
.menu-dropdown li.level2 {
    list-style: none outside none;
}

If providing a link to the main menu.css file would be helpful, I can certainly do so. Any guidance or advice on how to resolve this issue would be greatly appreciated, as I am currently struggling to understand why this discrepancy is occurring.

cssmenu

Answer №1

I experimented with "developer tools" in my browser.

Simply add float:left; to your menu-dropdown li :

.menu-dropdown li{
position:relative;
float:left;
}

Then remove the following:

.menu-dropdown, .menu-dropdown .level1, .menu-dropdown .level1 > span{
float:left; <-- delete this
}

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

First video filling the entire screen with no black bars

I am looking to implement a video tag that can occupy the entire window, centered, without distorting the aspect ratio. Additionally, I want this video tag/container to push down all other content below it. When the window is resized, I would like the vid ...

htmlcssvideo

Content in Slider Exceeding Container Bounds

After successfully creating a slider using jQuery with the help of some Stack Overflow users, everything was working perfectly. However, when attempting to change the layout of the slider, it somehow broke and now all slides are being pushed out of the con ...

jqueryhtmlcss

Using Bootstrap and CSS to style a div element and fill it

I'm struggling with a div that splits in two, where I've placed an image on the left side. However, the image doesn't seem to fill the entire space and there are empty spaces on the sides. I'm using bootstrap, but any CSS solution would ...

htmlcssbootstrap-4

Using jQuery to submit data via POST method without having the page reload

I have a link in the footer that, when clicked, jumps to the header with a # in the address bar. Is there a way to prevent this and stay in the footer? Here is the code snippet: <a href="#" class="clickIn" id="1" attrIn="Like"><span style="color ...

javascriptjquerycssajax

Leveraging Vue properties within CSS styling

I am looking to utilize Vue data/prop variables within the <style> tag located at the bottom of my component. For example, suppose I have a component structured like this: <template> <div class="cl"></div> </template> < ...

javascripthtmlcssvue.js

The CSS styles for a React component in Rollup are not being incorporated into the server-side rendering document in NextJS

I recently created a small npm package that exports a single component. The component is styled using SCSS modules and bundled with Rollup. Everything appeared to be working well until I imported it into a NextJS project, where I noticed that the styles ar ...

cssreactjsnext.jsrollup

Is there a way to remove background-color for a:focus?

When working with Twitter Bootstrap, I encountered a challenge. The background-color properties set for navigation items on the :focus state were causing an issue for a specific navigation element that needed have its own styling. Imagine a scenario where ...

csstwitter-bootstrap

What is the best way to achieve a perfect rounded div using Bootstrap 4?

While browsing through the Bootstrap documentation and searching on stackoverflow, I came across a solution to create circular images using border-radius set at 50%. However, when I tried implementing it with my slightly oversized image, it ended up lookin ...

htmlcssreactjs

Utilize CSS to display line breaks within a browser output

If I wrap text in a <pre> element, line breaks will be displayed in the browser without needing to use <br/> tags. Can this same effect be achieved by utilizing CSS with a <div> element? ...

css

Apply a specific style conditionally using Angular's ng-repeat directive

Currently, I am utilizing ng-repeat to iterate through a list of divs and manually adding items to the JSON that is rendering these divs. My goal is to position the last div that I add in the JSON at the location where the mouse cursor is, while keeping th ...

javascriptjqueryhtmlcssangularjs

Clickable table cell with interactive space extending below the text

This adaptation was inspired by the response of James Donnelly to a query about how to create a clickable link in a TD element. While his solution is effective in many cases, I encountered a scenario where it falls short. To illustrate this issue, here is ...

htmlcss

What is the best way to add conditional styling to the home page item button in a React application?

Utilizing react alongside Material UI to display a navigation bar, I am attempting to dynamically apply styles to the selected menu item based on the URL. To achieve this, I make use of useLocation hook to retrieve the current URL: import { Link, useLocati ...

reactjsmenumaterial-uireact-router-dom

Prevent vertical scrolling on touch devices when using the Owl Carousel plugin

Is there a way to prevent vertical scrolling on Owl Carousel when dragging it horizontally on touch devices? It currently allows for up and down movement, causing the whole page to jiggle. If anyone has a solution, I can share the JavaScript file. Appreci ...

javascriptjqueryhtmlcss

Utilizing jQuery to add a class to an element when a different one is hovered above

I'm currently working on implementing effects on the edges of a webpage that will be triggered when a central div is hovered over. The main tool I'm using for this task is jQuery. Despite my efforts to diagnose the issue by using alerts in my Ja ...

javascriptjqueryhtmlcss

Do you require assistance with creating an image slideshow?

My first day working with HTML was a success as I successfully built a navigation bar that looks pretty cool. Take a look at it here. Next on my list is to incorporate a slideshow into my site, possibly using JavaScript or jQuery plugins. I'm aiming ...

javascriptjqueryhtmlcssplugins

How come my navigation item isn't positioned at the top of the window?

I'm facing an issue while trying to add a navbar with a navbar-brand to my website. It seems like the image I have included is causing the nav-items to not align properly at the top of the window. Here is a snapshot of the problem: https://i.sstatic.n ...

htmlcssbootstrap-4

Clear backdrop with solid objects

I am trying to achieve a unique design where the body has an image background, and the main div has a semitransparent background. I want the image to be visible through the main div, but in a shaded manner. However, the traditional approach may cause every ...

htmlcssbackgroundopacity

How to use a loop to alternate CSS classes in HTML?

Here is a sample code using a while loop: while($fetch = $stm->fetchAll()) { echo '<tr class=""'>; echo '<td>' . $fetch['name'] . '</td>'; echo '</tr>'; } I want to ...

phpcss

The CSS attribute selector is unable to target dynamically appended class names

Utilizing React's CSS animations add-on has been a seamless process, with everything running smoothly when using the provided classnames. .quote-enter { opacity: 0.01; transition: opacity .25s ease-in; } .quote-enter.quote-enter-active { opaci ...

csscss-selectors

What steps should I take to fix my responsive media query?

I am currently working on fixing some responsive issues on my WordPress website. Previously, in mobile view, it looked like this: https://i.stack.imgur.com/vpvHy.jpg After adding the following code to the CSS of my child theme: @media only screen a ...

cssresponsive