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

Dec.30,2021

remove 2.3 horizontal this a tag float: left;


overlap problem: first of all, the a tag under user-dropdown is floating, and then ul is positioned by position, ul will be separated from the document stream, and top and ul values are not specified, so it will occupy the position where it should be (that is, the position of the parent tag span.user-dropdown, and because it is separated from the document stream, the 2.3 horizontal a tag will not squeeze the ul), so the ul and 2.3 horizontal a tags coincide. The coincidence of the first li and 2.3 horizontal a tags under ul is actually the reason why ul and 2.3 horizontal a tags coincide

.

leave blank after zooming in: just give the background:-sharp333333 for topbar to container. After zooming in, I see that the width of topbar is very small and does not occupy the bank at 100% (as for the reason I don't understand yet)

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-7ae432-15b2d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-7ae432-15b2d.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?