Menu with Submenu - Only CSS

Example of menu with submenu. This was made only with CSS and have support in IE7+

by elisfelicio

HTML

<div class="toolbarGlobal">
    <nav>
        <ul>
          <li><a href="#">Institucional</a>
            <ul>
              <li><a href="#">Sobre</a></li>
              <li><a href="#">Sobre</a></li>
              <li><a href="#">Sobre</a></li>
            </ul>
          </li>
          <li><a href="#">Cursos</a>
            <ul>
              <li><a href="#">Lucinho</a></li>
              <li><a href="#">Inscreva-se</a></li>
            <li><a href="#">Câmpus</a></li>
            <li><a href="#">Notícias</a></li>
            <li><a href="#">Corporate</a></li>
            <li><a href="#">Alunos</a></li>
            <li><a href="#">Professores</a></li>
         </li>
        </ul>
    </nav>
</div>

CSS

.toolbarGlobal {
    background:url(images/bgTopGlobal.png) repeat-X;
    height:35px;
    position:relative;
    font-family:verdana;
    border-bottom:1px solid #b2b2b2;
}

.toolbarGlobal nav {
    width:940px;
    margin:0 auto;
}
.toolbarGlobal nav li {list-style:none;}
.toolbarGlobal nav > ul > li {
    list-style:none; float: left;
    padding-right:1px;
    background:url(images/sepLi.gif) no-repeat right center;
    height:32px; line-height:32px;
    border-top:3px solid transparent;
    position: relative; z-index:1;
}

.toolbarGlobal nav > ul > li > a {
    float:left;
    text-decoration:none;
    font:bold 15px arial, verdana, tahoma, sans-serif;
    color:#333;
    padding:0 15px;
    height:30px; line-height:30px;
}
.toolbarGlobal nav > ul > li:hover {
    background-color:white;
    border-top:3px solid #00796a;
    box-shadow:5px -5px 10px 0px rgba(0,0,0,0.4);
}

.toolbarGlobal nav > ul > li:hover > a {background-color:#FFF;}

.toolbarGlobal nav > ul li:last-child a {border-right:none;}
.toolbarGlobal nav > ul li.parent > a {
    position: relative;
    background-image:url(images/setaGlobal.png);
    background-repeat: no-repeat;
    background-position: 90% center; 
    padding-right:30px; z-index:1;
}
.toolbarGlobal nav ul li ul {
    padding:10px 0;
    display:none;
    width:auto;
    min-width:230px;
    position:absolute; 
    top:30px; left:0;
    background:#FFF;
    box-shadow:5px 10px 10px 0px rgba(0,0,0,0.4);
}
.toolbarGlobal nav li:hover ul {display:block;}
.toolbarGlobal nav ul li.parent ul li {display:inline;}

.no-boxshadow .toolbarGlobal nav ul li.parent ul {border:1px solid #EFEFEF; border-top:0;}

.toolbarGlobal nav li ul li a {
    text-decoration:none;
    display:block;
    padding:5px 10px;
    color: #333;
    font:13px arial, helvetica, verdana, tahoma, sans-serif;
}

.toolbarGlobal nav li ul li a:hover {color:#00796a;}