CSS-Punkte unter Menü

Question

In Ordnung, so ist das Problem ziemlich einfach, aber ich bin mir nicht sicher, wie es zu beheben ist.

Nachdem ich diesen Code erstellt habe, erscheinen unter dem Menü wie kleine Punkte.

Überprüfen Sie das Bild, um es mehr zu verstehen.

-Code

#MenuID li { 
 
    color: white; 
 
    display: inline-block; 
 
    list-style: none; 
 
    background-color: rgba(255, 146, 0, 0.5); 
 
    font-size: 20px; 
 
    position: relative; 
 
    left: 220; 
 
    top: -48; 
 
    font-weight: bold; 
 
    width: 10%; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
} 
 
#MenuID li:hover { 
 
    background-color: rgba(255, 255, 0, 0.5); 
 
} 
 
#MenuID li a { 
 
    text-decoration: none; 
 
    color: white; 
 
}

<ul id="MenuID"> 
 
    <li> <a href="index.html"> Home </li> 
 
    <li> <a href="index.html"> Forum</li> 
 
    <li> <a href="index.html"> Website</li> 
 
</ul>

Answer 1

Sie Ihre <a> ‚s in Ihrem HTML nie endet:

<ul id="MenuID"> 
    <li> <a href="index.html"> Home </a></li> 
    <li> <a href="index.html"> Forum</a></li> 
    <li> <a href="index.html"> Website</a></li> 
</ul> 

Answer 2

Sie vermissen die </a> vor dem </li> und verwenden min-width in li, plus Sie fehlen Einheiten in left und top

#MenuID li { 
 
    color: white; 
 
    display: inline-block; 
 
    list-style: none; 
 
    background-color: rgba(255, 146, 0, 0.5); 
 
    font-size: 20px; 
 
    position: relative; 
 
    left: 220px; 
 
/* top: -48px; commented so you can see demo*/ 
 
    font-weight: bold; 
 
    min-width: 10%; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
} 
 
#MenuID li:hover { 
 
    background-color: rgba(255, 255, 0, 0.5); 
 
} 
 
#MenuID li a { 
 
    text-decoration: none; 
 
    color: white; 
 
}

<ul id="MenuID"> 
 
    <li> <a href="index.html"> Home</a> 
 
    </li> 
 
    <li> <a href="index.html"> Forum</a> 
 
    </li> 
 
    <li> <a href="index.html"> Website</a> 
 
    </li> 
 
</ul>