0
내 탐색 표시 줄에 대해 부스트랩을 사용하고 있습니다. 이제 코드를 수정해야했지만 탐색 항목 중 하나를 드롭 다운해야 할 필요가 있음을 알았지 만 부트 스트랩 탐색 막대에 맞춰 올바르게 표시하려고 고심하고 있습니다.부트 스트랩으로 단일 드롭 다운을 얻는 방법
'프로필'옆에 드롭 다운이있는 캐럿이 있으므로 커서를 올려 놓으면 현재 프로필 장소의 자리 표시 자에 넣어 둔 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