Fix a cascading css menu to the top - html

Question

I've been trying to get a menu to stick to the top of the page no matter where you scroll, but I am unable to do so. Here is my code:
body#beta a#beta,
body#zte a#zte,
body#honor a#honor,
body#samsung a#samsung,
body#market a#market,
body#beta a#beta,
active {
background-color: #0D47A1;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
active {
background-color: #0D47A1;
}
.active li {
background: #fff;
}
ul a,.dropbtn {
display: inline-block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.dropdown {
display: inline-block;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: fixed;
top: 40px;
background-color: #fff;
min-width: 120px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.dropdown-content a {
color: #000;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<ul>
<ul class="dropdown">
Progam 1
<div class="dropdown-content">
<ul class="active" id=menu position=fixed>
<li><a href="" style="color:black; " id=home>Home Page</a></li>
<li><a href="" style="color:black; " id=zte>ZTE</a></li>
<li><a href="" style="color:black; " id=honor>Honor</a></li>
<li><a href="" style="color:black; " id=samsung>Samsung</a></li>
<li><a href="" style="color:black; " id=market>Newsletter</a></li>
</div>
</ul>
<ul class="dropdown">
<li class="active">Progam 2 BETA</li>
<div class="dropdown-content">
<ul class="active" id=menu position=fixed>
<li><a href="" style="color:black; " id=beta> Progam 2 Home Page</a></li>
</div>
</ul>
</ul>
I've tried doing
position:fixed;
and
top:0px;
but it will only become a jumbled mess.
Can anyone help me figure out how to get the entire menu to be fixed at the top?

Answer 1

position:fixed;
top:0;
is all you need.
This gets the element outside the normal flow of content and places it at the top of the viewport no matter where you scroll in the content (by default the viewport is the browser window - but it can be a parent iframe or any parent element that has a few select 3d transforms).
You have to make sure the body element doesn't have any margins (body{margin:0;} will take care of that).
Your problem is that you do not have a normal flow of content (at least in this example).
Another rather important thing to add is that IoS devices ignore position:fixed; and replace it with position:absolute;. Apparently, they consider position:fixed; a liability to online security (citation needed). It's a bad design decision, but it's how things are. Anyway, in order for your element to remain "fixed" on IoS, you need to make sure it doesn't have a parent with a set position (other than static), which kind of beats the whole purpose of using position:fixed in the first place.
Yeah, I know. Talk to the apple.
Note: in some newer versions of IoS, the position:fixed; property is only ignored in special states, such as when the keyboard is opened.