About the overlap of drop-down menus

problem description

the first element of li in the drop-down menu overlaps with the sibling element of ul

the environmental background of the problems and what methods you have tried

tried to add positioning to no avail

related codes

/ / Please paste the code text below (do not replace the code with pictures)
HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title> -  MIX 3 8 6 Pro </title>
  <link rel="shortcut icon" href="https://www.mi.com/favicon.ico" />
  <link rel="stylesheet" href="css/style.css" />
</head>

<body>
  <!--  -->
  <div class="topbar">
    <!--  -->
    <div class="container">
      <!--  -->
      <div class="topbar-nav">
        <a href="-sharp"></a> <span>|</span>
        <a href="-sharp">MIUI</a><span>|</span>
        <a href="-sharp">IoT</a><span>|</span>
        <a href="-sharp"></a><span>|</span>
        <a href="-sharp"></a> <span>|</span>
        <a href="-sharp"></a><span>|</span>
        <a href="-sharp"></a><span>|</span>
        <a href="-sharp"></a><span>|</span>
        <a href="-sharp"> app</a> <span>|</span>
        <a href="-sharp">Select Region</a><span>|</span>
      </div>
      <!--  Over -->

      <!--  -->
      <div class="topbar-cart">
        <a href="-sharp"><span>(0)</span></a>
      </div>
      <!--  Over -->

      <!--  -->
      <div class="topbar-info">
        <span class="user-dropdown">
          <a href="-sharp"></a>
          <ul>
            <li><a href="-sharp"></a></li>
            <li><a href="-sharp"></a></li>
            <li><a href="-sharp"></a></li>
            <li><a href="-sharp"></a></li>
            <li><a href="-sharp"></a></li>
          </ul>
        </span>
        <span>|</span>
        <a href="-sharp"></a><span>|</span>
        <a href="-sharp" class="sep"></a><span>|</span>
      </div>
      <!--  Over -->
    </div>
    <!--  Over -->
  </div>
  <!--   Over -->
</body>

</html>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
    "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  height: 8000px;
}
a {
  text-decoration: none;
}

.topbar {
  background: -sharp333333;
}

.container {
  width: 1226px;
  /*  */
  margin: 0 auto;
}

.container::before,
.container::after {
  content: "";
  display: table;
}

.container::after {
  clear: both;
}

.topbar a {
  color: -sharpb0b0b0;
  font-size: 12px;
}

.topbar a:hover {
  color: white;
}

.topbar-nav {
  height: 40px;
  line-height: 40px;
  float: left;
  font-size: 0px;
}

.topbar-nav span {
  font-size: 12px;
  color: -sharp424242;
  font-family: sans-serif;
  margin: 0.5em;
}

.topbar-info,
.topbar-cart {
  float: right;
}

.topbar-cart a {
  display: block;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 120px;
  background-color: -sharp424242;
}

.topbar-cart a:hover {
  color: -sharpff6700;
  background-color: -sharpfff;
}

.topbar-cart span {
  font-size: 12px;
  margin-left: -4px;
}

.topbar-info a {
  float: left;
  padding: 0px 5px;
  height: 40px;
  line-height: 40px;
}

.topbar-info {
  margin-right: 15px;
}

.topbar-info span {
  float: left;
  font-family: sans-serif;
  color: -sharp424242;
  height: 40px;
  line-height: 40px;
}

.topbar-info .sep {
  padding: 0 10px;
}
.user-dropdown{
  display: inline-block;
  width: 130px;
}

.user-dropdown ul{
    list-style-type: none;
    display: none;
    position: absolute;
}
.user-dropdown:hover{
  background: -sharpfff;
}
.user-dropdown:hover ul{
  display: block;
}

what result do you expect? What is the error message actually seen?

Why does it overlap? thank you

there is another problem: after the page is enlarged, a large white background will appear in the upper right corner