跳跃悬停的链接

我一直在看我的CSS太长，需要另一双眼睛。我遇到了一些麻烦。首先：我无法弄清楚为什么我的链接在悬停时跳跃。它应该是一个横向导航栏的移动响应汉堡包，但我对此很新，并且已经使用了太多的代码部分来知道我在做什么或者不在做什么。任何帮助表示赞赏！跳跃悬停的链接

<!DOCTYPE html> 

<html lang="en"> 

<head> 
<meta charset="utf-8"> 
<script src="http://www.google.com/jsapi" type="text/javascript"></script> 
<script type="text/javascript">google.load("jquery", "1.3.2");</script> 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 

<style> 
body { 
font-family: 'Noto Sans', sans-serif; 
margin: 0; 
width: 100%; 
height: 100vh; 
background: #ffffff; 
background-color: black; 
-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale; 
    } 

header { 
width: 100%; 
background: #ffffff; 
position: fixed; 
height: 4em; 
line-height: 4em; 
display: inline-block; 
padding-left: 1em; 
border-bottom: .1em solid #dddddd; 
    } 
h2 { 
font-size: 2.1em; 
    } 
p { 
font-size: 10em; 
color: white; 
padding-top: 1em; 
    } 

@media only screen and (min-width: 319px) { 

.menu { 
    z-index: 1; 
    display: none; 
    font-weight: bold; 
    font-size: 1.2em; 
    width: 100%; 
    background: #f1f1f1; 
    position: fixed; 
    text-align: center; 
    margin-top: 3.3em; 
    color: black; 
    } 

    .menu ul { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    list-style-image: none; 
    border-top: #dddddd 1px solid; 
    } 

    .menu li { 
    display: block; 
    padding: 1em 0 1em 0; 
    border-bottom: #dddddd 1px solid; 
    } 

    .menu li:hover { 
    display: block; 
    background: #585858; 
    padding: 1em 0 1em 0; 
     cursor: crosshair; 
    } 

    .menu ul li a { 
    text-decoration: none; 
    margin: 0px; 
    color: black; 
    } 

    .menu ul li a:hover { 
    color: white; 
    text-decoration: none; 
    } 

    .menu a { 
    text-decoration: none; 
    color: black; 
    } 

    .menu a:hover { 
    text-decoration: none; 
    color: white; 
    } 

    #nav-icon4 { 
    width: 35px; 
    height: 25px; 
    float: right; 
    margin-top: -47px; 
    margin-right: 30px; 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    transform: rotate(0deg); 
    -webkit-transition: .5s ease-in-out; 
    -moz-transition: .5s ease-in-out; 
    -o-transition: .5s ease-in-out; 
    transition: .5s ease-in-out; 
    cursor: cell; 
    } 

    #nav-icon4 span { 
    display: block; 
    position: absolute; 
    height: 5px; 
    width: 100%; 
    background: darkred; 
    border-radius: 7px; 
    opacity: 2; 
    left: 0; 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    transform: rotate(0deg); 
    -webkit-transition: .25s ease-in-out; 
    -moz-transition: .25s ease-in-out; 
    -o-transition: .25s ease-in-out; 
    transition: .25s ease-in-out; 
    } 

    #nav-icon4 span:nth-child(1) { 
    top: 0px; 
    -webkit-transform-origin: left center; 
    -moz-transform-origin: left center; 
    -o-transform-origin: left center; 
    transform-origin: left center; 
    } 

    #nav-icon4 span:nth-child(2) { 
    top: 10px; 
    -webkit-transform-origin: left center; 
    -moz-transform-origin: left center; 
    -o-transform-origin: left center; 
    transform-origin: left center; 
    } 

    #nav-icon4 span:nth-child(3) { 
    top: 20px; 
    -webkit-transform-origin: left center; 
    -moz-transform-origin: left center; 
    -o-transform-origin: left center; 
    transform-origin: left center; 
    } 

    #nav-icon4.open span:nth-child(1) { 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    top: 0; 
    left: 6px; 
    } 

    #nav-icon4.open span:nth-child(2) { 
    width: 0%; 
    opacity: 0; 
    } 

    #nav-icon4.open span:nth-child(3) { 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    top: 25px; 
    left: 6px; 
    } 
    } 


@media only screen and (min-width : 768px) { 
    h2 { 
     z-index: 1000000; 
     font-size: 1.5em; 
     } 

     p { 
      font-size: 20em; 
      color: white; 
      padding-top: 1em; 
    } 

     ul { 
      list-style-type: none; 
      margin: 0; 
      padding: 0; 
      overflow: hidden; 
    } 

    li { 
    float: right; 
    margin-left: 20px; 
    margin-right: 8px; 
    margin-top: -10px; 
} 

li a { 
    display: block; 
    text-align: center; 
    text-decoration: none; 
} 


.menu { 
    display: block; 
    position: absolute; 
    right: 0px; 
    font-size: .9em; 
    width: 100%; 
    padding-right: 15px; 
    margin-top: 10px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    background: rgba(255, 255, 255, 0); 
    } 
.menu ul { 
    border-bottom: 0; 
    border-top: 0; 
    } 
.menu li { 
    border-bottom: 0; 
    border-top: 0; 
    } 
.menu li:hover { 
    cursor: crosshair; 
    padding-top: 1em; 
    padding-bottom: 1em; 
    padding-right: 15px; 
    padding-left: 1em; 
} 

.menu ul li a:hover { 
    color: white; 
} 

#nav-icon4 { 
    display: none; 
    } 
} 

@media only screen and (min-width : 922px) { 
    li { 
    margin-left: 55px; 
    margin-right: 18px; 

    } 
.menu { 
    padding-right: 1px; 
    } 
} 


@media only screen and (min-width : 1400px) { 
    header { 
     height: 5em; 
     line-height: 5em; 
    } 
    h2 { 
     font-size: 2.6em;  
    } 
    li { 
    margin-left: 55px; 
    margin-right: 30px; 
    } 
    .menu { 
     padding-right: 1px; 
     font-size: 1.2em; 
    } 
} 

    </style> 

<title>hamburgers</title> 
</head> 

<body> 
    <header> 

     <span>Shine Design</span> 
     <div id="nav-icon4"> 
     <span></span> 
     <span></span> 
     <span></span> 
     </div> 

    </header> 

    <div class="menu"> 
     <ul> 
     <a href="#"> 
     <li>LINK ONE</li> 
     </a> 
     <a href="#"> 
     <li>LINK TWO</li> 
     </a> 
     <a href="#"> 
     <li>LINK THREE</li> 
     </a> 
     <a href="#"> 
     <li>LINK FOUR</li> 
     </a> 
     <a href="#"> 
     <li>LINK FIVE</li> 
     </a> 
     </ul> 
    </div> 

    </body> 
    <script> 
    $(document).ready(function(){ 
     $('#nav-icon4').click(function(){ 
     $(this).toggleClass('open'); 
     }); 
    }); 
    </script> 
    </html>

来源

2017-04-23 SShine2

你可以创建一个工作副本？ – brk

https://codepen.io/sshine2/pen/VbjGaE格式已关闭，但该错误未显示在其中。但跳跃的链接在那里。 – SShine2

转到行237和改变这个：

.menu li:hover { 
cursor: crosshair; 
padding-top: 1em; 
padding-bottom: 1em; 
padding-right: 15px; 
padding-left: 1em;

}

这个

.menu li:hover { 
cursor: crosshair; 
padding-top: 1em; 
padding-bottom: 1em; 
padding-right: 0em; 
padding-left: 0em;

}

来源

2017-04-23 06:08:02

耶！谢谢！ – SShine2

跳跃悬停的链接

回答

相关问题