请参考这个小提琴:
http://jsfiddle.net/zt8ffu11/
HTML:
- ABOUT
- PROJECTS
- GET
INVOLVED
- RECORDS
- DONATE
CSS:
.navLeft {
宽度:25%;
margin-top:0%;
顶部:汽车;
显示:内联;
list-style-type:none;
margin-left:5%;
位置:相对;
z-index:0;
/ * [disabled] clear:none; * /
}
.navLeft ul li {
list-style-type: none;
width: 6em;
height: 2em;
/* [disabled]list-style-position: inside; */
color: #F14E23;
text-align: center;
background-color: #FFFFFF;
border: 0.5em solid #000000;
margin-bottom: -0.5em;
font-family: alfa-slab-one;
font-style: normal;
font-weight: 400;
padding-top: 2em;
top: auto;
vertical-align: middle;
padding-bottom: 2em;
-webkit-transition: all 0.1s linear 0s;
-o-transition: all 0.1s linear 0s;
transition: all 0.1s linear 0s;
position: relative;
margin-left: -0.5em;
}
.navLeft ul li:hover {
background-color: #F14E23;
color: #FFFFFF;
list-style-type: none;
position: relative;
}
.navLeft ul .about {
float: left;
-webkit-transition: all .1s linear 0s;
-o-transition: all .1s linear 0s;
transition: all .1s linear 0s;
}
.navLeft ul ul li
{
float: left;
}
.navLeft ul .projects {
clear: left;
}
.navLeft ul ul {
display: none;
}
.navLeft ul .about:hover ul{
display: block;
}