html - Border of child element affects div size of the parent -


i made when hover item in menu, there comes little line underneath with: border-bottom: 2px;. when hover item in menu parent element (the header in case) grow 2px on 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 **/  {     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 sample: http://codepen.io/anon/pen/rvjjqw

i hope can find answer here! in advance!

the problem border occupies space, parent grows.

instead, can consider setting transparent border , changing color @ 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 **/  {    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>


Comments

Post a Comment

Popular posts from this blog

node.js - Using Node without global install -

i'm working on few node & electron (atom shell) projects , i'm curious how them work without user having install node globally. i've seen few applications including node directory in project contains node.exe binary. how go setting node project use binary? edit: thought should add, i've searched everywhere answer this, unrelated results.
Read more

How to access a php class file from PHPFox framework into javascript code written in simple HTML file? -

i've website developed using phpfox v3.0.7 . now i'm trying implement 'sse(server sent events)' 1 of php files. reference i'm giving below necessary code part of file. file titled process.class.php , present @ location /var/www/module/notification/include/service/process.class.php present on server having ip http://34.124.40.142/ . <?php /** * [phpfox_header] */ header('content-type: text/event-stream'); header('cache-control: no-cache'); defined('phpfox') or exit('no dice!'); /** * * * @copyright [phpfox_copyright] * @author raymond benc * @package phpfox_service * @version $id: service.class.php 67 2009-01-20 11:32:45z raymond_benc $ */ class notification_service_process extends phpfox_service { /** * class constructor */ public function __construct() { $this->_stable = phpfox::gett('notification'); } public function add($...
Read more

java - Null response to php query in android, even though php works properly -

Image
table i'm trying retrieve above data using 2 php files below. want pass email parameter , return bets user = email. work fine when tested advanced rest client, problem not php. however, when try through android 2 java classes below, null pointer exception (logcat below) , json object returned null. i'm not sure error is, think i'm not passing parameter php , that's why it's producing null response. logcat 05-31 15:10:50.227 26074-26074/com.example.albert.betterapp e/androidruntime﹕ fatal exception: main process: com.example.albert.betterapp, pid: 26074 java.lang.runtimeexception: unable start activity componentinfo{com.example.albert.betterapp/com.example.albert.betterapp.displayallbets}: java.lang.nullpointerexception @ android.app.activitythread.performlaunchactivity(activitythread.java:2292) @ android.app.activitythread.handlelaunchactivity(activitythread.java:2350) @ android.app.activitythread.acce...
Read more