Hover effect on navigation in CSS

Having trouble achieving a hover effect and could use some help.

I'm working on creating a tab-style navigation menu where I want the tab to expand from the top when hovered over. However, my current CSS code is causing the tab to expand both at the top and bottom, also moving the parent element. Can someone assist me in adjusting the code so that it only expands at the top of the menu item without affecting the parent? Thanks in advance!

.nav-1 ul li {
    display: inline-block;
    margin: 0px;
    padding: 0px;
}

.nav-1 ul li a {
    transition: 0.5s;
    padding:16px 22px;
    font-size: 18px;
    color: #fff;
    display: block;
    font-weight: 400;
}

.nav-1 ul li a:hover {
    transition: 0.5s;
    padding:22px 22px 26px 22px;
}
jqueryhtmlcss

Answer №1

Check out this solution using pseudo-elements that meets the requirement.

Quick Demo

View JSfiddle Demo

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.nav-1 ul li {
display: inline-block;
margin: 0px;
padding: 0px;
    vertical-align: top;
}

.nav-1 ul li a {
transition: 0.5s;
height: 53px;
    padding: 16px 22px;
font-size: 18px;
color: #fff;
display: block;
font-weight: 400;
    position: relative;
    background-color: inherit; /*  copies bg color for later */
}

.nav-1 ul li a:after {
    content: '';
    position: absolute; /* doesnt affect parent size */
    top:0%; /* position at top */
    left: 0;
    width: 100%;
    background-color: inherit; /* uses copied bg color */
transition: 0.5s;
height: 0px;
    z-index:3;
}

.nav-1 ul li a:hover:after {
height: 12px; /* add height */
    transform:translateY(-100%); /* adjust location automatically */
}

main {
    height: 250px;
    background: rebeccapurple;
}
.nav-1 li:first-child {background-color: #a0c80a;}
.nav-1 li:nth-child(2) {background-color: #feaf00;}
.nav-1 li:nth-child(3) {background-color: #f13835;}
.nav-1 li:nth-child(4) {background-color: #1ebad8;}
<div class="grid-container">
<div class="grid-12 nav-1>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Our Team</a></li>
  <li><a href="#">Facilities</a></li>
</ul>
</div>
<main></main>
</div>

Answer №2

To achieve a downward movement, adjust the padding-bottom instead of the padding-top.

.nav-1 ul li a:hover {  padding:16px 22px 26px 22px;}

Simply changing the first value from 16px to 22px will result in the desired downward shift.

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 initial page in jqgrid may show rowobject value as undefined, but subsequent pages will display the correct rowObject values

While working with jqgrid-4.8, I encountered an issue where the rowObject value is coming up as undefined in the first page but values are received in subsequent pages when using rowObject.name. However, if rowObject[0] is used, the values of rowObject are ...

javascriptphpjqueryjqgrid

What methods can be used to choose specific rows while styling columns with CSS?

As an exercise in CSS styling, I have successfully transformed an unordered list into columns. But now, I am curious if it is possible to target and style the "rows" within these columns. This is the CSS code currently in use: ul.popular{ margin:15px ...

css

Create a JavaScript/jQuery function that causes an element to fade in when the mouse is

I am currently developing a PHP/MySQL project that involves creating a function to display a brief description when a user hovers over an image. However, I seem to be encountering an issue where the function crashes after a few uses. Below is a snippet of ...

javascriptjquerycss

Unforeseen execution issues arising from repeated Ajax calls with SetTimeout in JavaScript

I have a list of users displayed in an HTML table that is dynamically created on page load. Each row includes an inline button with onclick="functionName(userId)" that triggers the following actions: When clicked, a Bootstrap modal popup is shown and the ...

javascriptjqueryajax

"Troubleshooting Issue: JavaScript and jQuery onClick Event Not Functioning Properly

Whenever I try to click on the "php1" div, nothing happens. The location.reload() function is only a placeholder used for testing if the onClick event is functioning properly. <div class="php-task"> <h1>PHP</h1> ...

javascripthtmljqueryajax

When a single column is achieved, aligning with justify-content space-between

I'm working on styling a div that has two children using flexbox and flex-wrap. I want the layout to adjust without needing media queries - so that when it reaches a certain width, the children are spaced evenly (justify-content: space-between), but w ...

htmlcssflexbox

Shifting a division using insertAfter

Hey there! I'm having a bit of trouble using the insertAfter function. In each product in my store, I need to position an "add to cart" button after the price. This is the code I tried: <Script type="text/javascript" > jQuery(document).read ...

javascriptjqueryhtmlcss

Is there a way to ensure that Google ads can be opened in a new tab when clicked, instead of opening within the current tab?

I recently created a Google ad and placed it on my website. However, I noticed that when users click on the ad, sometimes it opens in the same tab rather than a new one. This can lead to users losing track of my website. Can anyone explain why this incons ...

javascriptphphtmlcssadsense

Could a 1 pixel GIF be the next innovation in measuring tools? BLANK_IMAGE_URL - what mysterious purpose does it serve?

Currently diving into the ExtJs documentation and stumbled upon the BLANK_IMAGE_URL property. According to the docs, it's a link to a 1-pixel transparent GIF that helps with accurate measurements. But how can such a small image be useful for measurin ...

javascripthtmlcssextjs

What is the best way to transfer information from jQuery to HTML?

Currently, I have a separate script written in jQuery that retrieves data from an API. function sendRequest() { $.ajax({ url: "http://localhost:3002/api/people", type: "get", //using get method data: { ...

javascriptjqueryajaxbindingnunjucks

Is it possible to apply styling to an element based on the position property of its ancestors using only CSS?

Wondering if it's possible to style an element based on its ancestors' CSS property value. Consider the HTML snippet below: <div><!-- ancestor --> <!-- Any number of descendant levels before reaching the target div --> < ...

csscss-position

Creating a floating div that remains in place without disturbing the layout of the surrounding elements on

I am trying to place a div within a page at specific coordinates without affecting the rest of the content on the page. My initial approach was to give the parent container a position: absolute and the floating div a position: relative, then setting the p ...

htmlcss

Place the text (menu) adjacent to the navigation bar

I am currently using bootsrap 4 alpha 6 in combination with midnight.js to alter the color of my navigation menu toggler. I am trying to incorporate a text element (MENU) alongside it, similar to the example shown in the Capture image. For the text toggler ...

javascripttwitter-bootstrapcssbootstrap-4

CSS Column Height not Transferring to Descendants

Trying to transform this... http://jsfiddle.net/K2NPz/1/ Into this... The image on the left is current, while the one on the right is the desired outcome. However, I'm facing challenges making it work as intended due to issues with the inherit prope ...

cssheightdoctypeinheritance

Conceal four input fields depending on the option chosen from the dropdown menu

I need assistance with hiding multiple input boxes. Although I've tried using if and else, it seems to only work for two of the boxes. My current code is written in regular JavaScript, but I am open to exploring a jQuery solution as well. window.onlo ...

javascriptjqueryhtml

On a smaller screen size, the event listeners I add dynamically are successfully attached using the exact same HTML, however, they fail to attach on a larger screen size

I recently created a small website where I dynamically add code to HTML divs. Once the data is set, I attach click and mouse enter/leave events using the div's ID. The site consists of plain HTML, javascript, and CSS. However, I noticed that when I v ...

javascripthtmlcssmedia-queriesaddeventlistener

How can we refine the user information based on the selection of a radio button?

How do I apply a filter to user details when selecting a radio button? Visit Plunker *I need to display only the questions of authenticated users on the list page, so I created a plunker example. If the user is authenticated or an admin, I want to filter ...

htmlcssangularjsmeanjs

invoking a JavaScript function with onClick

Every time I try deploying my code, an error is thrown saying: saveRows is not a function. Can anyone help me figure out what's going on? dataGrid.prototype = { display: function() { var self = this; var html = []; va ...

javascriptjqueryjqgrid

Creating a button that seamlessly adapts to all browsers

I am encountering an issue with the positioning of a chat button on my website. Despite my efforts, the button does not remain in the desired location across different browsers and screen resolutions. The browser zoom also causes inconsistencies in the but ...

cssbrowsercross-browserzooming

Animating a child element while still keeping it within its parent's bounds

I have researched extensively for a solution and it seems that using position: relative; should resolve my issue. However, this method does not seem to work in my specific case. I am utilizing JQuery and AnimeJS. My goal is to achieve the Google ripple eff ...

javascriptjqueryhtmlcssanime.js