我正在努力通过 Google 解决一个非常简单的问题。我的主要问题是我似乎无法弄清楚如何水平调整下拉菜单框的边框。我在 css 中尝试了 max-width 命令，但它只对一侧执行此操作，而且我的文本没有在该框内居中。
这是我练习 html/css/js 技能的元素:https://project01-assh.web.app
@charset "UTF-8";
@import "https://fonts.googleapis.com/css?family=Poppins:100,200,400,500,600,700,800|Nunito:300,400,600,700,800";
body {
background-color: #2250fc;
}
li {
list-style-type: none;
}
.dropdown {
text-align: center;
position: absolute;
top: 3%;
left: 90%;
transform: translateX(-50%);
color: #ffffff;
font-family: poppins, sans-serif;
font-size: 15px;
font-weight: 555;
display: inline-block;
}
#logo {
position: absolute;
top: 1%;
left: 1%;
color: #ffffff;
text-decoration: none;
font-family: poppins, sans-serif;
font-size: 40px;
font-weight: 800;
letter-spacing: 1.5px;
}
a {
color: #ffffff;
text-decoration: none;
}
h1 {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
color: #ffffff;
font-family: poppins, sans-serif;
font-size: 40px;
font-weight: 400;
letter-spacing: .5px;
}
#main_button {
position: relative;
transition: .5s ease;
top: 1%;
left: 90%;
color: #ffffff;
height: auto;
width: auto;
max-width: 100px;
max-height: 100px;
}
nav ul li a {
display: block;
padding: 14px 24px;
}
nav ul li {
float: left;
list-style: none;
position: relative;
}
nav ul li ul {
display: none;
position: absolute;
left: 10%;
top: 50px;
transform: translateX(-70%);
background-color: #fff;
padding: 10px;
border-radius: 15px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 200px;
border-radius: 4px;
}
nav ul li ul li a {
color: black;
font-size: 12px;
font-family: poppins, sans-serif;
font-weight: 555;
padding: 8px 14px;
}
nav ul li ul li a:hover {
color: #007bff;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Project01" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Project01</title>
<link rel="icon" type="image/png" href="images/favicon.png">
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="logo"> <a href="/"><span class="logo">АСБ</span></a> </div>
<h1> Автоматические Системы Безопастности</h1>
<div class="dropdown">
<nav>
<p></p>
<ul>
<li><a href="#">Сервисы</a>
<ul>
<li><a href="#">Something01</a></li>
<li><a href="#">Something02</a></li>
<li><a href="#">Something03</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="particles-dots" class="particles"></div>
<script src="plugins/particles/particles.js"></script>
<script src="plugins/particles/particles-dots.js"></script>
</body>
</html>下拉菜单在右边。到目前为止，如果您能指出我的代码中的不良做法/错误，我将不胜感激。我正在尝试以正确的方式学习 Web 开发作为一项长期职业。
感谢您的宝贵时间，祝您有美好的一天! 很抱歉这样的基本要求，我希望你可以在这里提出。
最佳答案
如果要调整导航栏的大小，需要去掉li中的200px:
nav ul li ul li {
width: 200px;
border-radius: 4px;
}
如果您需要更多空间，请使用填充或边距。
关于css - 如何在 CSS 中正确调整下拉菜单的大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59671007/