The size of the parent div is influenced by the border of its child element

By adding a hover effect to items in my menu, I was able to create a subtle underline effect using border-bottom: 2px;. Surprisingly, when hovering over the menu item, the parent element (the header) also expands by 2px.

This is my HTML code:

<div class="header"> 

    <nav class="navigation_menu">

            <ul class="navigation_ul">

                <a href="#"><li>Lorum</li></a>
                <a href="#"><li>Ipsum</li></a>
                <a href="#"><li>Lorpsum</li></a>
                <a href="#"><li>Ipum</li></a>
                <a href="#"><li>Nadoa</li></a>

            </ul>

    </nav>

</div>

This is my CSS code:

body {
    background:f5f5f5;
    margin: 0px;
    padding: 0px;
    font-family: roboto;
}

/** Text Style **/

a {
    text-decoration: none;
    color: inherit;
}

/** Header Style **/

.header {
    background: #607d8b;
    margin: 0px;
    padding: 10px;
    padding-bottom: 50px;
    color: white;
}

/** Navigation Menu Style **/

.navigation_menu ul {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

.navigation_menu li {
    font-size:18px;
}

.navigation_menu li:hover {
    border-bottom: 2px solid white;
}

.navigation_menu ul li {
    display: inline-block;
    padding: 0px 0px;
}

Check out the live demo here: http://codepen.io/anon/pen/rVjJqW

I'm looking forward to any insights or solutions you might have! Thank you in advance!

htmlcss

Answer №1

The issue lies in the border taking up space, causing the parent element to expand.

One solution is to set a transparent border and change the color on hover:

.navigation_menu li {
  border-bottom: 2px solid transparent;
}
.navigation_menu li:hover {
  border-bottom-color: white;
}


/** Customized Styling **/
body {
  background: f5f5f5;
  margin: 0px;
  padding: 0px;
  font-family: roboto;
}

/** Text Formatting **/
a {
  text-decoration: none;
  color: inherit;
}

/** Header Design **/
.header {
  background: #607d8b;
  margin: 0px;
  padding: 10px;
  padding-bottom: 50px;
  color: white;
}

/** Navigation Menu Layout **/
.navigation_menu ul {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}
.navigation_menu li {
  font-size:18px;
  border-bottom: 2px solid transparent;
}
.navigation_menu li:hover {
  border-bottom-color: white;
}
.navigation_menu ul li {
  display: inline-block;
  padding: 0px 0px;
}
<div class="header"> 
  <nav class="navigation_menu">
    <ul class="navigation_ul">
      <a href="#"><li>Lorum</li></a>
      <a href="#"><li>Ipsum</li></a>
      <a href="#"><li>Lorpsum</li></a>
      <a href="#"><li>Ipum</li></a>
      <a href="#"><li>Nadoa</li></a>
    </ul>
  </nav>
</div>

Answer №2

Here is an alternative approach:

To achieve the desired effect with the .navigation_menu li:hover element, consider including margin-bottom: -2px; in the CSS styling and removing the overflow: hidden; property from the ul selector.

Answer №3

include .navigation_menu li and set 

border-bottom: 2px solid transparent;

/** Custom Styling **/

body {
background:f5f5f5;
margin: 0px;
padding: 0px;
font-family: roboto;
}

/** Text Formatting **/

a {
text-decoration: none;
color: inherit;
}

/** Header Design **/

.header {
background: #607d8b;
margin: 0px;
padding: 10px;
padding-bottom: 50px;
color: white;
}

/** Navigation Menu Look **/

.navigation_menu ul {
margin: 0px;
padding: 0px;
overflow: hidden;
}

.navigation_menu li {
font-size:18px;
  border-bottom: 2px solid transparent;
}

.navigation_menu li:hover {
border-bottom: 2px solid white;
}

.navigation_menu ul li {
display: inline-block;
padding: 0px 0px;
}
<div class="header"> 

<nav class="navigation_menu">

<ul class="navigation_ul">

<a href="#"><li>Lorum</li></a>
<a href="#"><li>Ipsum</li></a>
<a href="#"><li>Lorpsum</li></a>
<a href="#"><li>Ipum</li></a>
<a href="#"><li>Nadoa</li></a>

</ul>

</nav>

</div>

utilize pseudo-elements :before or :after

/** Custom Styling **/

body {
background:f5f5f5;
margin: 0px;
padding: 0px;
font-family: roboto;
}

/** Text Formatting **/

a {
text-decoration: none;
color: inherit;
}

/** Header Design **/

.header {
background: #607d8b;
margin: 0px;
padding: 10px;
padding-bottom: 50px;
color: white;
}

/** Navigation Menu Look **/

.navigation_menu ul {
margin: 0px;
padding: 0px;
overflow: hidden;
}

.navigation_menu li {
font-size:18px;
    position: relative;
}

.navigation_menu li:hover:before {
content: '';
    position: absolute; bottom: 0; left: 0;
    width: 100%;
    height: 2px;
    background: #fff;       
}



.navigation_menu ul li {
display: inline-block;
padding: 0px 0px;
}
<div class="header"> 

<nav class="navigation_menu">

<ul class="navigation_ul">

<a href="#"><li>Lorum</li></a>
<a href="#"><li>Ipsum</li></a>
<a href="#"><li>Lorpsum</li></a>
<a href="#"><li>Ipum</li></a>
<a href="#"><li>Nadoa</li></a>

</ul>

</nav>

</div>

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

Some pages are receiving images from the CDN, while others are not

I am encountering some challenges while troubleshooting an issue on a website. The CDN (content delivery network) is functioning properly on some pages but not on others. Initially, I suspected a typo in the path, but that does not seem to be the case. F ...

htmlcontent-management-systemcdnimage-optimization

Is there a way to have a button function as a submit button for a form even when it is located in a separate component within a react application?

I am in the process of creating a user-friendly "My Account" page using react, where users can easily update their account information. I have divided my components into two sections: the navbar and the form itself. However, I am facing an issue with the s ...

javascriptcssreactjsformsvalidation

Deactivate a specific button within a row on a Primeng table by clicking on it

I'm trying to modify my primeng table so that each row has a button, and when I click on a button, only that specific button should be disabled. However, in my current code, all buttons are getting disabled with a single click. Can someone please help ...

htmlangulareventsprimengprimeng-table

Is the video failing due to excessive adjustments of the video's currentTime?

Utilizing both user drag event and keypresses to adjust the position in an HTML5 video element, I am updating the video time with the following line of code: video.currentTime = toTime; Additionally, I am updating a canvas based on the video's posit ...

javascripthtmlvideo

Is it possible to include a shared helper text for two textfields that have been imported from MUI in a React.js project?

This snippet contains the code for my password container: .password-form-container { width: 85%; height: 7%; position: relative; top: 230px; left: 40px; display: flex; justify-content: space-between; border: 1px solid red; } <div clas ...

htmlcssreactjsmaterial-uiuitextfield

How to align a div vertically in relation to another div with automatic height

My challenge is to create a vertically-aligned div in connection with an auto-height div. It's difficult to explain, so I've included a screenshot that should clarify things: The orange div represents the main container. The blue div is a 2n ...

csshtmlvertical-alignment

Toggle jQuery to hide a div and update its CSS styling

There is an anchor with the class of "hide-btn1" that I want to trigger a series of actions when clicked: The rcol-content should hide and the text should change from Hide to Show The #container width needs to increase to 2038px The table.status-table wi ...

javascriptjqueryhtmlcss

Tips for consistently positioning a div beneath another div in HTML/CSS

Would appreciate it if you could review this. <.div id="main"> Main Div <./div> <br/> <.div id="sub">Sub-Division<./div> ...

jqueryajaxcss

An instructional guide on utilizing Python to extract the URLs of companies from a LinkedIn search

I'm having an issue extracting company profile URLs from a LinkedIn search as I keep getting a "not found" message. Despite my code running smoothly, the problem persists. Here is my code: import requests import csv import time import numpy from bs4 ...

pythonhtmlselenium-webdriverbeautifulsoupspring-social-linkedin

Tips for locating the :before element's position with Javascript

I am currently working on an animation where I need to change the color of an element in the center once a small circle touches it. Despite trying to use the position() method, it does not work as intended because I am using a :before for animating the div ...

javascriptjqueryhtmlcss

The z-index of 999 in CSS is not functioning as expected on both Google Chrome and Safari browsers

To ensure the slider text is readable in white color, we have applied a black background with 0.65 opacity CSS on the slider image. This allows the white text to stand out effectively. The following CSS code was used for this effect: .zlslides .ms-slide- ...

csswordpressgoogle-chromez-indexopacity

Expanding ChartJS canvas width to align with excessive columns within Bootstrap framework

I am working on a simple Bootstrap document with 2 rows. The first row has a variable number of columns that overflow horizontally, and the second row contains a chart that needs to be responsive to match the number of columns in the top row. It appears t ...

csstwitter-bootstrapbootstrap-4chartschart.js

Leveraging Powershell to access and retrieve data from a local .htm file using XPath syntax

Recently, I started working with Powershell and attempting to utilize it to open an existing .htm file and extract certain values through XPath for further use. Here is the current status of my script: $localHtmlFile = 'myfile.htm' $html = New- ...

htmlpowershell

How to troubleshoot incorrect div width detection by jQuery in Bootstrap

My asp.net mvc4 project utilizes bootstrap for markup and jquery for client side functionality. <div class="row"> <div class="col-md-4 container" id="cont"> <div class="row overlay_container" id="overlayCont"> <div class=" ...

javascriptjqueryhtmlcsstwitter-bootstrap

Having trouble with loading the generated HTML from a PHP file? If loadHTMLFile is not working, here's what you

Currently, I am facing an issue in obtaining the generated HTML from my index.php page. My goal is to convert an HTML table that was created using PHP into a CSV file. The main challenge I am encountering lies in capturing my HTML table within a PHP varia ...

phphtmldom

Could it be a z-index issue preventing my modal from appearing?

I am currently designing a mobile version of my website that resembles an app. The issue I'm facing is with the menu icon at the bottom, which is supposed to trigger a modal when clicked, but it's not working as expected. I suspect it may have so ...

cssbootstrap-4

Streamlining Your Ajax Script: A Guide to Eliminating Redundant Code

I am looking to streamline the following script and create a reusable function for it. Currently, I am using it with: <span id="test"></span> <span id="abc"></span> <span id="123"></span> Currently, the script looks li ...

javascriptjqueryhtmlajax

Browser switch dependent on operating system

Recently, a guest raised concerns about a DIV element covering the content of the page. There is an issue with a popup that is supposed to only appear when the mouse hovers over its container: <td class="ref" id="myContainer"> <div><a ...

csswindowsinternet-explorer

The has class method is failing to work within the if statement

I have encountered an issue with my Accordion code. When I test it, the word 'not' is displayed twice, while 'hve' is not displayed at all. $('.st-accordion li a').click(function() { if ($(this).parent().not('activeac ...

jqueryhtmlcss

Combining jQuery within a single container/segment/div tag

Currently, I am experimenting with adding jQuery to my Cargo Collective website: I have been working on a mouse-tracking jQuery effect that I really like, but I am facing an issue where the script does not stay contained in a specific section of the site. ...

htmljquerycssresponsive