- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我不知道为什么这不起作用?我正在尝试制作一个下拉菜单,当我将鼠标悬停在页面上时它可以工作,但如果我将鼠标悬停在链接中它就不起作用简而言之,这个下拉列表的作用相反我需要修复此下拉菜单或更好的方法
HTML
<body>
<div class="wrap">
<nav class="navbar navbar-default navbar-fixed-top navbarcolor ">
<div class="container ">
<div class="navbar-header active">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand Brand-Color active " href="#">MediQ.ch</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="navbar-R-C " href="#">AdminStraion</a>
</li>
<li class="dropdown sub-menu-parent">
<a id="drop" href="#" class="navbar-R-C nav-link dropdown-toggle " data-toggle="dropdown" aria-expanded="false">BookMarker
<span class="caret"></span></a>
<ul id="content" class="dropdown-menu " role="menu">
<li><a class="content " href="#">ACETILXSUBSTANCE2</a>
</li>
<li><a class="content " href="#">HIDROCORTIZOLXBENZTIL</a>
</li>
<li><a class="content " href="#">SUBSTANCE3XSUBSTANCE4</a>
</li>
</ul>
</li>
<li><a class="navbar-R-C " href="#">Contact</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</div>
</body>
CSS
.navbar-R-C:hover {
color: white !important;
}
.content {
color: White !important;
}
.dropdown-menu {
min-width: 250px;
max-width: 250px;
text-align: center;
background-color: #3E606F;
margin-top: -6px !important;
color: white !important;
border-radius: 15px !important;
}
.dropdown-menu > li > a:hover {
text-align: center;
background-color: #EC407A;
font-weight: bold;
margin-left: 7px !important;
margin-right: 7px !important;
display: inline-block;
color: White;
border-radius: 10px !important;
}
.dropdown-menu:after {
position: absolute;
margin-left: 210px;
top: -6px;
left: -30px;
border-right: 10px solid transparent;
border-bottom: 10px solid #3E606F;
border-left: 10px solid transparent;
content: '';
}
.dropdown:hover .dropdown-menu {
display: block;
}
JS
$(document).ready(function() {
$('.wrap nav ul li').hover(function() {
// Toggles slide but stops if not hover anymore
$(this).find('ul').stop().slideToggle();
// Toggles on and of the active class (triangle)
$(this).find('div').toggleClass('active');
}
);
}
);
最佳答案
用这个。它包含您的代码,但一些 css 被 bootstrap css 覆盖,因此您必须覆盖 bootstrap css 才能看起来像您想要的。新的东西是 bootstrap.css、bootstrap.js 和 jquery.js 不要忘记在此处包含这些文件,它直接从网络加载,您可以下载并链接这些文件以供离线使用。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top navbarcolor ">
<div class="container ">
<div class="navbar-header active">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand Brand-Color active " href="#">MediQ.ch</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="navbar-R-C " href="#">AdminStraion</a>
</li>
<li class="dropdown sub-menu-parent">
<a id="drop" href="#" class="navbar-R-C nav-link dropdown-toggle " data-toggle="dropdown" aria-expanded="false">BookMarker
<span class="caret"></span></a>
<ul id="content" class="dropdown-menu " role="menu">
<li><a class="content " href="#">ACETILXSUBSTANCE2</a>
</li>
<li><a class="content " href="#">HIDROCORTIZOLXBENZTIL</a>
</li>
<li><a class="content " href="#">SUBSTANCE3XSUBSTANCE4</a>
</li>
</ul>
</li>
<li><a class="navbar-R-C " href="#">Contact</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu for the "Page 1" button in the navigation bar.</p>
</div>
</body>
</html>
关于javascript - js 下拉菜单不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45725880/
今天有小伙伴给我留言问到,try{...}catch(){...}是什么意思?它用来干什么? 简单的说 他们是用来捕获异常的 下面我们通过一个例子来详细讲解下
我正在努力提高网站的可访问性,但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接,因
说现在是 6 点,我有一个 Timer 并在 10 点安排了一个 TimerTask。之后,System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我就废话不多说了,大家还是直接看代码吧~ ? 1
Maven系列1 1.什么是Maven? Maven是一个项目管理工具,它包含了一个对象模型。一组标准集合,一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。 核心功能 Mav
我是一名优秀的程序员,十分优秀!