html - 左侧 float 的下拉菜单和导航菜单变得模糊

Question

我是第一次做网站。我在使用下拉菜单时遇到问题。它正在向左侧移动。请帮助我处理代码，使其位于导航菜单的正下方，并且将鼠标悬停在其上时应该可见。提前致谢。

这是我的 CSS 代码:

ul {
    list-style-type: none;
    margin: 0;
    padding:10px 2px 10px 2px;
    overflow: hidden;
    background-color:rgba(0,0,0,0.5);
    position: fixed;    /* To keep navigation menu fixed*/
    top: 0px;
    left: 0px;
    width: 99.21%;
    height: 77px;
    z-index:1000;  /* To bring ul above image.*/
}

ul li a { /*Link Decoration*/
    display:inline-block;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    z-index: 1000;
    text-align:center;
}

li {
    float: left;
}

li a:hover {
    background-color: #111;
    display: block;
    z-index:1000;
}

Answer 1

将 left:0 替换为 right:0 并将 float 替换为 right:

ul {
    list-style-type: none;
    margin: 0;
    padding:10px 2px 10px 2px;
    overflow: hidden;
    background-color:rgba(0,0,0,0.5);
    position: fixed;    /* To keep navigation menu fixed*/
    top: 0px;
    right: 0px;
    width: 99.21%;
    height: 77px;
    z-index:1000;  /* To bring ul above image.*/
}
li {
    float: right;
}