task2

Css exam Telerik Academy

by Naydenov_it

HTML

<body>
    <div id="wrapper">
        <ul class="menu">
            <li>
                <a href="#">Home</a>
                <div class="content">
                    <h3>Home page</h3>
                    <p>
                        <span class="bold">Telerik Academy</span> Home Page
                    </p>
                </div>
            </li>
            <li>
                <a href="#">Blog</a>
                <div class="content">
                    <h3>Welcome to our blog</h3>
                    <p>
                        You can read our <a href="#">latest news</a>
                    </p>
                </div>
            </li>
            <li>
                <a href="#">Download</a>
                <div class="content">
                    <h3>Available files</h3>
                    <ul>
                        <li>
                            <a href="#">Intro Presentation</a>
                        </li>
                        <li>
                            <a href="#">CSS Styling</a>
                        </li>
                        <li>
                            <a href="#">CSS Layout</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</body>

CSS

* {
    margin: 0px;
    padding: 0px;
}

html, body {
    font-family: 'Courier New', Courier, 'Nimbus Mono L', monospace;
    font-size: 16px;
}

div#wrapper {
    width: 960px;
}

ul.menu {
    margin: 5px;
}

    ul.menu > li {
        list-style-type: none;
        display: inline-block;
        padding: 10px 20px;
        border: 1px solid black;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        background-image: -webkit-linear-gradient(top, #31D2F0 10%, #729AE3 100%);
        /* W3C Markup */
        background-image: linear-gradient(to bottom, #31D2F0 10%, #729AE3 100%);
    }

        ul.menu > li:hover {
            padding: 10px 40px;
            padding-bottom: 15px;
            font-size: 1.3em;
        }

    ul.menu li a {
        text-decoration: none;
        color: #353EFF;
    }

    ul.menu li div.content {
        display: none;
    }

    ul.menu li:hover div.content {
        display: block;
    }

    ul.menu li div.content h3 {
    }

    ul.menu li div.content p {
    }

        ul.menu li div.content p span {
        }

        ul.menu li div.content p a {
        }

    ul.menu li:last-of-type div.content {
        position: absolute;
        top: 45px;
        left: 210px;
        padding-bottom: 10px;
        border: 1px solid black;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        width: 220px;
        height: 130px;
        background-image: -webkit-linear-gradient(top, #F7FCFD 10%, #A4DAEF 100%);
        /* W3C Markup */
        background-image: linear-gradient(to bottom, #F7FCFD 10%, #A4DAEF 100%);
    }

        ul.menu li:last-of-type div.content h3 {
            text-align: center;
            font-size: 0.9em;
            text-decoration: underline;
            padding-top: 25px;
        }

        ul.menu li:last-of-type div.content ul {
            margin-left: 25px;
            font-size: 0.8em;
           ...