<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>IBAE-Information Library</title>
<link rel="stylesheet" href="/Users/jeevabharathi/Desktop/Project.css">
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
</head>
<body>
<nav>
<h1 style="font-family:Helvetica;">
<ul class="cf">
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Sub-menu Item 1</a></li>
<li><a href="#">Sub-menu Item 2</a></li>
<li><a href="#">Sub-menu Item 3</a></li>
</ul>
</li>
<li><a class="dropdown" href="#">Menu 2</a>
<ul>
<li><a href="#">Sub-menu Item 1</a></li>
<li><a href="#">Sub-menu Item 2</a></li>
<li><a href="#">Sub-menu Item 3</a></li>
</ul>
</li>
<li><font size="+4", color="white">TITLE</font> <br></li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Sub-menu Item 1</a></li>
<li><a href="#">Sub-menu Item 2</a></li>
<li><a href="#">Sub-menu Item 3</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a>
<ul>
<li><a href="#">Sub-menu Item 1</a></li>
<li><a href="#">Sub-menu Item 2</a></li>
<li><a href="#">Sub-menu Item 3</a></li>
</ul>
</li>
</ul>
</h1>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>>
</html>
这是我的 html 代码。 Bootstrap 和 bootstrapcdn 导致突出显示蓝色和下划线的文本。两者都是最新的。 我正在尝试在元素中使用淡入淡出效果和平滑滚动效果。使用 Bootstrap 在理论上似乎更容易，所以我为我的元素选择了它。 如何避免突出显示？
编辑:这是 CSS
nav{
text-decoration: none;
}
nav h1
{
margin:-10px;
background-color: rgb(0, 0, 0);
border: 25px solid rgba(0, 0, 0, 0);
text-align: center;
position: fixed;
position: top;
min-width: 100%;
}
nav ul
{
-webkit-font-smoothing:antialiased;
text-shadow:0 1px 0 rgba(255, 255, 255, 0);
background: rgb(0, 0, 0);
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
nav li
{
float: left;
margin: 0;
padding: 0;
position: relative;
min-width: 20%;
}
nav a
{
background: rgb(0, 0, 0);
color: rgb(255, 255, 255);
display: block;
font: bold 15px/50px helvetica;
padding: 0 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav .dropdown:after
{
content: '';
}
nav .dropdown:hover:after
{
content:''
}
nav li:hover a
{
background: rgb(0, 0, 0);
}
nav li ul
{
float: left;
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav li:hover ul
{
opacity: 1;
top: 50px;
visibility: visible;
}
nav li ul li
{
float: none;
width: 100%;
}
nav li ul a:hover
{
background: rgb(255, 0, 0);
}
/* Clearfix */
.cf:after, .cf:before
{
content:"";
display:table;
}
.cf:after
{
clear:both;
}
.cf
{
zoom:1;
}
最佳答案
因为 Bootstrap 在其 CSS 文件中包含了自己的样式。
您可以通过更改您自己的 CSS 中的样式来摆脱这种情况，如有必要，通过将 !important 添加到您的 CSS 声明中。
将此添加到您的 nav a 以覆盖 Bootstrap 的 text-decoration:
nav a {
text-decoration: none !important;
}
并将此添加到您的 nav li:hover a 以将颜色改回白色:
nav li:hover a {
color: white;
}
这是一个 JSFiddle使用我上面所做的更改进行演示。
关于html - 当我使用 bootstrap 时，我的导航栏元素会以蓝色突出显示并带有下划线。为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50260323/