Get rid of the drop-down shadow effect

Currently working on a website project for a client and looking to remove the blue "shadow" effect from the dropdown menus. I believe the code that needs editing is as shown below:

.main_nav ul.sub-menu {
    position: absolute;
    top: 65px;
    width: auto;
    min-width: 150px;
    z-index: 9999;
    list-style-type: none;
    float: right;
    left: 0;
    display: none;
    visibility: hidden;
    height: 0;
    opacity: 0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

Can you provide guidance on how to achieve this? Visit for reference.

cssmenushadow

Answer №1

Simply remove the following lines from your css code:

.main_nav li:hover a, .link-active, .current-menu-item a {
    box-shadow: 0px -5px 0px rgba(255, 255, 255, 0.3) inset, 0px 2px 0px rgba(255, 255, 255, 0.2) inset;
}

Also, eliminate the background definition here:

.skill_set, .soft_skill span, .submit_button, .main_nav li:hover a, .link-active, .current-menu-item a, .main_nav ul.sub-menu, .button, #submit, .wpcf7-submit, .post .date, .tags a, .entry-footer li a:hover, .post-content .wp-caption, .comment .comment-meta .comment-reply-link:hover, #searchsubmit {
    background: none repeat scroll 0% 0% #34799E;
}

Answer №2

To eliminate the box shadow effect, simply add box-shadow:none to your .main_nav li:hover a styles

.main_nav li:hover a, .link-active, .current-menu-item a{
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

If you wish to get rid of the blue background color, you can use the following style

.main_nav li:hover a, .link-active, .current-menu-item a{
   background-color: rgba(255,255,255,0);  // this will remove the blue background and create a transparent background
}

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

The button component is unresponsive

An app was developed with a component containing signin and signup buttons on the right side. However, there is an issue where the Sign up button is not clickable. Below is the code snippet for the component => import React from "react"; expo ...

cssreactjsbuttonclickable

How can I modify the navbar-collapse in Bootstrap to alter the background color of the entire navbar when it is shown or open on a mobile screen?

Can anyone tell me how to change the background color of the navbar when the navbar-collapse is displayed? I want one background color when the navbar-collapse is shown and a different color when it's collapsed. Is there a way to achieve this using C ...

htmlcsstwitter-bootstrapresponsive-designnavbar

The sidebar appears to be hovering above the footer section

I am currently working on creating a sidebar that sometimes ends up being longer than the main content section. You can check out my demo here: http://jsfiddle.net/y9hp4evy/1/ and another case here: http://jsfiddle.net/y9hp4evy/2/ (If I add a height to th ...

htmlcss

Place the background image of the parent element relative to the child element

I am struggling to position the background image of <body> relative to one specific child <div>. <body> <div>content</div> <-- place background image of body relative to this div <div>other content</ ...

cssbackground-imagebootstrap-5

Design a dynamic top navigation bar in Angular or any other framework that automatically adjusts to the size of the screen, similar to the responsive bookmarks bar in

Could you offer guidance or suggestions on how to design a navigation bar (using Angular 1, jQuery, CSS, etc) that emulates the functionality of Google Chrome bookmarks bar when resizing the page? Essentially, as the page size decreases, a new button/symbo ...

javascriptjqueryhtmlcssangularjs

What is the most effective method to arrange absolute divs generated randomly in a grid-like formation?

Hey there! I'm facing an intriguing challenge with my app. It's designed to generate a variable number of divs which are always in absolute positioning. Unfortunately, making them relative is not an option due to some other factors within the app ...

javascripthtmlcss

Strangely odd actions from a JavaScript timepiece

After answering a question, I encountered a problem with my JavaScript clock that displays the day, time, and date on three lines. To make sure these lines have the same width, I used the BigText plugin, which works well except for one issue. tday=new A ...

javascriptjqueryhtmlcss

Creating visually appealing tables with nested tables using CSS for styling including borders and backgrounds

Looking to create webpages that have a variety of tables, including a main table with a header (marked 2 on the picture) and several data tables for the user (marked 1 on the picture). To style these specific data tables, I've added some custom CSS: . ...

htmlcss

Add a unique shape to the CSS clip property

Recently, I've been delving into the clip property of CSS and its ability to apply a rectangle or square object. Despite my research efforts, I haven't come across a clear answer to my question. Can you actually use a customized shape with the c ...

csscustomizationcss-shapesmaskingclip

Pop-up message on card selection using JavaScript, CSS, and PHP

I have a total of 6 cards displayed in my HTML. Each card, when clicked, should trigger a modal window to pop up (with additional information corresponding to that specific card). After spending a day searching for a solution online, I've come here s ...

javascripthtmlcss

What is the best way to arrange flex elements in distinct columns for stacking?

Recently, I utilized the flex property along with flex-flow: column nowrap to showcase my elements. Take a quick look at what my elements currently resemble: [this] It's quite apparent that simply stacking both columns on top of each other won't ...

javascripthtmlcssajaxflexbox

Creating a CSS grid layout with dual columns to dynamically adjust and accommodate two items in each row

I am attempting to create this layout using CSS grid: The goal is to have an input and a textarea. The textarea should be of the size of 2 inputs. If there is already a textarea in the previous column, the next column should accommodate 2 inputs. The numb ...

csscss-grid

Aligning text in the middle of two divs within a header

Screenshot Is there a way to keep the h4 text centered between two divs? I want it to stay static regardless of screen resolution. Currently, the icon and form remain in place but the h4 text moves. How can I ensure that it stays in one spot? <!doctyp ...

htmlcss

Creating a menu bar in jQuery that functions similarly to tabs, but without the need to change divs

Currently, I am exploring ways to create tab functionality similar to jQuery's tabs plugin but without the need to switch between DIVs. Essentially, I am looking for a jQuery plugin that solely handles rendering the tab bar and allows me to designate ...

jquerycss

What is the best way to incorporate quotes within inline CSS code?

Can anyone help me with inserting the following CSS into HTML? Here is the CSS snippet that needs to be converted to HTML: .group .circular-progress::before { ... content: "10%"; ... } This is what I have attempted so far: <div class="group"&g ...

htmlcssruby-on-railsruby

What is the best way to ensure the footer is always positioned at the bottom of each page

Hey there, I'm having an issue with printing a large table on my HTML page. I want the footer to appear at the very bottom of every printed page, but so far I haven't found a perfect solution. I came across using tfoot, which prints the footer at ...

htmlcssprinting

Is the main content positioned below the sidebar on smaller screens?

In order to achieve a 250px col-2 sidebar with a col-10 main body that collapses into a top navbar and main content beneath it, my goal is set. However, I am facing an issue where the main content body goes underneath the sidebar when the screen size cha ...

htmlcssreactjstwitter-bootstrapbootstrap-5

Padding for the initial element in a carousel display

I am currently working on implementing owl carousel with stage padding. My goal is to use the carousel with loop:false, and have the first item displayed without left padding, while maintaining consistent padding for both items on the left and right after ...

javascriptjqueryhtmlcss

Preserve page configurations upon page refresh

I'm currently in the process of creating a 'user settings' form. Each list item represents a different section, such as Updating username, Updating email, and Changing password. It looks something like this: <li> <header>Ti ...

javascriptphpjqueryhtmlcss

Dynamic CSS Changes in AngularJS Animations

I am currently working on a multi-stage web form using AngularJS. You can see an example of this form in action by visiting the link below: http://codepen.io/kwakwak/full/kvEig When clicking the "Next" button, the form slides to the right smoothly. Howev ...

javascriptcssangularjs