When hovering over elements, my li tags undergo a transformation

I am working on a simple menu code, which is just a list of items. 

ul li {
  position: relative;
  top: 55px;
  height: 30px;
  background: #212;
  display: inline-block;
  width: 29%;
  margin: 1%;
  margin-bottom: 0;
  padding: 5px;
  -webkit-border-top-right-radius: 30px;
  -moz-border-top-right-radius: 30px;
  -ms-border-top-right-radius: 30px;
  -o-border-top-right-radius: 30px;
  border-top-right-radius: 30px;
  -webkit-border-top-left-radius: 30px;
  -moz-border-top-left-radius: 30px;
  -ms-border-top-left-radius: 30px;
  -o-border-top-left-radius: 30px;
  border-top-left-radius: 30px;
}
ul li:hover {
  box-shadow: 1px 1px 10px white;
  position: relative;
  top: 20px;
  height: 60px;
  padding-top: 1.5em;
  font-size: 20px;
}
<ul>
  <a href="#">
    <li>MENU</li>
  </a>
  <a href="#">
    <li>CARDS</li>
  </a>
  <a href="#">
    <li>CONTACT</li>
  </a>
</ul>

After applying this code, I noticed that the `padding-top` and `font-size` properties affect all list items, not just the one I hover over.

If I remove these two properties, the `box-shadow` and relative positioning only apply to the item being hovered over.

Is there a way to modify the code so that it only affects the button I am hovering over without assigning individual IDs to each button?

htmlcsshoverhtml-lists

Answer №1

It seems like your HTML is invalid, remember that li can only be a direct child of ul.

Make sure to fix that issue and also ensure that in the :hover rule, only the properties font-size and box-shadow are retained (the ones you were removing). Additionally, apply the padding that was originally in the li to the a element.

ul li {
  list-style: none;
  position: relative;
  top: 55px;
  height: 30px;
  background: #212;
  float: left;
  width: 29%;
  margin: 1% 1% 0;
  border-radius: 30px 30px 0 0
}
ul li a {
  padding: 5px;
  display: block;
  color: white;
  text-align: center
}
ul li:hover a {
  box-shadow: 1px 1px 10px red;
  font-size: 20px;
}
<ul>
  <li>
    <a href="#">MENU</a>
  </li>
  <li>
    <a href="#">CARDS</a>
  </li>
  <li>
    <a href="#">CONTACT</a>
  </li>
</ul>

Answer №2

To enhance your navigation menu, enclose the list items within a div and assign a class to that div. Then, style the list items within that div.

HTML

<div class="menu">
    <ul>
        <a href="#"><li>MENU</li></a>
        <a href="#"><li>CARDS</li></a>
        <a href="#"><li>CONTACT</li></a>
    </ul>
</div>

CSS

.menu ul li:hover {
    position: relative;
    top: 55px;
    height: 30px;
    background: #212;
    display: inline-block;
    width: 29%;
    margin: 1%;
    margin-bottom: 0;
    padding: 5px;
    -webkit-border-top-right-radius: 30px;
    -moz-border-top-right-radius: 30px;
    -ms-border-top-right-radius: 30px;
    -o-border-top-right-radius: 30px;
    border-top-right-radius: 30px;
    -webkit-border-top-left-radius: 30px;
    -moz-border-top-left-radius: 30px;
    -ms-border-top-left-radius: 30px;
    -o-border-top-left-radius: 30px;
    border-top-left-radius: 30px;
}

Alternatively, you can style the anchor tags within the list items.

.menu ul a li:hover {/* your css */}

Answer №3

There are a couple of issues with your HTML code. The <li> element should be a direct child of either <ul> or <ol>, but you have placed it within an <a> tag like this: 

<a href="#"><li>MENU</li></a>
. Additionally, to target the hover effect on the list items, you can use the selector 
ul > li:hover{enter your styles here}
. You can also style the list items using ul li { vertical-align: top;} since you are using inline-block elements that require vertical-align property.

You can view the code in action on this fiddle: https://jsfiddle.net/vwvsz291/

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

Prepare the writing area for input

My inputs have validation indicators, such as a green tick or red cross, placed at the very right of the input (inside the input). Is there a way to specify the writing space inside an input without restricting the number of characters that can be enter ...

css

Applying a distinct CSS style to the final entry of each list item

Is there a way for me to assign a different style for the last entries in my code? <?= $k % 2 == 1 ? 'news-figure' : 'news-figure-b' ?> ...

phpmysqlcss

Tips for creating a scrollable section within a div row using clarity design instead of bootstrap formatting

My current project combines Angular with .NET Core, and I am encountering difficulties in styling one particular component. This component consists of a row with two columns. The first column is empty while the second column contains another row divided i ...

htmlcssbootstrap-4

Sharing information between different components in React can be done using props, context, or a

When attempting to edit by clicking, the parent information is taken instead of creating a new VI. I was able to achieve this with angular dialog but I am unsure how to do it with components. This is done using dialog: <div class="dropdown-menu-item" ...

htmlcssangulartypescript

Hovering triggers the appearance of Particle JS

I am attempting to add particle js as the background for my website. I have tried implementing this code snippet: https://codepen.io/nikspatel/pen/aJGqpv My CSS includes: position: fixed; z-index: -10; in order to keep the particles fixed on the screen e ...

javascripthtmlcss

Unable to retrieve HTML element using Python's Selenium

Whenever I try to access a specific website using Selenium, a pesky pop-up appears and I can't seem to locate the close button to dismiss it. from selenium import webdriver from time import sleep from selenium.webdriver.common.keys import Keys import ...

pythonhtmlselenium-webdriverwebelement

The latest grid system in Bootstrap 5 is designed to streamline

I'm attempting to use Bootstrap 5 to create a grid system similar to the image shown below View Image I've been struggling to replicate the grid section shown in the attached image using Bootstrap 5. <div class="container-fluid"> ...

htmlcssbootstrap-5

Floating color problem

Do you know why the social icons turn black when hovered over? Could it be related to the navbar buttons? Is there a way to change the hover color to blue or red only? Link to code snippet <body> <nav class="navbar navbar-default navbar-fixed-t ...

htmlcsstwitter-bootstrap-3

Using C# to block specific sections of HTML code

Suppose I need to prevent a specific HTML code from running on a website using WebBrowserControl1. I attempted approaches like WebClient1.DownloadFile("website.html", @"C:\BlockerWork"), File.ReadAllText(@"C:\BlockerWork"), String.Replace, follow ...

c#htmlblocking

Utilizing CSS grid in a repetitive manner without the need to specify additional grid areas

I'm experimenting with CSS grid to organize content within certain limitations. My goal is to have three divs, each 50% wide, with div two and three stacking next to div one. To accomplish this dynamically using PHP, I utilized grid-template-areas. ...

csscss-grid

Two separate tables displaying unique AJAX JSON response datasets

As a beginner in javascript, I am facing a challenge. I want to fetch JSON responses from 2 separate AJAX requests and create 2 different tables. Currently, I have successfully achieved this for one JSON response and table. In my HTML, I have the followi ...

javascriptjqueryhtmljsonajax

Struggling with creating a responsive navigation bar using Bootstrap

We're in the process of crafting a fresh new website, and our designer has put together a navigation bar with a unique curve that has left us scratching our heads! Here's a look at our current header setup: This is the current HTML code for our ...

htmlcsstwitter-bootstraptwitter-bootstrap-3navigation

I'm wondering if there is a method for me to get only the count of input fields that have the class "Calctime" and are not empty when this function is executed

Currently, I am developing an airport application that aims to track the time it takes to travel between different airports. In this context, moving from one airport to another is referred to as a Sector, and the duration of time taken for this journey is ...

javascripthtmlcss

How can you find the index of an HTML element while excluding any clearfix divs?

In the process of developing a CMS, I find myself in need of determining the index of the element I am currently working on. Consider the following stripped-down HTML structure: <div class="row"> <article class="col-md-4 col-sm-4 project" &g ...

javascriptjqueryhtml

Retrieve information from an HTML input field that does not have an assigned ID or name

I am facing a challenge with an HTML table that contains multiple inputs which do not have any id or name attributes. I need to retrieve data from these inputs but struggling due to the lack of identifiers. Upon inspecting the DOM, I noticed that each inp ...

htmlgoogle-chromedominputelement

Having trouble retrieving the input value using JavaScript

I have been attempting to retrieve the value of an input tag using JavaScript and display it on the console, but my code seems to be not functioning properly. Can someone help me identify the issue in the following code snippet? const userTextValue = doc ...

javascripthtmldom

Apply a vibrant red color to the border input (twig)

Hi everyone, I'm facing a little issue where my input is not changing to red color. I have tried to troubleshoot my code but can't seem to find the problem. Can anyone help? Here is my HTML code (Twig): {{ form_widget(form.value, {&apos ...

phphtmlcsssymfonytwig

Use CSS to manipulate the dimensions of an overlay

Looking for a way to ensure that the height of your overlay matches the height of your carousel, even on smaller screen sizes? The HTML code below demonstrates how to combine simple HTML with a Bootstrap carousel featuring three images, along with an overl ...

htmlcssbootstrap-4

There seems to be an error with JVectorMap: the <g> attribute transform is expecting a number but is instead receiving "scale(NaN) translate(N..."

Hey there! I'm currently working on creating a form with a map to select the country of birth using JVectorMap. However, when checking the Google Chrome developer console, I encountered the following error message: jquery-jvectormap-2.0.5.min.js:1 Err ...

javascripthtmlcssjvectormap

The Jodit editor is appearing incorrectly

Encountering an issue with the jodit wysiwyg editor or any similar plugin editor while working within a Bootstrap tab. When adding an editor to the tab content, the display is incorrect upon selecting the tab (displayed at a fraction of the height and miss ...

javascriptcssbootstrap-4jodit