Как создать закрепленную навигационную панель с раскрывающимся меню с помощью HTML? ⇐ Html

[Anonymous]

Я создаю веб-страницу HTML, содержащую прикрепленную панель навигации с раскрывающимся меню. Однако, когда я его создал, раскрывающееся меню не работает на липкой панели навигации, и наоборот. ниже приведен снимок экрана с результатами обоих кодов.
*изображение с раскрывающимся меню, но без закрепленной панели навигации
*изображение с закрепленной панелью навигации, но без раскрывающегося меню
ниже приведен код для «изображения с раскрывающимся меню, но без закрепленной панели навигации»

Код: Выделить всё

    



[*]

body {margin:0;font-family:Arial}

.topnav {
overflow: hidden;
background-color: #333;
}

.topnav a {
list-style-type: none;
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
position: sticky;
}

.active {
background-color: #04AA6D;
color: white;
}

.topnav .icon {
display: none;
}

.dropdown {
float: left;
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}

.dropdown-content a:hover {
background-color: #ddd;
color: black;
}

.dropdown:hover .dropdown-content {
display: block;
}

@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}

@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}




Scroll Down
Scroll down to see the sticky effect.

[url=#home]Home[/url]
[url=#news]News[/url]
[url=#contact]Contact[/url]

Dropdown
[i][/i]


[url=#]Link 1[/url]
[url=#]Link 2[/url]
[url=#]Link 3[/url]


[url=#about]About[/url]
[url=javascript:void(0);]☰[/url]


Responsive Topnav with Dropdown
Resize the browser window to see how it works.
Hover over the dropdown button to open the dropdown menu.

Sticky Navigation Bar Example
The navbar will [b]stick[/b]  to the top when you reach its scroll position.
[b]Note:[/b] Internet Explorer do not support sticky positioning and Safari         requires a -webkit- prefix.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.


function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}

ниже приведен код «изображения с прикрепленной панелью навигации, но без раскрывающегося меню»

Код: Выделить всё

body {
font-size: 20px;
}
body {margin:0;}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 16px 20px;
text-decoration: none;
}

li a:hover {
background-color: #111;
}

/*======================================================================*/

body {
background-color:white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #38444d;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
display: block;
}

footer {
text-align: center;
padding: 3px;
background-color: DarkSalmon;
color: white;
}





Scroll Down
Scroll down to see the sticky effect.

[list]
[url=#home]Home[/url]
[*][url=#news]News[/url]
[*]
[url=javascript:void(1)]Dropdown[/url]

[url=#]Link 1[/url]
[url=#]Link 2[/url]
[url=#]Link 3[/url]

[/list]

Sticky Navigation Bar Example
The navbar will [b]stick[/b] to the top when you reach its scroll position.
[b]Note:[/b] Internet Explorer do not support sticky positioning and Safari requires a -webkit- prefix.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.


Author: Hege Refsnes

[url=mailto:hege@example.com]hege@example.com[/url]

Пожалуйста, мне нужна помощь с этим, поскольку я новичок в HTML и CSS.

Подробнее здесь: https://stackoverflow.com/questions/721 ... using-html