CSS: Experimenting with creating a hover effect that lifts the box upwards

Hey there! I'm currently working on adding a red hover box for my Menu. The issue I am facing is that the hover box is displaying below the menu line. I am attempting to adjust the hover box to move a bit higher or up. You can view the image here: https://i.sstatic.net/q16jo.jpg

CSS:

#menu ul a:hover{
     color:#ffffff;
     background-color: #F48A8A !important;
     border-color: #F48A8A!important;
     height:70px;
     padding-bottom:30px;
}

(I am currently learning CSS, so I'm not a pro at it yet. Any help would be greatly appreciated! :)

cssmenuhover

Answer №1

Give this a shot

delete:

height:70px;

...and insert:

display: block;

Answer №2

Consider removing both the height and padding-bottom

#menu ul a:hover{
     color:#ffffff;
     background-color: #F48A8A !important;
     border-color: #F48A8A!important;
     padding:5px /*to provide spacing around the text*/
}

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

Unable to show the table row color using Angular in Internet Explorer

I've customized a table by changing the row color based on a property value, and I'm using ng-repeat to display the rows. Here's my table: <table class="tab table span6 tabhover" style="margin:0;" > <thead> ...

cssangularjsinternet-explorerhtml-table

Unable to properly connect my CSS file to the header partial

I am struggling to include my CSS file in the header partial Here is the link I am using: <link rel="stylesheet" href="stylesheets/app.css"> This is what my directory structure looks like: project models node_modules public stylesh ...

javascripthtmlcss

CSS rule: The behavior of my specified property is not being implemented

I have inserted an image directly into my HTML code, which serves as a small profile picture. I am attempting to position this image in the top right corner of my website, but no matter what CSS property I apply, the image refuses to budge. body { fon ...

css

Choose a class and all its offspring as a selector

I possess the subsequent <label class="noblock"> <input> ... ... </label> Is there a method to indicate the CSS property display: inline for both the class noblock and its offspring (all elements within it)? ...

htmlcss

When the anchor tag is clicked, I'm displaying the DIV for Customer Testimonials, however, the expansion of its height is not

One way to display customer testimonials is by using flexslider to create a horizontal scroll. The testimonials are hidden and only shown when the "view all testimonials" link is clicked, which can be seen in this JSFiddle example: Working : Demo JQuery ...

javascriptjqueryhtmlcss

How to make the parent div adjust its height to fit the children [CSS]

I am facing an issue with my parent div's height when adding more children. Despite setting the height of the parent to auto or not specifying a height at all, it ends up with a random height that does not seem to match the sum of its children. Even i ...

htmlcss

Differences in rendering with Google Chrome when zooming in or out

After creating some code, I observed a peculiar issue. At 500% zoom, the DOWNLOAD button aligns perfectly with the left wall without any gap. However, upon reducing the zoom to 250%, a green background segment becomes visible. To witness this anomaly, refe ...

htmlcssgoogle-chromezooming

Ensuring the sort icon is constantly displayed in MudDataGrid

Is there a way to keep the sort icon visible at all times in mudgrid without any default sorting using mudblazor? I have implemented the advanced data grid from the following link:- I have attempted using sortable=true on both the column and datagrid but ...

c#htmlcssmudblazor

Apply CSS styles conditionally to an Angular component

Depending on the variable value, I want to change the style of the p-autocomplete component. A toggle input determines whether the variable is true or false. <div class="switch-inner"> <p [ngClass]="{'businessG': !toggle }" clas ...

htmlcssangulartypescriptprimeng

Different ways to position two header tags on top of each other instead of next to each other

I am attempting to adjust the placement of my header tags so that the second header sits directly below the first one, rather than side by side. Currently, I am using h1 and h2 tags for my headers. I have experimented with placing both headers inside an h ...

htmlcssheadertags

Why does the lazy loading feature keep moving the background image around?

While trying to incorporate lazy loading on my website, I encountered an issue where the image position would change after it was fully loaded and made visible. I experimented with rearranging the order in which my JavaScript and CSS files were called, bu ...

javascripthtmlcsslazy-loading

Disabling the ripple effect on the primary action in React Material lists: A Step-by-Step

I was attempting to include two action buttons at the opposite ends of a list component. https://i.stack.imgur.com/juv8F.gif When clicking on the secondary action (delete icon on the right), the ripple effect is confined to just the icon. On the othe ...

javascriptcssreactjsmaterial-uimakestyles

Drop down menu alignment issue: unable to center menu on the page

My dropdown menu is misaligned and not centering on the page, even after multiple attempts to fix it using HTML and CSS only. I have refrained from using JavaScript or JQuery for this issue. CSS Code: <style type="text/css"> /* STYLING FOR DROPDOWN ...

htmlcssmenudrop-down-menu

Switching the background hue of the chat box after each message

Does anyone know how to change the colors of each message in a chat window using CSS and HTML? I'm trying to customize my stream but can't figure it out. Here is an example for reference. ...

htmlcssstreamchattwitch

The event.pageY position consistently reflects the laptop screen size rather than the exact position where the click occurred

My webpage is scrollable, but the event.pageY position always corresponds to my screen size. Even when scrolling down and clicking near the top of the screen, it registers as 50px. I am currently utilizing event.pageY While this functions correctly on a ...

javascriptjqueryhtmlcss

Curved edges, Layering, Content overflow restriction

My design consists of two circular divs with the border-radius property set to its max value. The first circle contains a header div with a unique background-color and overflow:hidden to create the illusion that the top portion of the circle has a differen ...

overflowz-indexcsscss-position

Customize the border of the Tab indicator within Material UI

I created a custom NavBar with a unique tab indicator implementation: indicator: { background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', }, <Tabs classes={{indicator: classes.indicator}} onChange={handleClickTab} value={value}> ...

cssreactjsmaterial-ui

The navigation bar is positioned with white space above it

Currently working on a website design and facing an issue with adding a clickable button to the Nav-bar. Noticed some white-space above the Nav-bar which is not desired. I had previously posted a similar question but unable to identify the CSS error causi ...

javascripthtmlcss

Even after dynamically removing the class from the element, the Click event can still be detected

My buttons have a design like this: <a class="h-modal-btn branch-modal-btn"> Buy Now </a> The issue arises when I need to remove certain classes and add attributes to these buttons based on the query string in the URL. Skipping ahead ...

javascripthtmljquerycss

Comparing the use of visibility: hidden with -webkit-transform: translate3d() within a PhoneGap application

Currently, I am creating a hybrid application using PhoneGap. As part of the design, I have several divs (each representing a page) that I toggle between by changing their visibility in CSS using "visibility: hidden" and "visible". However, I recently ca ...

javascriptcsscordova