0
私はナビゲーションバーにboostrapを使用しています。 これでコードを修正する必要がありましたが、ナビゲーション項目の1つをドロップダウンする必要があることがわかりましたが、私はそれをブートストラップナビバーに合わせて正しく表示するように苦労しています。ブートストラップで単一のドロップダウンを取得する方法
「プロファイル」の横にドロップダウンが表示されるように、キャレットが表示されるようにしようとしています。ホバー上に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を設定できますか？ – WillardSolutions
https://jsfiddle.net/db3mtrpx/1/これは問題ありませんか？私はこれのすべてに新しいので、うまくいけば、私はそれを正しく設定したことが恐れている。そうでない場合は教えてください。 – Shadowsista