CodePen Embed - hoverした時動くの解消.1

Live

​x
 
<p>更新情報・お知らせバナー
がhoverした時に動いてしまってる</p>  
<nav class="nav-wrapper">
    <ul class="top-nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </nav><!-- /.top-nav -->
  <section class="osirase">
    <h2 class="kousinjohou">更新情報・お知らせ</h2>
 <hr>
​
<!--   ------------------------------   -->
    
    
<p>hoverした時に動かなくなった</p>  
<nav class="nav-wrapper">
    <ul class="top-nav2">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </nav><!-- /.top-nav -->
  <section class="osirase">
    <h2 class="kousinjohou">更新情報・お知らせ</h2>    
    
 <hr>
​

Live

xxxxxxxxxx
 
p {
  font-size:20px;
  color: red;
  padding-left: 10px;
  border-bottom: 4px solid blue;
}
.nav-wrapper {
  max-width: 480px;
  margin:0 auto 30px;
}
​
nav ul li {
  display: inline;
}
nav {
  text-align: center;
  
}
nav li a {
  padding: 15px 30px;
  text-decoration: none;
  color: #666;
}
nav li a:hover {
  border-bottom: 4px solid #D08047;
}
h2 {
  color: #fff;
  background-color: #D08047;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 16px;
  margin-bottom: 10px;
}
hr {
  border: 5px solid #000;
  margin: 100px 0;
}
​
/* ----------------------- */
​
​
.top-nav {
  display: flex;
  justify-content: space-around;
}
.top-nav li {
  display: flex;
  width: 25%;
  justify-content: center;
}
.top-nav a {
  display: block;
  width: 100%;
  padding-bottom: 25px;
  text-decoration: none;
  text-align: center;
  color: #000000;
}
.top-nav a:hover {
  border-bottom: 4px solid #D08047;
}
​
/* ---- hoverした時に動かなくなった -------- */
​
.top-nav2 {
  display: flex;
  justify-content: space-around;
}
.top-nav2 li {
  display: flex;
  width: 25%;
  justify-content: center;
}
.top-nav2 a {
  display: block;
  width: 100%;
  padding-bottom: 25px;
  text-decoration: none;
  text-align: center;
  color: #000000;
  border-bottom: 4px solid rgba(208,128,71, 0);
}
.top-nav2 a:hover {
  border-bottom: 4px solid #D08047;
}
​
​
​

This Pen is owned by 井上 on CodePen.

See more by @inopro on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.