Untitled

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title> Moje Menu CSS </title>
    <style type="text/css">
        #menu a {
            display: none;
        }

        #menu {
            width: 100px;
            position: absolute;
            color: white;
            font-weight: bold;
            border: 2px solid purple;
            text-align: center;
            background-color: purple;
        }

        #menu:hover a {
            display: block;
            background-color: white;
            border: 2px solid  purple;
            text-decoration: underline;
            color: black;
            position: relative;
            bottom: 0px;
        }


        #menu #menu1 a.nv {
            display: none;
        }

        #menu #menu1 {
            position: relative;
        }

        #menu #menu1:hover a.nv {
            display: block;
            position: relative;
            top: -24px;
            width: 100px;
            left: 105px;
        }
    </style>
</head>
<body>
    <div id="menu"> Moje Menu
        <a href="">Podpunkt 1</a>
        <a href="">Podpunkt 2</a>
        <a href="">Podpunkt 3</a>
            <div id ="menu1"><a href="">Podpunkt 4</a>
                <a href="" class="nv">Podpunkt 4.1</a>
                <a href="" class="nv">Podpunkt 4.2</a>
                <a href="" class="nv">Podpunkt 4.3</a>
                <a href="" class="nv">Podpunkt 4.4</a>
            </div>
        <a href="">Podpunkt 5</a>
        <a href="">Podpunkt 6</a>
    </div>
</body>
</html>