CSS_layout_homework_task6.css

/*Reset*/

body, ul, li, div, h1,a {
    margin: 0;
    padding: 0;
}

body {
    background:#203740;
}

/*Removing all the bullets*/
ul {
    list-style-type: none;
}

ul#top-nav {
    margin:1em 0 0 1em;
}

ul#top-nav > li {
    display: inline-block;
    border-right:2px solid #203740;
}

ul#top-nav > li:last-of-type {
    border:none;
}

div.tab {
    position:relative;
    color: white;
    background:#5f7583;
    padding: 0.7em 1em 0.7em 1em;
}

ul#top-nav > li:first-of-type > div.tab {
    border-radius: 0.5em 0 0 0;
}

div.tab:focus {
    background: #203740;
    border:none;
    outline:0;
}

h1 {
    font-size:1em;
}

ul.side_nav {
    /*background:#203740;*/
    display: none;
    position:fixed;
    width:22em;
    left:1em;
    top:3.6em;
}

div.tab:focus ul.side_nav {
    display: inline-block;
}

    div.tab:focus ul.side_nav > li {
        display: block;
        padding:0.8em 0.5em 0.8em 0.5em;
        border-bottom:1px solid #325563;
    }


a {
    color: white;
    text-decoration: none;
}

a:hover {
    text-decoration:underline;
}

img {
    display:none;
    position:absolute;
    left:22em;
    top:0;
    height:25em;
}

div.tab:focus ul.side_nav > li:hover img {
    display:inline-block;
}