I've got a CSS dropdown menu at http://intranet.turtle.com/ and the sub menus won't drop down. I started with a Weebly template and have been recoding it relatively free-hand, which I'm pretty new at, so I'm not sure what exactly caused the break. Was wondering if you guys could spot anything I can't.Thanks so much in advance for the help!
/* Nav */
.nav {
display: table-cell;
overflow: hidden;
padding: 0;
vertical-align: middle;
z-index: 10;
}
.nav ul {
float: left;
list-style-type: none;
max-width: 1000px;
z-index: 10;
}
.nav li {
display: inline-block;
float: left;
margin: 0;
padding: 0;
list-style: none;
z-index: 10;
}
.nav li > a.wsite-menu-item {
display: block;
padding: 24px 20px;
border: 0;
color: white;
letter-spacing: 0.04em;
font-family: 'Lato', sans-serif;
font-size: 14px;
font-weight: normal;
line-height: normal;
z-index: 10;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.nav li#active > a.wsite-menu-item,
.nav li > a.wsite-menu-item:hover {
background: @navHover;
color: white;
border: none;
}
.mobile-nav {
display: none;
z-index: 10;
}
/* Subnav */
#wsite-menus .wsite-menu li a {
padding: 10px 0 !important;
display: inline-block;
float: left;
width: 100%;
color: white;
background: #00a5db;
border: 0;
font-family: 'Lato', sans-serif;
font-size: 13px;
font-weight: normal;
line-height: normal;
z-index: 10;
}
#wsite-menus .wsite-menu li a:hover {
color: #fff;
z-index: 10;
background: @navHover;
}
#wsite-menus .wsite-menu-arrow {
color: transparent;
z-index: 10;
font-size: 0;
}
#wsite-menus .wsite-menu-arrow:before {
display: block;
color: white;
content: '\203A';
font-family: 'Lato', sans-serif;
font-size: 24px;
font-weight: normal;
line-height: 11px;
z-index: 10;
}
