CEC Nav test

Testing nav

HTML

<div id="top-menu">
    <ul>
        <li>home</li>
        <li>about</li>
        <li>school</li>
        <li>events
            <ul>
                <li>Meetings & Conference</li>
                <li>Something</li>
            </ul>
        </li>
        <li>teachers</li>
        <li>apples</li>
        <li>links
            <ul>
                <li>Links, yo</li>
            </ul>
        </li>
        <li>SE</li>
        <li>contact</li>
    </ul>
</div

CSS

#top-menu {
    width: 100%;
    height: 50px;
    background: mediumSeaGreen;
}

#top-menu > ul {
    list-style-type: none;
    padding: 0;
    margin: 0 auto;
    width: 70%;
    clear: both;
}

#top-menu > ul > li {
    float: left;
    width: 11.1%;
    background: #2b2b2b;
    display: block;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    -webkit-transition: all .5s ease;
    cursor: pointer;
}

#top-menu > ul > li:hover {
    background: mediumSeaGreen;
}

#top-menu > ul > li > ul {
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 5px;
    background: mediumSeaGreen;
    position: relative;
    top: 10px;
    border-radius: 3px;
    box-shadow: 0 -1px 2px #2b2b2b;
}

#top-menu ul li ul:before {
	content: "";
	position: absolute;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
	border-bottom: 10px solid mediumSeaGreen;
	top: -10px;
	left: 42%;
	display: block;
	z-index: 1002;
}

#top-menu ul li ul:after {
    content: "";
    position: absolute;
    top:-10px;
    left:0px;
    height:10px;
    width:100%;
    display:block;
    z-index:1001;
}

#top-menu > ul > li:hover > ul {
    display: block;
}

#top-menu > ul > li > ul > li {
    padding: 0;
    margin: 5px 0 5px 0;
    line-height: 18px;
    color: #2b2b2b;
}