下拉菜单左侧浮动，导航菜单变得模糊

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;
}