下划线时，反射不应移动

Question

My goal is that when the user hovers over the nav the underline should not move the reflection. It should just overlay the reflection. At the moment as soon i hover over the nav elements the underline pushes down the reflection. How can I change this?

I have this code:

HTML

<div class="container">
    <header>
        <img id="logo" src="http://placekitten.com/440/53"></img>
        <div id="header-address">
            <ul>
                <li>Hagartenstrasse 16 <span> T 032 672 35 84</span></li>
                <li>4562 Biberist <span> F 032 672 15 22</span></li>
                <li>info@malerei-hubler.ch <span> M 079 251 23 22</span></li>
            </ul>
        </div>
    </header>
    <nav>
        <ul>
            <li id="reflect" class="navp txtRot"><h1>HOME</h1></li>
            <li id="reflect" class="navp txtOrange"><h1>ANGEBOT</h1></li>
            <li id="reflect" class="navp txtGelb"><h1>TEAM</h1></li>
            <li id="reflect" class="navp txtGruen"><h1>UMWELT</h1></li>
            <li id="reflect" class="txtBlau"><h1>KONTAKT</h1></li>
        </ul>
    </nav>
</div>

CSS

* {
    margin: 0px;
    padding: 0px;
}

body, html, ul, li, h1 {
    font-family: 'Titillium Web', sans-serif;
    font-size: 100%;
    line-height: 1em;
}
.container {
    width: 900px;
    height: 100vh;
    margin: 0 auto;
}
h1, h2, h3 {
    font-weight: 600;
}

.txtRot {
    color: #e60004;
}
.txtOrange {
    color: #f28e00;
}
.txtGelb {
    color: #f0d80e;
}

.txtGruen {
    color: #009836;
}
.txtBlau {
    color: #0068b5;
}

header {
    margin-top: 56px;
}

ul {
    padding: 0px;
}

/* HEADER */ 
#logo {
    height: 100%;
    float: left;
}

#header-address {
    font-weight: 400;
    font-style: italic;
    font-size: 14px;
}
#header-address ul {
    list-style: none;
    float: right;
}
#header-address ul li {
    line-height: 19px;
    text-transform: uppercase;
}#header-address ul li span {
    line-height: 19px;
    float: right;
    padding-left: 5px;
}
nav {
    float: left;
    margin-top: 60px;
    margin-left: 0px;
}
nav ul li  {
    display: inline-block;
    list-style: none;
    height: 100%;
}
nav ul li h1  {
    font-size: 40px;
    font-weight: 600;
    height: 100%;
    padding:0px;
}
/* PADDING FOR NAV */
.navp {
    padding-right: 46.4px;
    height: 100%;
}

#reflect h1:hover {
    border-bottom: 4px solid;

}
#reflect {
    position: relative;
    -webkit-box-reflect: below -3px -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.1) 0%, transparent 70%, transparent 100%);
}


#reflect:before {
    background: -moz-linear-gradient(center top, #FFFFFF, #FFFFFF 30%, rgba(255, 255, 255, 0.9) 65%, rgba(255, 255, 255, 0.7)) repeat scroll 0 0 padding-box, -moz-element(#reflect) no-repeat scroll 0 -127px content-box rgba(0, 0, 0, 0);
    content: "";
    height: 140px;
    left: 0;
    position: absolute;
    top: 277px;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    width: 360px;
}

Here is the codepen:

http://codepen.io/patrickhofer/pen/JKdgVN

Any help much appreciated.

It should look like this:

Answer 1

You have to give a specific height to navp . You can try changing your .navp like this:

.navp {
   padding-right: 46.4px;
   height: 40px;
   margin-bottom:7px;
 }

Answer 2

Set

#reflect h1 {
    border-bottom: 4px solid transparent;

}
#reflect h1:hover{
    border-bottom: 4px solid currentcolor;

}

Note you can not have multiple ID in the same document read ID selectors

Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).

so the final result shall look like this

 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ /*Reset Safari User Agent Styles*/ * { margin: 0px; padding: 0px; } body, html, ul, li, h1 { font-family: 'Titillium Web', sans-serif; font-size: 100%; line-height: 1em; } .container { width: 900px; height: 100vh; margin: 0 auto; } h1, h2, h3 { font-weight: 600; } .txtRot { color: #e60004; } .txtOrange { color: #f28e00; } .txtGelb { color: #f0d80e; } .txtGruen { color: #009836; } .txtBlau { color: #0068b5; } header { margin-top: 56px; } ul { padding: 0px; } /* HEADER */ #logo { height: 100%; float: left; } #header-address { font-weight: 400; font-style: italic; font-size: 14px; } #header-address ul { list-style: none; float: right; } #header-address ul li { line-height: 19px; text-transform: uppercase; } #header-address ul li span { line-height: 19px; float: right; padding-left: 5px; } nav { float: left; margin-top: 60px; margin-left: 0px; } nav ul li { display: inline-block; list-style: none; margin-bottom: 50px; } nav ul li h1 { font-size: 40px; font-weight: 600; height: 100%; padding: 0px; } /* PADDING FOR NAV */ .navp { padding-right: 46.4px; height: 100%; } .reflect h1 { border-bottom: 4px solid transparent; } .reflect h1:hover { border-bottom: 4px solid currentcolor; } .reflect { position: relative; -webkit-box-reflect: below -3px -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.1) 0%, transparent 70%, transparent 100%); } .reflect:before { background: -moz-linear-gradient(center top, #FFFFFF, #FFFFFF 30%, rgba(255, 255, 255, 0.9) 65%, rgba(255, 255, 255, 0.7)) repeat scroll 0 0 padding-box, -moz-element(#reflect) no-repeat scroll 0 -127px content-box rgba(0, 0, 0, 0); content: ""; height: 140px; left: 0; position: absolute; top: 277px; -webkit-transform: scaleY(-1); transform: scaleY(-1); width: 360px; } 

 <div class="container"> <header> <img id="logo" src="http://placekitten.com/440/53"></img> <div id="header-address"> <ul> <li>Hagartenstrasse 16 <span> T 032 672 35 84</span> </li> <li>4562 Biberist <span> F 032 672 15 22</span> </li> <li>info@malerei-hubler.ch <span> M 079 251 23 22</span> </li> </ul> </div> </header> <nav> <ul> <li class="reflect navp txtRot"> <h1>HOME</h1> </li> <li class="reflect navp txtOrange"> <h1>ANGEBOT</h1> </li> <li class="reflect navp txtGelb"> <h1>TEAM</h1> </li> <li class="reflect navp txtGruen"> <h1>UMWELT</h1> </li> <li class="reflect txtBlau"> <h1>KONTAKT</h1> </li> </ul> </nav> </div> 

you can use box-shadow too

.reflect h1:hover {
    box-shadow: 0 4px;
}

that will look like this

 * { margin: 0px; padding: 0px; } body, html, ul, li, h1 { font-family: 'Titillium Web', sans-serif; font-size: 100%; line-height: 1em; } .container { width: 900px; height: 100vh; margin: 0 auto; } h1, h2, h3 { font-weight: 600; } .txtRot { color: #e60004; } .txtOrange { color: #f28e00; } .txtGelb { color: #f0d80e; } .txtGruen { color: #009836; } .txtBlau { color: #0068b5; } header { margin-top: 56px; } ul { padding: 0px; } /* HEADER */ #logo { height: 100%; float: left; } #header-address { font-weight: 400; font-style: italic; font-size: 14px; } #header-address ul { list-style: none; float: right; } #header-address ul li { line-height: 19px; text-transform: uppercase; } #header-address ul li span { line-height: 19px; float: right; padding-left: 5px; } nav { float: left; margin-top: 60px; margin-left: 0px; } nav ul li { display: inline-block; list-style: none; margin-bottom: 50px; } nav ul li h1 { font-size: 40px; font-weight: 600; height: 100%; padding: 0px; } /* PADDING FOR NAV */ .navp { padding-right: 46.4px; height: 100%; } .reflect h1:hover { box-shadow: 0 4px; } .reflect { position: relative; -webkit-box-reflect: below -3px -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.1) 0%, transparent 70%, transparent 100%); } .reflect:before { background: -moz-linear-gradient(center top, #FFFFFF, #FFFFFF 30%, rgba(255, 255, 255, 0.9) 65%, rgba(255, 255, 255, 0.7)) repeat scroll 0 0 padding-box, -moz-element(#reflect) no-repeat scroll 0 -127px content-box rgba(0, 0, 0, 0); content: ""; height: 140px; left: 0; position: absolute; top: 277px; -webkit-transform: scaleY(-1); transform: scaleY(-1); width: 360px; } 

 <div class="container"> <header> <img id="logo" src="http://placekitten.com/440/53" /> <div id="header-address"> <ul> <li>Hagartenstrasse 16 <span> T 032 672 35 84</span> </li> <li>4562 Biberist <span> F 032 672 15 22</span> </li> <li>info@malerei-hubler.ch <span> M 079 251 23 22</span> </li> </ul> </div> </header> <nav> <ul> <li class="reflect navp txtRot"> <h1>HOME</h1> </li> <li class="reflect navp txtOrange"> <h1>ANGEBOT</h1> </li> <li class="reflect navp txtGelb"> <h1>TEAM</h1> </li> <li class="reflect navp txtGruen"> <h1>UMWELT</h1> </li> <li class="reflect txtBlau"> <h1>KONTAKT</h1> </li> </ul> </nav> </div>