如何缩放我的css/html下拉菜单？

就html/css编程而言，我对编程还很陌生。我正在尝试为我自己的公司建立一个网站（荷兰语）

我想要一个好看的下拉菜单，但它不能与页面缩放。我曾尝试使用一些网站的不同代码，但当页面处于半屏幕状态时，它看起来并不好看，也不能正常工作，我希望你们中的一位能够帮助我解决这个问题，如果可能的话

我从以下网站获得部分代码：

我的html（5）代码：

因此，您的新代码是：

ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
李{
浮动：左；
}
李安，.dropbtn{
显示：内联块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
li a:悬停，.下拉：悬停.dropbtn{
背景色：红色；
}
li.下拉列表{
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.下拉内容a:悬停{背景色：#f1f1}
.下拉：悬停.下拉内容{
显示：块；

将鼠标悬停在“下拉”链接上以查看下拉菜单。

我想要一个好看的下拉菜单，但它不能与页面缩放。 我曾尝试使用不同的代码从一些网站，但当网页 是在半屏幕上，它从来都不好看，也不正常工作，我是 希望你们中的一个能帮我解决这个问题，如果是的话 完全有可能

您的要求不明确，因此这意味着我们必须猜测您的需求。您的意思是，当浏览器窗口非常窄时，您不喜欢（文章中）特定菜单的转换方式吗？您是否希望即使在最窄的视图（例如300px宽）中也保留带有下拉菜单的水平栏

如果是这种情况，而且你的技术水平很低，那么继续阅读其他文章和演示，直到你找到你喜欢的东西。然而，你会发现，大多数现代菜单系统和主题都会有某种菜单系统，可以转换小于500-600px宽屏幕的任何东西。搜索谷歌搜索“响应式设计”

如果你想自己调整代码，技术上你应该研究CSS媒体查询。你可以使用它们为不同的显示大小设置条件规则

<nav>
<ul >
       <li><a href="Index.html">Home</a></li>
        <li>
            <a href="Uitzoeken/Uitzoeken.html">Uitzoeken</a>
            <ul
                 <li><a href="Uitzoeken/Computerbouwen/Computerbouwen.html">Desktops</a></li>
                <li><a href="Uitzoeken/Laptopkeuzehulp/Laptopkeuzehulp.html">Laptops</a></li>
                <li><a href="Uitzoeken/Producentenelektronica/Producentenelektronica.html">Producenten</a></li>
                <li><a href="Uitzoeken/Smartphonekeuzehulp/Smartphonekeuzehulp.html">Smartphones</a></li>
                <li><a href="Uitzoeken/Tabletkeuzehulp/Tabletkeuzehulp.html">Tablets</a></li>
            <li><a href="Uitzoeken/Overige/Overige.html">Overige</a></li>
        </ul>
        </li>
            <li><a href="Installeren/Installeren.html">Installeren</a></li>
           <li><a href="Software/Software.html" >Software</a>
        <ul>
               <li><a href="Software/Basis/Basis.html">Basis</a></li>
               <li><a href="Software/Gevorderd/Gevorderd.html">Gevorderd</a>
        </ul>
          <li><a href="SocialMedia/SocialMedia.html">Social Media</a></li>
          <li><a href="Problemen/Problemen.html">Problemen</a></li>
          <li><a href="Contact/Contact.html">Contact</a></li>        
</ul>
</nav>

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;
            }