ul 中 li 的背景色 hover 定位不正确

Question

我遇到的问题是我的菜单悬停背景颜色开始更靠右，而不是从 UL 的开头。这里有一些截图。很抱歉问这个问题的风格不好。第一题.

<!DOCTYPE html>
<html lang="nl">
<head>
    <title>Bargain</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head> 
<body>
    <div id="banner">
        <h3>Bargain</h3>
        <?php
            date_default_timezone_set('Europe/Amsterdam');
            echo '<p>';
            $dag = date('j');
            $maand = date('F');
            $jaar = date('Y');
            $uur = date('G');
            $minuten = date('i');
            if ($uur >= 0 && $uur <= 24) {
            echo "Het is vandaag $dag $maand $jaar <br>De tijd is $uur:$minuten";
            };
            echo '</p>';
        ?>
    </div>
    <div id="menu">
        <ul>
            <li><b>Home</b></li>
            <li><b>Over ons</b></li>
            <li><b>FAQ</b></li>
            <li><b>Contact</b></li>
            <li><b>Help</b></li>
        </ul>
    </div>
    <div id="content">

    </div>
</body>
</html>




body{
    background-color: white;
}

#banner p {
    text-align: left;
}

#banner {
    background-color:#E6E6E6;
    width: 75%;
    margin: 0 auto;
    text-align: center;
}

#menu {
    background-color: #E6E6E6;
    width: 75%;
    margin: 0 auto;
}

#menu ul li:hover {
    background-color: #D4D4D4;
}

#menu ul {
    width: 100%;
    display: table;
    table-layout: fixed;
}

#menu ul li {
    display: table-cell;
    width: auto;
    text-align: center;
}

#content {
    background-color: #E6E6E6;
    width: 75%;
    margin: 0 auto;
    text-align: left;
    height: 800px;
}

Answer 1

#menu ul { padding: 0; }

删除浏览器

给定的默认值padding

演示 - http://jsfiddle.net/382v8bcm/

ul 中 li 的背景色 hover 定位不正确

Background color hover of li in ul is not positioning right

html

css

hover

html-lists

nav