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

时间:2017-01-19 13:46:34

标签: html css

我是第一次制作网站。我在下拉菜单中遇到问题。它走向左侧。请帮助我使用代码,以便它应该在导航菜单下方,并且在悬停在它上面时应该可见。提前谢谢。

这是我的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;
}

1 个答案:

答案 0 :(得分:0)

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