为了账号安全,请及时绑定邮箱和手机立即绑定

a:hover{margin-top:-10px;}没作用

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

  .nav{position:absolute;right:10px;border-bottom:10px solid #6cf;border-radius:5px;}

  a{color:#000;width:100px;text-align: center;padding:10px;text-decoration:none;

  font-family:sans-serif;

}

  a:hover{background-color: #6cf;color:#ccc;border-radius:5px;margin-top:-10px;}

  </style>

</head>

<body>

<ul>

  <a href="">首页</a>

  <a href="">博客</a>

  <a href="">主题</a>

  <a href="">模板</a>

  <a href="">联系</a>

</ul>

</body>

</html>


正在回答

1 回答


*{margin:0; padding:0; font-size:14px;}

a{color:#333;text-decoration:none}

.nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;}

.nav li{float:left}

.nav li a{display:block; height:30px;text-align:center; line-height:30px; width:80px; background:#efefef; margin-left:1px;}

.nav li a.on, .nav li a:hover{background:#F60;color:#fff; height:35px; line-height:35px; margin-top:-5px }


!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

<ul class="nav">

    <li><a class="on" href="#">首  页</a></li>

    <li><a href="#">博客</a></li>

    <li><a href="#">主题</a></li>

    <li><a href="#">模板</a></li>

    <li><a href="#">联系</a></li>

  </ul>


0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
导航条菜单的制作
  • 参与学习       123899    人
  • 解答问题       813    个

水平、垂直、圆角导航条菜单,让您的技术探索之路更高效

进入课程

a:hover{margin-top:-10px;}没作用

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信