【发布时间】：2016-10-14 05:32:26
【问题描述】：
我正在为我的导航栏使用 boostrap。 我们现在需要调整我们的代码，我发现需要在其中一个导航项上设置一个下拉菜单，但是我正在努力让它适应引导导航栏并让它正确显示。
我正在努力做到这一点，以便在“个人资料”旁边有一个带有下拉菜单的插入符号，在悬停时会显示 2 个链接，目前我已将其放在个人资料位置的占位符中。
<!DOCTYPE html>
<html lang="en">
<head>
<title> Home </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" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="General.CSS">
<link rel="stylesheet" href="Blog.CSS">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- NavBar -->
<nav class="navbar navbar-inverse">
<article class="container-fluid">
<article class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="NavTitle" href="Home.html">John Doe</a>
</article>
<article class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<ul class="dropdown-menu">
<li><a href="Home.html"> Home </a></li>
<li><a href="Profile.html"> Profile </a></li>
<li><a href="Contact.html"> Contact </a></li>
<li><a href="Tutorial.html"> Tutorial </a></li>
<li><a href="Blog.html"> Blog </a></li>
</ul>
</li>
<li><a href="Home.html"> Home </a></li>
<li><a href="Profile.html" > Profile </a>
<div class="dropdownList">
<span class="caret"></span>
<div class="dropdownContent">
<h5> <a href="Profile.html"> Profile </a> </h5>
<h5> <a href="Profile.html"> Profile </a> </h5>
</div>
</div>
</li>
<li><a href="Contact.html"> Contact </a></li>
<li><a href="Blog.html"> Blog </a></li>
</ul>
</article>
</article>
</nav>
</body>
博客 CSS：
.dropdownList {
display: inline-block;
}
.dropdownContent {
display: none;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdownList:hover .dropdownContent {
display: block;
}
通用 CSS：
.navbar {
border-radius:0px;
font-family:'Lato', sans-serif;
margin-bottom:0px;
}
.NavTitle {
color:white;
letter-spacing:20px;
font-size:30px;
}
.navbar-header {
text-decoration:none;
}
.navbar a:hover {
text-decoration:none;
color:white;
}
.navbar-nav>li>a {
color:white !important;
font-size:15px;
}
.navbar ul {
list-style-type:none;
}
.navbar li a:hover {
background-color:#009999 !important;
color:white;
}
【问题讨论】：
-
你能为此设置一个 JSFiddle 吗？
-
jsfiddle.net/db3mtrpx/1 可以吗？恐怕我对这一切都不熟悉，所以希望我已经正确设置了它。如果没有，请告诉我。
标签： html css twitter-bootstrap