悬停时，菜单会在导航栏中向左移动

Question

首先，我是 HTML-CSS 的新人。在制作这个项目时，我在导航栏菜单中遇到了问题。我正在制作一个下拉菜单。制作下拉菜单后；每当我将鼠标悬停在菜单（面板）上时，它就会向左移动。所以，我需要帮助。我把我的代码放在下面。我也在下面添加了一张图片。提前致谢。

body, html{
    height: 100%;
    margin: 0;
    padding:0;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
}
a {
    color: black;
    text-decoration: none;

}
body {
    background: url("background0.jpg") no-repeat;

    background-size: auto 100%;

    background-repeat: no-repeat;
    background-position: right top;

}

#background {
    position: absolute;
    top: 100%;

}

.logo{  
    float:left;
    margin-top: 15px;
    margin-left: 50px;    
}



nav{
    padding: 15px 0px;
    width: 100%;
}

ul{
    padding: 0;
    position: relative;

    list-style-type: none;
    float: right; 
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 550;



}

ul li {
    display: inline-block;

    padding: 5px 5px;
    color: black;    
    margin: 0px 0px 0px 1px;

}



.home{

    padding: 4px 15px;

    text-align: center;
    cursor: pointer;
    outline: none;

    background-color: transparent;
    border: none;
    border-radius: 18px;
}

.home:hover{
    background-color: #cce0ff;
}


.events{

    padding: 4px 15px;

    text-align: center;
    cursor: pointer;
    outline: none;

    background-color: transparent;
    border: none;
    border-radius: 18px;
}

.events:hover{
    background-color: #cce0ff;
}

.activities{

    padding: 4px 15px;

    text-align: center;
    cursor: pointer;
    outline: none;

    background-color: transparent;
    border: none;
    border-radius: 18px;
}

.activities:hover{
    background-color: #cce0ff;
}

.contact{

    padding: 4px 15px;

    text-align: center;
    cursor: pointer;
    outline: none;

    background-color: transparent;
    border: none;
    border-radius: 18px;

}


.contact:hover{
    background-color: #cce0ff;
}

.panel{

    padding: 4px 15px;

    text-align: center;
    cursor: pointer;
    outline: none;

    background-color: transparent;
    border: none;
    border-radius: 18px;


}
.panel:hover{
    background-color: #cce0ff;

}


ul li ul {


    background: whitesmoke;
    visibility: hidden;
    opacity: 0;
    min-width: 5rem;
    position: relative;
    transition: all 0.5s ease;
    margin-top: 2rem;
    left: 0;


    display: none;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 10px;

  }

  ul li:hover > ul,
  ul li ul:hover {
    visibility: visible;
    opacity: 1;
    display: block;

  }

  ul li ul li {
    clear: both;
    width: 100%;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel = "icon" type = "image/png" href = "###">
    <link rel="stylesheet" href="###.css">

    
</head>
<body>
    
    <div class="navbar">
        <div class="logo">
            <a href="index.html">
                <img src="logo1.png">

                <img src="logo2.gif">
            </a>
        </div>

        <nav>
            <ul>
                <li><a href="index.html" class="home">Home</a></li>
                <li><a href="#" class="events">News & Events</a></li>
                
                <li><a href="#" class="activities">Activities</a></li>
                
                
              
                <li><a href="#" class="panel">Panel</a>
                    <ul class="dropdown">
                        <li><a href="#">2021</a></li>
                        <li><a href="#">2020</a></li>
                        
                    </ul>
                </li>
               
                <li><a href="#" class="contact">Contact Us</a></li>
                
            </ul>
        </nav>
    </div>
<body>
</html>

When I hover on the 'panel', it moves to the left and doesn't stick to its position. This is the picture of my problem.

Answer 1

ul li {
    /* add this line for child absolute positioning */
    position: relative;
}

ul li ul {
    /* change position */
    position: absolute;
    /* remove margin-top */
    /* add top (same as li height so that there is no space between Panel and the ul to preserve hover) */
    top: 1.75rem;
}

body, html {
    height: 100%;
    margin: 0;
    padding:0;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
}

a {
    color: black;
    text-decoration: none;
}

body {
    background: url("background0.jpg") no-repeat;

    background-size: auto 100%;

    background-repeat: no-repeat;
    background-position: right top;
}

#background {
    position: absolute;
    top: 100%;
}

.logo {  
    float:left;
    margin-top: 15px;
    margin-left: 50px;    
}

nav {
    padding: 15px 0px;
    width: 100%;
}

ul {
    padding: 0;
    position: relative;

    list-style-type: none;
    float: right; 
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 550;
}

ul li {
    display: inline-block;

    padding: 5px 5px;
    color: black;    
    margin: 0px 0px 0px 1px;

    position: relative;
}

.home {
    padding: 4px 15px;

    text-align: center;
    cursor: pointer;
    outline: none;

    background-color: transparent;
    border: none;
    border-radius: 18px;
}

.home:hover {
    background-color: #cce0ff;
}

.events {
    padding: 4px 15px;

    text-align: center;
    cursor: pointer;
    outline: none;

    background-color: transparent;
    border: none;
    border-radius: 18px;
}

.events:hover {
    background-color: #cce0ff;
}

.activities {
    padding: 4px 15px;

    text-align: center;
    cursor: pointer;
    outline: none;

    background-color: transparent;
    border: none;
    border-radius: 18px;
}

.activities:hover {
    background-color: #cce0ff;
}

.contact {
    padding: 4px 15px;

    text-align: center;
    cursor: pointer;
    outline: none;

    background-color: transparent;
    border: none;
    border-radius: 18px;
}

.contact:hover {
    background-color: #cce0ff;
}

.panel {
    padding: 4px 15px;

    text-align: center;
    cursor: pointer;
    outline: none;

    background-color: transparent;
    border: none;
    border-radius: 18px;
}

.panel:hover {
    background-color: #cce0ff;
}

ul li ul {
    background: whitesmoke;
    visibility: hidden;
    opacity: 0;
    min-width: 5rem;
    position: absolute;
    transition: all 0.5s ease;
/*        margin-top: 2rem; */
    left: 0;
    top: 1.75rem;

    display: none;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 10px;
}

ul li:hover > ul,
ul li ul:hover {
    visibility: visible;
    opacity: 1;
    display: block;
}

ul li ul li {
    clear: both;
    width: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel = "icon" type = "image/png" href = "###">
    <link rel="stylesheet" href="###.css">

    
</head>
<body>
    
    <div class="navbar">
        <div class="logo">
            <a href="index.html">
                <img src="logo1.png">

                <img src="logo2.gif">
            </a>
        </div>

        <nav>
            <ul>
                <li><a href="index.html" class="home">Home</a></li>
                <li><a href="#" class="events">News & Events</a></li>
                
                <li><a href="#" class="activities">Activities</a></li>
                
                
              
                <li><a href="#" class="panel">Panel</a>
                    <ul class="dropdown">
                        <li><a href="#">2021</a></li>
                        <li><a href="#">2020</a></li>
                        
                    </ul>
                </li>
               
                <li><a href="#" class="contact">Contact Us</a></li>
                
            </ul>
        </nav>
    </div>
<body>
</html>

悬停时，菜单会在导航栏中向左移动

Menu moves to the left in the nav bar while hovering

html

css

nav

drop-down-menu