Telerik Academy CSS Exam-Variant 2

task2

by Naydenov_it

HTML

<body>
    <div id="wrapper">
        <ul class="notification-list">
            <li>
                <a href="#">
                    <img src="imgs/messages.png" />
                    <span>messages</span>
                </a>
                <div class="content">
                    <ul>
                        <li>
                            <a href="#">
                                <img src="imgs/people.png" /><span><strong>Doncho Minkov</strong> send you a message</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="imgs/people.png" /><span><strong>Joro Georgiev</strong> answered to your message</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="imgs/people.png" /><span><strong>Pesho Ivanov</strong> send you a message</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </li><li>
                <a href="#">
                    <img src="imgs/notifications.png" />
                    <span>notifications</span>
                </a>
                <div class="content">
                    <ul>
                        <li>
                            <a href="#"><span><strong>Pesho Ivanov</strong> updated his profile</span></a>
                        </li>
                        <li>
                            <a href="#"><span><strong>Pesho Ivanov</strong> tagged you in a photo</span></a>
                        </li>
                    </ul>
                </div>
            </li><li>
                <a href="#">
                    <img src="imgs/people.png" />
                    <span>people</span>
                </a>
                <div class="content">
                    <ul>
                        <li>
   ...

CSS

* {
    margin:0;
    padding:0;
}

div#wrapper {
    width:960px;
    font-family: 'Courier New', Courier, 'Nimbus Mono L', monospace;
    font-size: 16px;
    margin:25px;
    
}
    div#wrapper ul.notification-list {
        width:470px;
        border-top:1px solid black;
        border-left:1px solid black;
        border-right:1px solid black;
        border-top-left-radius:15px;
        border-top-right-radius:15px;
        -webkid-border-top-right-radius:15px;
        -webkid-border-top-left-radius:15px;
        font-size:1.1em;
        
    }
        div#wrapper ul.notification-list >li {
            list-style-type:none;
            border-bottom:1px solid black;
        }
    div#wrapper ul.notification-list >li{
        list-style-type:none;
        display:inline-block;
        padding:5px;
        border-right:1px solid black;
       
    background: -webkit-linear-gradient(top, #b3b3b3 39%,#dddddd 99%); /* Chrome10+,Safari5.1+ */    

    }
        div#wrapper ul.notification-list >li:first-of-type {
            border-top-left-radius:15px;
            -web-kid-border-top-left-radius:15px;
        }
        div#wrapper ul.notification-list >li:last-of-type {
            border-right:none;
            border-top-right-radius:15px;
            -web-kid-border-top-right-radius:15px;
            padding-right:8px;
        }
    div#wrapper ul.notification-list li a {
        text-decoration:none;
         color:#777777;
    }
        div#wrapper ul.notification-list>li:hover {
            border-bottom:1px solid #dddddd;
           
        }
     div#wrapper ul.notification-list li a img {
         width:15px;
         height:15px;
         padding-left:10px;

    }
    div#wrapper ul.notification-list li a span {
        padding-right:10px;
    }

    div#wrapper ul.notification-list li div.content {
        display:none;

    }
     div#wrapper ul.notification-list li:hover div.content {
        display:block;
        position:absolute;
       ...