Я пытаюсь создать панель навигации, в которой есть выпадающий список. Я попробовал начальную загрузку и попытался скопировать и выполнить в том же классе, но не сработал. пытался скопировать некоторые работы там и не работал, я не знаю, как это изменить.
и я немного новичок в html и css, и я пытаюсь что-то построить самостоятельно. Помогите мне, пожалуйста
Вот код:
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #2196F3;
color: white;
}
.topnav .login-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
width: 120px;
}
.topnav .login-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background-color: #555;
color: white;
font-size: 17px;
border: none;
cursor: pointer;
}
@media screen and (max-width: 600px) {
.topnav .login-container {
float: none;
}
.topnav a,
.topnav input[type=text],
.topnav .login-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
.dropup,
.dropdown {
position: relative;
}
.dropdown-toggle::after {
display: inline-block;
width: 0;
height: 0;
margin-left: 0.3em;
vertical-align: middle;
content: "";
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-left: 0.3em solid transparent;
}
.dropdown-toggle:focus {
outline: 0;
}
.dropup .dropdown-toggle::after {
border-top: 0;
border-bottom: 0.3em solid;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 10rem;
padding: 0.5rem 0;
margin: 0.125rem 0 0;
font-size: 1rem;
color: #292b2c;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
}
.dropdown-divider {
height: 1px;
margin: 0.5rem 0;
overflow: hidden;
background-color: #eceeef;
}
.dropdown-item {
display: block;
width: 100%;
padding: 3px 1.5rem;
clear: both;
font-weight: normal;
color: #292b2c;
text-align: inherit;
white-space: nowrap;
background: none;
border: 0;
}
.dropdown-item:focus, .dropdown-item:hover {
color: #1d1e1f;
text-decoration: none;
background-color: #f7f7f9;
}
.dropdown-item.active, .dropdown-item:active {
color: #fff;
text-decoration: none;
background-color: #0275d8;
}
.dropdown-item.disabled, .dropdown-item:disabled {
color: #636c72;
cursor: not-allowed;
background-color: transparent;
}
.show > .dropdown-menu {
display: block;
}
.show > a {
outline: 0;
}
.dropdown-menu-right {
right: 0;
left: auto;
}
.dropdown-menu-left {
right: auto;
left: 0;
}
.dropdown-header {
display: block;
padding: 0.5rem 1.5rem;
margin-bottom: 0;
font-size: 0.875rem;
color: #636c72;
white-space: nowrap;
}
.dropdown-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 990;
}
.dropup .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 0.125rem;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<div class="login-container">
<form >
<div class="dropdown">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</form>
</div>
</div>
</body>
</html>