Week 3 - Simple Menu

Simple horizontal menu using psuedo-class hover and block float left.

HTML

<header>
    <ul id="menu">
        <li><a href="http://www.curtin.edu.au">Bentley</a></li>
        <li><a href="http://www.curtin.edu.my">Sarawak</a></li>
        <li><a href="http://sydney.curtin.edu.au/">Sydney</a></li>
    </ul>
</header>

CSS

body {
    border: 0px;
    margin: 0px;
    padding: 0px;
}

header {
    width: 100%;
}

#menu {
    background-color: lightgray;
    margin: auto;
    padding: 0px;
    width: 1024px;
    height: 40px;
}

li {
    display: inline;
}

a {
    float:left;              /* float left makes an implicit display:block;  */
    text-decoration: none;
    background-color: green;
    color: yellow;
    width: 100px;               /* all items have a constant width          */
    height: 16px;               /* contributes 16px to vertical dimension   */
    border: 2px solid green;    /* contributes  4px to vertical dimension   */
    padding: 10px;              /* contributes 20px to vertical dimension   */
    margin: 0px;                /* contributes  0px to vertical dimension   */
    text-align: center;
}

a:hover {
    background-color: yellow;
    color: green;
    border-color: red;
}