Interview: Basic Horizontal Nav Bar

It's like this:

Here is the code:

Mostly self explanatory:

<ul class="list">
    <li *ngFor="let item of list">{{item}}</li>
</ul>

.list {
    list-style-type: none;
    margin: 0;
    padding: 10px 0;
    border: 1px solid grey;
    margin: 5px 5px 0 5px;
    > li {
        display: inline;
        padding: 11px;
        border-right: inherit;
        opacity: 0.7;
        &:hover {
            background-color: grey;
            opacity: 1;
        }
    }
}

Thanks,
Vishwak

Comments

[Gil Fewster]

I’d recommend wrapping in a nav element for good semantic practices, improved seo and accessibility.

When interviewing, you should also stick to vanilla html and css, rather than using Angular directives (or React etc) unless the interviewer has specifically asked you to.