Ok, I’m new to EE and have hit my first speed bump. Hoping someone can help me through this, or give me some resources online that may help. I’ve read some stuff over at train-ee about this, but still not getting it. I have the main navigation for my site, which features a drop down sub-navigation that I have positioned off canvas until you hover over the parent list item. When I view the page, the navigation is not off canvas at all, and I’m not sure if it has to do with my CSS or the conditional I’m using. Here’s the code:
I don’t know how to get the conditional to show up below in the code, but this is what I’ve got inserted after the “sub_menuOFF” class:
onmouseover=“this.className=‘sub_menuON’” onmouseout=“this.className=‘sub_menuOFF’”
<ul class="nav_menu">
<li class="sub_menuOFF">a href="#">First
Glance</a>
<ul class="sub_menu">
<li><a href="#">About Us</a></li>
<li><a href="#">When & Where</a></li>
<li><a href="#">What We Believe</a></li>
<li><a href="#">Need Prayer?</a></li>
</ul>
</li>
</ul>and here’s the CSS:
nav {
position: absolute;
top: 75px;
right: 0;
margin-right: 0px;
padding-right: 0px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
nav a {
color: #d2d0cb;
text-decoration: none;
line-height: 1.5em;
letter-spacing: 2px;
}
ul.nav_menu li {
float: left;
position: relative;
height: 55px;
width: 115px;
font-size: 1.1em;
}
ul.nav_menu > li > a {
display: block;
border-left: 1px solid #d2d0cb;
height: 100%;
width: 100%;
padding-left: 10px;
padding-right: 10px;
}
.hover, .current {
color: #b1b1b1;
}
.sub_menuON, .hover {
left: 0px;
top: 55px;
z-index: 5;
}
.sub_menuOFF {
list-style: none;
position: absolute;
left: -9999px;
}
ul.sub_menu > li {
display: block;
border-top: 1px solid #d2d0cb;
border-left: 1px solid #d2d0cb;
border-right: 1px solid #d2d0cb;
height: 30px;
width: 175px;
margin: 0;
padding: 0;
background-color: #51504b;
}
ul.sub_menu li a {
display: block;
line-height: 30px;
padding: 5px;
width: 100%;
height: 100%;
font-size: .75em;
white-space:nowrap;
}
ul.sub_menu li:last-child {
border-bottom: 1px solid #d2d0cb;
}I had the navigation functioning right when it was just on my local server, but then I messed with it to try and accomodate the conditional statements, so now I’m all turned around. thank you!!