个人中心
gpt4 book ai didi

HTML5 + CSS3 下拉导航栏

转载 作者：太空宇宙 更新时间：2023-11-03 20:54:56 25 4
gpt4 key购买 nike

各位，我还是HTML5和CSS3的初学者

我在使用导航栏时遇到问题，导致底部段落在我悬停时略微移动。知道如何解决它或发生了什么吗？

这是 HTML 代码:

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>HTML5, CSS3 and jQuery Navigation menu</title>
<link rel="stylesheet" href="css/nav.css">
<!--[if IE]>
  <script src="html5.js"></script>
<![endif]-->
</head>

<body class="no-js">
  <nav id="topNav">
        <ul>
            <li><a href="#" title="Nav Link 1">HOME</a></li>
           <li><a href="#" title="Nav Link 1">SERVICES</a>
                <ul>
                    <li><a href="#" title="Sub Nav Link 1">Sub Nav Link 1</a></li>
                    <li><a href="#" title="Sub Nav Link 2">Sub Nav Link 2</a></li>
                    <li><a href="#" title="Sub Nav Link 3">Sub Nav Link 3</a></li>
                    <li><a href="#" title="Sub Nav Link 4">Sub Nav Link 4</a></li>
                    <li class="last"><a href="#" title="Sub Nav Link 5">Sub Nav Link 5</a></li>
                </ul>        
              </li>
            <li><a href="#" title="Nav Link 1">ABOUT US</a></li>
            <li class="last"><a href="#" title="Nav Link 1">ENQUITIES</a></li>
        </ul>
  </nav>      
    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."<p>
  <script src="js/jquery.js"></script>
  <script src="js/modernizr.js"></script>
</body>

</html>

这是CSS

/* JS disabled styles */
.no-js nav li:hover ul { display:block; }

/* base nav styles */
nav {
  margin: 0 auto 20px;
  position: relative;
  background-color: #FFFFFF;
  font: 16px Tahoma, Sans-serif;
}
nav ul { padding:0; margin:0; }
nav li { position:relative; float:left; list-style-type:none; }
nav ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

nav ul a:hover { color: #F90; border-bottom: thin; border-bottom-style:solid;}

nav li a {
  display: block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
  font-weight: 600;
}
nav li a:focus { outline:none; text-decoration:underline; }
nav li:first-child a { border-left:none; }
nav li.last a { border-right:none; }
nav a span { display:block; float:right; margin-left:5px; }
nav ul ul { display:none; width:110%; position:absolute; left:0; background:#FFFFFF; }
nav ul ul li { float:none; }
nav ul ul a { padding:5px 10px; border-left:none; border-right:none; font-size:14px; }
nav ul ul a:hover { color: #F90; }

/* CSS3 */

.cssgradients nav li:hover { background-image:-moz-linear-gradient(0% 100px 90deg, #999, #222); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#555)); }
.borderradius nav ul ul { -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; }
.boxshadow.rgba nav ul ul { background-color:rgba(0,0,0,0.8); -moz-box-shadow:2px 2px 2px rgba(0,0,0,.8); -webkit-box-shadow:2px 2px 2px rgba(0,0,0,.8); box-shadow:2px 2px 2px rgba(0,0,0,.8); }
.rgba nav ul ul li { border-left:1px solid rgba(0,0,0,0.1); border-right:1px solid rgba(0,0,0,0.1); }
.rgba nav ul ul a:hover { background-color:rgba(85,85,85,.9); }
.borderradius.rgba nav ul ul li.last { border-left:1px solid rgba(0,0,0,0.1); border-bottom:1px solid rgba(0,0,0,0.1); -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; }
.csstransforms ul a span { -moz-transform:rotate(-180deg);-webkit-transform:rotate(-180deg); }

实际上，我正在使用它的教程并尝试转换我自己的想法。任何人，请。谢谢。

最佳答案

添加以下 CSS 行:

nav ul a { 
   border-bottom: thin; border-bottom-style: solid; border-bottom-color: transparent;
}

关于HTML5 + CSS3 下拉导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11589322/

25 4 0
文章推荐： jquery - CSS Transition 未被执行
文章推荐： c# - Unity3D 中可能存在错误？
文章推荐： python - 如何对消息数组使用 fit 方法
文章推荐： c# - 从 appsettings c# 读取 json 数组
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com