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

Question

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

我想要一个漂亮的下拉菜单，但它不会随页面缩放。我曾尝试使用来自某些站点的不同代码，但是当页面在半屏上时，它看起来永远不会好看并且无法正常工作，我希望你们中的一个人可以帮助我解决这个问题，如果可能的话。

我从中获得部分代码的网站:

https://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/

我的 html(5) 代码:

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

我的 CSS 代码:

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

所以你的新代码是:

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><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

希望对您有所帮助。