Home/ Questions/Q 7518851
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T01:48:33+00:00

Trying to have padding around the menu items and when they hover over it

  • 0

Trying to have padding around the menu items and when they hover over it changes background colour. However, at the moment padding is only effecting the side of the elements and not the top or bottom.

HTML:

<html>
<head>
    <link rel="stylesheet" href="style.css" type"text/css" />
</head>
<body>
    <div id="container">
        <div id="header">
            <ul id="menu">
                <li><a href="index.html">Home</a></li>
                <li><a href="index.html">About</a></li>
                <li><a href="index.html">Contact</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

CSS:

#container {
    margin:auto;
    border:1px solid black;
    width:960px;
    height:700px;
}

#header {
    width:960px;
    height:150px;
    border: 1px solid blue;
}

#menu {
    width:800px;
    list-style:none;
}

#menu li {
    float:left;
    margin-left:20px;
    border:1px solid black;
}

#menu a:hover {
    background:blue;
    padding:20px;
}

#menu a {
    padding:20px;
    height:20px;
    text-decoration:none;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Simply replace height:20px with display:block for #menu a as height seems redundant from what I can see.

    #menu a {
  padding:20px;
  display:block;
  text-decoration:none;
}
    • 0