Troubleshooting problems with CSS menus and submenus, along with addressing browser pixel issues specific to Web

Find my custom css menu here: Custom CSS Menu

On hovering over "about us", the "our clergy" sub-menu appears automatically. I need it to show only when hovering over "our clergy".

This screenshot is from Firefox, but webkit browsers like Chrome show a slight 1-2px difference as shown below. The inconsistency sometimes affects the functionality of the menu.

Here is the CSS code for the menu (WordPress does not use HTML):

Feel free to assist in fixing this issue and optimizing the CSS if needed!

#navbar {
height: 40px;
padding-left: 10px;
margin-left:-10px;
margin-top: -29px;
margin-bottom:0;
background: #F4DE9F;
width:930px;
/*backgroundborder-top: 2px solid #F4DE9F;
border-bottom: 2px solid #F4DE9F;*/
}

#navbar li {
float: left;
list-style: none;
margin-bottom: 30px;
margin-left:-20px;
}
#navbar li a {
font-family: "MuseoSans_500";
color: #3C290B;
font-weight: 500;
text-transform: uppercase;
}
#navbar li:hover {
background:rgba(255, 241, 194, 100); /*#FFF1C2;*/
color: #645548;
text-decoration: none;
}
#navbar li a:hover {
background:rgba(255, 241, 194, 100); /*#FFF1C2;*/
color: #645548;
text-decoration: none;
}
#navbar .parent > a, #navbar .parent > a:hover {
background: #F4DE9F;
background-position: right;
background-repeat: no-repeat;
}
#navbar ul, #navbar ul li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}
#navbar ul li a {
display: inline-block;
padding: 11px 16.2px 8px;
text-decoration: none;
}

/*
#navbar ul li a:hover {
}
#navbar ul #first a:hover {
}*/

#navbar ul li {
position: relative;
}
#navbar li ul {
display: none;
left: 11px;
position: absolute;
top: 51px;
}
#navbar li ul a {
background: #F4DE9F;
}
#navbar ul ul ul li {
}
#navbar ul li:hover ul {
display: inline-block;
}
#navbar ul li:hover ul, #navbar ul ul li:hover ul, #navbar ul ul ul li:hover ul {
display: block;
margin: -11px 0 0 -11px;
}
/*#navbar ul li:hover ul li a, #navbar ul ul li:hover ul li a, #navbar ul ul ul li:hover ul li a {
display: block;
}*/
#navbar ul li:hover ul ul, #navbar ul ul li:hover ul ul {
margin-top: -50px;
margin-left:129px;
}

#navbar ul li:hover ul li a {
padding: 10px 14px 8px;
width: 112px;
}

#navbar ul li:hover ul ul li a {
padding: 10px 14px 8px;
width: 112px;
}
/*#navbar ul ul ul li:hover ul li a {
padding: 0 16px 0 24px;
width: 140px;
}*/
#navbar .children li a:hover {
color: #000;
}
wordpressmenucss

Answer №1

When faced with a bulky stylesheet filled with complex rules and high specificity, like #navbar ul ul ul li:hover ul, it's beneficial to pause and consider simplifying the rules.

Fortunately, Wordpress provides convenient classes that can streamline your work. For instance, you can utilize .menu-item and .sub-menu in this scenario.

By updating the menu-css with the styles below, you can address the issues detailed in your query. This solution has been tested in Chrome 23, Safari 6, and Firefox 16.

See an example here: http://jsfiddle.net/5qEwH/

.menu-item {
    display: inline-block;
    position: relative;
    font-family: "MuseoSans_500";
    font-weight: 500;
    text-transform: uppercase;
    background: #F4DE9F;
}

.menu-item:hover {
    background: #FFF1C2;
}

.menu-item a {
    display: inline-block;
    height: 20px;
    padding: 10px;
    text-decoration: none;
    color: #645548;
}
/* Hide submenus by default */
.sub-menu {
    display: none;
    position: absolute;
    width: 150px;
    top: 40px;
}

.sub-menu .menu-item {
    width: 100%;
}
/* The second level sub-menu should be moved to the right */
.sub-menu .menu-item > .sub-menu {
    top: 0;
    left: 150px;
}

/* Show submenus on hover */
.menu-item:hover > .sub-menu {
    display: block;
}

Answer №2

Normalizing your CSS styles at the beginning of a stylesheet is a good practice to ensure consistent styling across different browsers for basic HTML elements.

I usually include the following code snippet at the start of my Stylesheet:

* { margin: 0px; padding: 0px; border: 0px; text-decoration: none }

There is also a comprehensive normalization stylesheet available that caters to all browsers, including HTML5. It's recommended to include this before your style.css file. Here is the link to the file:

If you are facing issues with hover effects, you can try making the following CSS changes:

Replace:

#navbar ul li:hover ul {
     display: inline-block;
}

#navbar ul li:hover ul, #navbar ul ul li:hover ul, #navbar ul ul ul li:hover ul {
    display: block;
    margin: -11px 0 0 -11px;
}

With:

#navbar ul li:hover > ul {
     display: inline-block;
}

#navbar ul li:hover > ul, #navbar ul ul li:hover > ul, #navbar ul ul ul li:hover > ul {
    display: block;
    margin: -11px 0 0 -11px;
}

I hope this information proves helpful :)

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

Expanding the width of CSS dropdown menus according to their content

When attempting to create a dynamic dropdown menu, I encountered an issue where the values were skewed in Internet Explorer if they exceeded the width of the dropdown. To fix this problem, I added select:hover{width:auto;position:absolute}. However, now th ...

javascripthtmlcssdrop-down-menu

Leveraging icons with Bootstrap 4.5

I am currently exploring how to incorporate Bootstrap 4.5 icons using CSS. Do you have any examples of code that could guide me on how to achieve this? I am specifically interested in understanding the required CSS declarations that would allow me to use t ...

javascriptcssbootstrap-4icons

Unable to insert flag image into the <option> tag

Struggling to add a flag image to the options using any method (html,css)! <select> <option value="rus" selected>Rus</option> <option value="Uzb" >Uzb</option> <option value="eng">Eng</option> </s ...

htmlcss

Anomaly in Form Validation with Semantic-UI

This time around, I am implementing Semantic-UI with React. In the past, I have successfully utilized Semantic-UI's form and form validation features in various projects without encountering any issues. However, a new problem has arisen, which I will ...

javascriptjquerycsssemantic-ui

Switching between different CSS files based on the URL using jQuery or another method

Is it feasible to apply specific styles based on the ID or load various CSS files depending on the URL you are visiting? For example: <script> if(location.href == 'http://jpftest2.tumblr.com/about'){ document.write('<style type= ...

javascriptjqueryhtmlcss

What is the best way to ensure that child elements within a container div are centered when scrolling left and right?

When attempting to handle the 'scroll' event, I noticed that the callback function only records the position of the div as the last position. I am looking for a way to determine if the div is in the center, which is my target. const slide = ...

javascripthtmlcss

What is the best way to showcase top-rated posts from my feed of posts?

I have a basic PHP script that allows users to post without logging in. Once they submit their posts, the posts are displayed below in a feed similar to Facebook's news feed. I'm now looking to extract the three most liked posts and display them ...

javascriptphphtmlcssmysql

Maintaining checked items in their original state while searching for another one in ion-searchbar can be achieved by properly handling

My goal is to maintain the checked items as checked when searching for another item in ion-searchbar. While I have managed to keep the checked items, the checkmark icon does not stay checked. What I aim for is to retain the checked state of all food items ...

javascripthtmlcssangularionic-framework

Insert the link to the error log (WordPress, Nginx, PHP7)

It is my goal to include the URL for each error recorded by PHP and Nginx. The error log specifies the script in question, which is used for various URLs with distinct data sources (remote APIs). I suspect that this error is related to specific data from ...

phpwordpressnginxloggingerror-handling

Eliminate the cushioning on a single item

I'm currently working on a website and running into a small issue. The main page has a background with a white body in the center, containing padding for the text to prevent it from being right at the border. #content { width: 900px; overflow: h ...

htmlcssbordergallerypadding

Apply a class to a div element when the WooCommerce cart is devoid of any items

Is there a way to apply a class or style to an element that displays the cart count only when the cart is empty? Currently, I have the following code in my header.php file which shows the cart count correctly, but does not update the color: header.php ( ...

phpcsswordpresswoocommercecart

"Using jQuery to append a new div after the last div that matches a specified class on

I am looking to dynamically add a new div element at the end of the last match on click. <form id="form"> <div class="border item-block"> <p><b>Color :</b> silver </p> <input type= ...

jqueryhtmlcss

Two entities positioned on opposite extremes

Is there a way to design a div with two elements (text and image) positioned on opposite sides? The length of the text varies as it's a list of months for selection. Ideally, the text should appear on the left side of the div as a "p" element, while t ...

javascripthtmlcssimageelement

What is the best way to format MarkDown content within a nextJs environment?

Markdown-it is successfully converting markdown to html in my Nextjs project. However, I am facing a styling issue with specific elements such as h2, h3, ul, and li. Here's the code snippet: <h1 className="text-3xl mb-3 leading-snug d ...

cssnext.jsmarkdown

Issue with JQuery addClass functionality in Firefox

I've come across numerous posts on this topic, but none of them have provided a solution. I recently added drag and drop functionality to my website. When I drag an item over a valid container, I add a specific class to it. Here is the HTML for the ...

javascriptjqueryhtmlcss

JavaScript/CSS memory matching game

Just starting out in the world of programming and attempting to create a memory game. I've designed 5 unique flags using CSS that I want to use in my game, but I'm feeling a bit stuck with where to go next. I understand that I need some function ...

javascriptcss

Error in JavaFX: CSS Parser anticipating COLON

Encountered an error and struggling to find the issue as everything seems right from my perspective: CSS Code: @font-face { font-family: 'Titillium'; font-style: normal; font-weight: normal; src: url('Titillium.ttf'); ...

javacssjavafx

My website's logo is not appearing on the navigation bar in the HTML code

Hi there! I recently tried adding a logo to my navigation bar in an HTML file, but for some reason, the logo doesn't appear when I run the file. I'm currently learning web development through a course on Coursera, and I am quite new to programmin ...

htmlcssbootstrap-5

Is there a way to adjust the time font size according to the dimensions of the time picker?

HTML and CSS .pickthetime { height: calc(var(--vh, 1vh) * 3); width: calc(var(--vw, 1vw) * 25); align-content: center; // center looks better, also tried left to stop it from breaking a new line on Safari on iOS font-weight: 300; } <input cla ...

javascripthtmljquerycssresponsive-design

Despite being correctly linked in EJS and without any errors, the CSS is still not loading

Hey there, I'm facing an issue with linking a CSS file to an EJS file. I believe that I am connecting them correctly: <head> <title>Acres & Karats Calculator</title> <base href="/"> <link type="text/css" href="css/Acres ...

cssnode.jsexpressejs