CODEWITHSUNDEEP
htmlcsshoverhtml-listsnav
Paul Elling
Paul Elling

Reputation: 3

Background color hover of li in ul is not positioning right

http://snag.gy/SHcEj.jpg http://snag.gy/3Xk3L.jpg

The issue im having is that my menu hover background color is starting more to the right instead of at the beginning of the UL. Here are some screenshots. Sorry for the bad style of asking this. First Question.

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

Upvotes: 0

Views: 245

Answers (1)

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

#menu ul { padding: 0; }

remove default padding given by browser

demo - http://jsfiddle.net/382v8bcm/

Upvotes: 2

Related Questions