CODEWITHSUNDEEP
htmlcss
user3290471
user3290471

Reputation: 33

Border of child element affects div size of the parent

I made it so that when I hover a item in my menu, there comes a little line underneath it with: border-bottom: 2px;. Now when I hover the item in my menu the parent element (The header in this case) will also grow 2px on the bottom.

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>

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;
}

And here is a sample: http://codepen.io/anon/pen/rVjJqW

I hope I can find some answer here! Thanks in advance!

Upvotes: 0

Views: 139

Answers (3)

Dmitriy
Dmitriy

Reputation: 4503

add .navigation_menu li - border-bottom: 2px solid transparent;

/** General Style **/

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;
  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>

use pseudo-elements :before or :after

/** General Style **/

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;
    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>

Upvotes: 0

Felix A J
Felix A J

Reputation: 6490

An alternate solution-

For .navigation_menu li:hover, add margin-bottom: -2px;, and remove the overflow: hidden; for ul

Upvotes: 1

Oriol
Oriol

Reputation: 288590

The problem is that the border occupies some space, so the parent grows.

Instead, you can consider setting a transparent border and changing the color at hover:

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


/** General Style **/
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;
  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>

Upvotes: 2

Related Questions