JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<!doctype html>
<html>
    <head>
        <title>Navigation</title>
    </head>
    
    <body>
        <div>
            <div>Kategorie</div>
            <ul>
                <li><a href="">Item 1</a></li>
                <li><a href="">Item 2</a></li>
                <li><a href="">Item 3</a></li>
                <li><a href="">Item 4</a></li>
                <li><a href="">Item 5</a></li>
            </ul>
        </div>
    </body>
</html>

CSS

/* common */
* {
    margin: 0 ;
    padding: 0 ;
    border: 0 none ;
}

html, body {
    width: 100% ;
    height: 100% ;
}

/* navigation */
body > div {
    margin: 20px ;
    padding: 20px ;
    width: 300px ;
    border: 1px solid black ;
}

div > div {
    height: 50px ;
    background-color: red ;
}

ul {
    position: relative ;
    list-style: none ;
    top: -50px ;
}

li:hover {
    background-color: lightblue ;
}

li:first-child a {
    padding-top: 50px ;
}

li a {
    display: block ;
    height: 100% ;
    color: black ;
    text-decoration: none ;
}