Repairing the hover effect on the navigation bar

Having created my very own WordPress theme, I've encountered a problem that needs solving.

The issue lies with the navigation bar, which currently has a border-radius of '8px 8px 8px 8px / 8px 8px 8px 8px'. Whenever I hover over the navigation, I wish to change the border-radius to '8px 8px 8px 8px / 8px 8px 8px 8px', but I'm not seeing any changes take effect.

I've experimented with various solutions, but so far I haven't been able to figure out how to rectify this particular issue.

If anyone is able to provide assistance, you can view my code on Fiddle link.

htmlcss

Answer №1

Check out this demonstration on JSFiddle

#cssmenu ul li:hover {
    border-radius: 8px 8px 8px 8px / 8px 8px 8px 8px !important;
}

By adding this code, you will achieve the desired outcome.

Answer №2

revise to:

#navmenu ul li:hover,
#navmenu ul li.active {
  background: #2d78b2;

/* Previous versions */

}

replace with:

#navmenu ul li:hover:nth-child(1),
#navmenu ul li.active {
background: #2d78b2;
border-radius: 8px 0px 0px 8px !important;
/* Previous versions */

}

#navmenu ul li:hover,
#navmenu ul li.active {
  background: #2d78b2;
border-radius: 0px 0px 0px 0px;
/* Previous versions */

}

http://jsfiddle.net/TJe8w/2/

Answer №3

Don't forget to include border-radius for your li elements. Make sure to add the following css code:

#cssmenu ul li{border-radius: 8px;}

If you want to see it in action, feel free to check out this example.

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 the groupby attribute in React-widget Dropdownlist

I am struggling to implement the react-widgets dropdownlist with groupby attribute using a different data structure. Instead of the typical example provided in the documentation, my data array is structured like this: [ { name:'test one' ...

htmlreactjsdrop-down-menu

Unusual symbols in HTML code

While working on a website project that utilizes a web font running on Apache, I encountered an issue specifically on Google Chrome for Android. The text displayed weird characters between existing characters, and initially I thought it was related to enco ...

htmlapache

Tips for saving Web page changes permanently

After tweaking the background color and fonts on a website, I want these changes to stick for future visits. However, every time I refresh the site, it reverts back to its original design. Is there a way to make these modifications permanent, whether usin ...

htmlgoogle-chromesafari

Having trouble getting the Bootstrap tooltip to work on a Select option?

Is there a way to have a tooltip displayed for each option in the select box? <select ng-model="rightList" class="form-control" size="13" multiple> <option ng-repeat="item in selectedList" value="{{$ ...

javascripthtmlangularjstwitter-bootstraptwitter-bootstrap-tooltip

Enabling the submit button only when text is entered in the text fields using jQuery

I have a script that automatically submits a form when two textfields are filled using variables from local storage. The script checks if the variables for email and password are not null before submitting. if (localEmail != null && localPwd != null) { ...

javascriptjqueryhtml

I am experiencing issues with md-no-focus-style not functioning correctly in my configuration

I have a button that triggers the opening of my navigation bar: https://i.sstatic.net/nMr0i.jpg When I click on it, a hitmarker appears: https://i.sstatic.net/OLQaE.jpg The issue is that even after clicking on a navigation item and transitioning to the ...

htmlcssangularjsangular-material

Is it possible to dynamically adjust the size of the CircleProgressComponent element in ng-circle-progress?

For my current Angular 11 project, I am facing the challenge of dynamically changing the size of the ng-circle-progress library's CircleProgressComponent element. After some research, I discovered that the element's size can be adjusted by apply ...

cssangulartypescript

Modifying a string in PHP before inserting it into a database

I am looking to save a method for performing a specific task in a database field. However, I want to store this method as a string including HTML tags. For instance, the following list should be included: <ul> <li>List item</li> <li&g ...

phphtml

Steps to bring life to your JavaScript counter animation

I need to slow down the counting of values in JavaScript from 0 to 100, so that it takes 3 seconds instead of happening instantly. Can anyone help me with this? <span><span id="counter"> </span> of 100 files</span> <s ...

javascripthtml

Struggling to follow the placement of elements within the treeview component

I have successfully implemented a method to track the positions of Div elements on my webpage. However, I am facing an issue with keeping track of the position of a div within a modal popup extender that contains a TreeView. The position is always reset to ...

c#asp.nethtmlajaxmodalpopupextender

A guide to automatically playing audio on a webpage using HTML and JavaScript

I'm currently in the process of developing a quiz application, and my goal is to have a sound play when a user enters the webpage to initiate the quiz. Initially, I attempted to use JavaScript to trigger the sound on page load, but unfortunately, the ...

javascripthtmljqueryaudio

Looking to implement a condition that prevents the echoing of HTML code when a certain template ID is selected?

Struggling with inherited PHP MVC code for a website, I encounter an issue on a specific page where unwanted code is echoed out. To prevent this, I aim to skip the echoing when a specific templateID (which I set as default) is selected. However, I'm u ...

phphtmlsql

Using JQuery and CSS to handle multiple hyperlink links with a single action

UPDATE: Issue resolved, thanks for the help. It is working fine now: http://jsfiddle.net/c3AeN/1/ by Sudharsan I have multiple links on my webpage, all in a similar format like this: note: When I say 'similar format', I mean that all links share ...

javascriptjqueryhtmlcss

Transform your standard HTML form code into a condensed single-line embed code

I've devoted countless hours to finding a resolution for this issue. It's most likely simple, but alas, I haven't found it yet. My current project involves creating my own HTML forms using HTML and CSS, along with a touch of JavaScript. In ...

html

Having difficulty retrieving the Area and Range information in ChartJS

I am new to working with HTML5 and ChartJS. I have noticed two different types of declarations when attaching JS Chart Versions 1.0.1 and 2.1.1. Can you please provide some insight into this? Additionally, I am facing an issue where the stripes behind the ...

javascripthtml

"Step-by-step guide to show a calendar in a popup window

I am having trouble with displaying the calendar on a popup. I have created the popup and want to show the calendar within it. I've tried implementing the code but the calendar is not showing up. Any assistance would be greatly appreciated. Please che ...

javascriptjquerycsshtml

The dropdown menu displaying the img-dropdown-content with a display set to none is not functioning as anticipated

Attempting to hide drop down menu with img-dropdown-content but it's not working, possibly being overridden by another element - only using html and css I have experimented with visibility: hidden; both with and without !important as well as display: ...

htmlcss

What could be causing the target to malfunction in this situation?

Initially, I create an index page with frames named after popular websites such as NASA, Google, YouTube, etc. Then, on the search page, <input id="main_category_lan1" value="test" /> <a href="javascript:void(0)" onmouseover=" window.open ...

javascripthtml

Managing the vertical positioning of grid items: tips and tricks

Is there a way to make the hexagons in my grid responsive to the layout, so that their height and width remain fixed relative to their container? Currently, they are overflowing from the grid container as shown in this jsfiddle: https://jsfiddle.net/gv5wc1 ...

htmlcsscss-grid

How to iterate and apply styles to properties of objects in an array using Vue.js?

Currently, I am working with Vue.JS and facing some challenges while outputting data using the v-for loop. My objective is to repeat a 'base' item with unique information. You can refer to the image below for better understanding. https://i.ssta ...

javascripthtmlfor-loopwebvue.js