时间戳

首页 > 解决方案 > How to properly resize dropdown menu in CSS?

css - How to properly resize dropdown menu in CSS?

问题描述

Pretty simple question that I'm struggling to solve via Google. My main issue is that I can't seem to figure out how to resize dropdown menu box's borders horizontally. I tried max-width command in css, but it only does it for one side, and my text isn't centered inside that box.

Here's my project where I'm practicing my html/css/js skills: 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>

Dropdown menu is to the right. I'd really appreciate if you can point out bad practices/mistakes in my code so far. I'm trying to learn web development the proper way as a long term career.

Thanks for your time and have a wonderful day! Sorry for such basic request, I hope it's okay to ask it here.

标签： css

解决方案

if you want to resize the nav bar, you need to remove the 200px in li:

nav ul li ul li {
  width: 200px;
  border-radius: 4px;
}

and use padding or margin if you need more space.

推荐阅读