How to scale my css/html dropdown menu? - css

Question

I quite new to programming, as far as html/css is programming. I'm trying to make a website for my own company (in dutch).
I want a nice looking drop-down menu but it won't scale with the page. I have tried using different codes from some sites, but when the page is on half screen it never looks nice and doens't work normally, I was hoping that one of you could help me with this problem, if it is possible at all.
The site i got a part of the code from:
https://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/
My html(5) code:
<nav>
<ul >
<li>Home</li>
<li>
Uitzoeken
<ul
<li>Desktops</li>
<li>Laptops</li>
<li>Producenten</li>
<li>Smartphones</li>
<li>Tablets</li>
<li>Overige</li>
</ul>
</li>
<li>Installeren</li>
<li><a href="Software/Software.html" >Software</a>
<ul>
<li>Basis</li>
<li>Gevorderd
</ul>
<li>Social Media</li>
<li>Problemen</li>
<li>Contact</li>
</ul>
</nav>
My Css code:
nav ul ul {
display : none;
}
nav ul li:hover > ul {
display : block;
}
nav ul {
background: #18c006;
background: linear-gradient(top, #18c0060%, #189c06 100%);
background: -moz-linear-gradient(top, #18c006 0%, #189c06 100%);
background: -webkit-linear-gradient(top, #18c006 0%,#189c06 100%);
box-shadow : 0px 0px 9px rgba(0,0,0,0.15);
padding : 0 20px;
border-radius : 10px;
list-style : none;
position : relative;
display : inline-table;
}
nav ul:after {
content : "";
clear : both;
display : block;
}
nav ul li {
float : left;
}
nav ul li:hover a {
color : #810a11;
}
nav ul li a {
display : block;
padding : 25px 40px;
color : #a60a11;
text-decoration : none;
}
nav ul ul {
background : #18c006;
border-radius : 0px;
padding : 0;
position : absolute;
top : 100%;
}
nav ul ul li {
float : none;
position : relative;
}
nav ul ul li a {
padding : 15px 40px;
color : #a60a11;
}
nav ul ul li a:hover {
background : #18c006;
}

Answer 1

So your new code is :
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
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;
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
Hope it help.

Answer 2

I want a nice looking drop-down menu but it won't scale with the page.
I have tried using different codes from some sites, but when the page
is on half screen it never looks nice and doesn't work normally, I was
hoping that one of you could help me with this problem, if it is
possible at all.
Your request is vague, so it means we have to guess at your needs. Do you mean, when the browser window is very narrow, you don't like how that particular (from the article) menu transforms? Do you wish to keep the horizontal bar, with a drop-down menu, even in the most narrow view (e.g. 300px wide)?
If that's the case, and your technical skills are low, then continue looking at other articles and demos until you find something you like. However, you will find, most modern menu systems and themes will have some kind of menu system which transforms anything less than say 500-600px wide screens. Search google for "Responsive design".
If you want to tweak the code yourself, technically you should be investigating CSS media queries. You can use them to setup conditional rules for different display sizes.