I am using using css transition to add an animated effected to my links when they are hovered over.
One of links needs to be underlined by default i.e when no other link is hovered over, it should remain underlined and when other links are hovered over, the underline in the first link should be removed. I have achieved this with jQuery by adding and removing a classs however, the animated effect is lost. Is there a way to get back this animated effect on the first link?
Also when the underline from the first link is removed, all other links seem to move up?
$(".c-f, .i-c, .c-u").hover(function() {
$('.o-c').removeClass("default-underline");
}, function() {
$('.o-c').addClass("default-underline");
});
body {
background: black;
}
.pivot-nav {
list-style: none;
font-family: 'Montserrat';
}
.pivot-nav li a {
font-size: 1.6rem;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
position: relative;
color: #fff;
text-decoration: none;
}
.pivot-nav li a:hover::after {
width: 100%;
}
.default-underline:after {
width: 100%;
}
.pivot-nav li a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 4px;
position: absolute;
background: #fff;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.default-underline:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 4px;
background: #fff;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
position: relative !important;
width: auto !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul class="pivot-nav">
<li class="pivot-nav-item"><a class="o-c default-underline" href="#">Our Company</a></li>
<li class="pivot-nav-item"><a class="c-f" href="#">Link 1</a></li>
<li class="pivot-nav-item"><a class="i-c" href="#">Link 2</a></li>
<li class="pivot-nav-item"><a class="c-u" href="#">Link 3</a></li>
</ul>
I'd use CSS-only:
Remove the underline from the preselected element if:
we're hovering the entire UL
we're not hovering the preselected element
.pivot-nav:hover a.default-underline:not(:hover):after {
width: 0;
}
Example
body {
background: black;
}
.pivot-nav {
list-style: none;
font-family: 'Montserrat';
}
.pivot-nav li a {
font-size: 1.6rem;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
position: relative;
color: #fff;
text-decoration: none;
}
.pivot-nav li a:after {
content: "";
display: block;
position: absolute;
bottom: 0;
width: 0;
height: 4px;
background: #fff;
transition: width 0.3s ease 0s;
}
.pivot-nav:hover a.default-underline:not(:hover):after {
width: 0;
}
.pivot-nav li a.default-underline:after,
.pivot-nav li a:hover:after{
width: 100%;
}
<ul class="pivot-nav">
<li class="pivot-nav-item"><a class="default-underline" href="#">Our Company</a></li>
<li class="pivot-nav-item">Link 1</li>
<li class="pivot-nav-item">Link 2</li>
<li class="pivot-nav-item">Link 3</li>
</ul>
Related
How can I implement a functioning tab-navigation behavior?
What I want to achieve is a underlying animated bar for each navigation-item that has been clicked.
The transition-related styling is supposed to be based on css pseudo-elements.
Below is the markup and the css-rules I came up with so far.
What am I missing in my code? How could the approach be fixed?
li::after {
border-radius: 2px;
border-bottom: red solid 3px;
transition: all .3s ease-in-out;
}
li::before {
content: "";
}
<nav>
<ul class="nav_link">
<strong>
<li onclick="tabs('avisos')">Avisos</li>
<li onclick="tabs('atividades')">Atividades</li>
<li onclick="tabs('trabalhos')">Trabalhos</li>
<li onclick="tabs('provas')">Provas</li>
<li onclick="tabs('aulas')">Aulas</li>
</strong>
</ul>
</nav>
Regarding the provided ::after rule there is no definition of how the pseudo-element should be display-ed in addition to the also missing content attribute.
And for the entire example as is, there is no need for a JavaScript based solution.
A css-only variant of the OP's code could use e.g.
a :hover based approach.
And regarding the ::before/::after pseudo-element based transition-effect
height, in my opinion, is a more intuitive attribute to go for.
.nav_link {
width: 20%;
list-style-type: none;
font-weight: bolder;
}
.nav_link li {
position: relative;
margin: 5px 0 7px 0;
}
.nav_link li::after {
content: "";
position: absolute;
left: -5px;
top: 100%;
width: 100%;
height: 0;
background-color: red;
transition: height .3s ease-in-out;
}
.nav_link li:hover {
cursor: pointer;
}
.nav_link li:hover::after {
height: 2px;
}
<nav>
<ul class="nav_link">
<li>Avisos</li>
<li>Atividades</li>
<li>Trabalhos</li>
<li>Provas</li>
<li>Aulas</li>
</ul>
</nav>
Due to the markup, provided by the OP, the above example does not support a behavior similar to the OP's intended script-based click handling.
A small markup change could solve this though and support tab navigation too.
.nav_link {
width: 20%;
list-style-type: none;
font-weight: bolder;
}
.nav_link a {
display: block;
width: 100%;
position: relative;
margin: 5px 0 7px 0;
padding-left: 5px;
}
.nav_link a::after {
content: "";
position: absolute;
left: 0;
top: 100%;
width: 100%;
height: 0;
background-color: red;
transition: height .3s ease-in-out;
}
.nav_link a:hover {
cursor: pointer;
}
.nav_link a:hover,
.nav_link a:focus {
outline: 1px dashed red;
}
.nav_link a,
.nav_link a:hover,
.nav_link a:focus,
.nav_link a:active,
.nav_link a:visited {
color: black;
text-decoration: none;
}
.nav_link a:target::after,
.nav_link a:focus::after,
.nav_link a:active::after {
height: 2px;
}
<nav>
<ul class="nav_link">
<li>
<a name="avisos" href="#avisos">Avisos</a></li>
<li>
<a name="atividades" href="#atividades">Atividades</a>
</li>
<li>
<a name="trabalhos" href="#trabalhos">Trabalhos</a>
</li>
<li>
<a name="provas" href="#provas">Provas</a>
</li>
<li>
<a name="aulas" href="#aulas">Aulas</a>
</li>
</ul>
</nav>
You're probably looking for li:active or li:visited
Note that when using li:active, the item will only be underlined while the mouse button is down.
More here
Current setup (plain HTML/CSS):
I've currently got this plain HTML/CSS setup, which is basically using a checkbox with no opacity, with labels acting as buttons (which they in fact are not).
Codepen: https://codepen.io/MikaTheDesigner/pen/MWVYGoz
Video of my current HTML/CSS-demo (and the result goal): https://i.imgur.com/ha3NL0V.mp4
<div class="nav">
<input class="menuBtn" type="checkbox">
<label class="menuLabel open">Menu</label>
<label class="menuLabel close">Close</label>
<div class="nav menuBox transitionBox menuTransition"></div>
<div class="nav menuBox BG">
<nav>
<ul>
<li><a>Option 1</a></li>
<li><a>Option 2</a></li>
<li><a>Option 3</a></li>
</ul>
</nav>
</div>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.nav {
pointer-events: none;
position: fixed;
z-index: 100;
width: 100vw;
height: 100vh;
}
.nav > .menuBtn {
cursor: pointer;
width: 122.43px;
height: 122.43px;
margin: 0 0 0 3rem;
pointer-events: initial;
position: absolute;
z-index: 99;
opacity: 0;
}
.nav > .menuBtn:checked ~ .menuLabel.open {opacity: 0;}
.nav > .menuBtn:checked ~ .menuLabel.close {opacity: 100%;}
.nav > .menuBtn:checked ~ .menuBox.transitionBox {left: 100%;}
.nav > .menuBtn:checked ~ .menuBox.BG {left: 0;}
.nav > .menuLabel {
color: black;
font-size: 1.5rem;
position: absolute;
z-index: 98;
margin: 3rem 0 0 3rem;
text-align: center;
transition: all 0.2s ease-in-out;
}
.nav > .menuLabel.open {
text-shadow: 0 0 2rem rgba(0,0,0,.5);
width: 122.43px;
}
.nav > .menuLabel.close {
opacity: 0;
}
.nav > .menuBox.transitionBox {
background-color: black;
width: 200%;
height: 100%;
position: absolute;
z-index: 100;
left: -200%;
transition: all 2000ms;
}
.nav > .menuBox.BG {
background: linear-gradient(to bottom, white, black);
background-size: cover;
width: 100%;
height: 100%;
pointer-events: auto;
position: absolute;
z-index: 96;
left: -100%;
transition-delay: 500ms !important;
transition: all 200ms;
}
.nav > .menuBox.BG > nav {
position: absolute;
z-index: 97;
width: 100%;
height: 100%;
}
.nav > .menuBox.BG > nav > ul {
list-style: none;
padding: 122.43px 3rem 3rem calc(6rem + 122.43px);
}
.nav > .menuBox.BG > nav > ul li {
color: white;
font-size: 2rem;
line-height: 2rem;
margin-bottom: 1.5rem;
}
.nav > .menuBox.BG > nav > ul li > a {
color: inherit;
display: block;
text-decoration: none;
transition: all 0.2s ease-in-out;
width: max-content;
}
.nav > .menuBox.BG > nav > ul li > a:hover {cursor: pointer;}
Goal:
My goal is for the menu to act in the exact same way, when clicking the labels .menulabel.open and .menuLabel.close, but using javascript instead of plain HTML/CSS.
I would change these current labels to a-tags or p-tags and using onClick-functions, when I get the javascript working.
Like linked at the top of the thread, this is my goal, but using javascript to make it react, and not using a plain checkbox:
https://i.imgur.com/ha3NL0V.mp4
What have I tried so far?
Besides the plain HTML/CSS-solution I have tried setting up, which I wouldn't argue is the right way to make the menu, I have also tried setting this script up in my HTML-document, inwhich does not seem to work as I want it to:
function openNav() {
document.getElementsByClassName("menuTransition").style.left = "100%";
document.getElementsByClassName("menuBox").style.left = "0";
}
function closeNav() {
document.getElementsByClassName("menuTransition").style.left = "-200%";
document.getElementsByClassName("menuBox").style.left = "-100%";
}
(the javascript was supposed to just style the two elements when clicking on one of the a-tags the exact same way the CSS reacts, when checking the checkbox and "activating" the menu)
<div class="nav">
<a class="menuLabel open" onClick="openNav()">Menu</a>
<div class="nav menuBox transitionBox menuTransition"></div>
<div class="nav menuBox BG">
<a class="menuLabel close" onClick="closeNav()">Close</a>
<nav>
<ul>
<li><a>Option 1</a></li>
<li><a>Option 2</a></li>
<li><a>Option 3</a></li>
</ul>
</nav>
</div>
</div>
(basically the same HTML as above, just removing the labels and replacing them with a-tags)
You can use a single class and toggle that class on the click of a button, something like this:
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.toggle("mystyle");
}
.mystyle {
width: 100%;
padding: 25px;
background-color: coral;
color: white;
font-size: 25px;
box-sizing: border-box;
}
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
document.getElementsByClassName("menuBox") return an array object .
you need to add the index , such as document.getElementsByClassName("menuBox")[0]
Let me start off with this fiddle: https://jsfiddle.net/Lwhpgmma/
Basically I have some list items like this:
<ul class="specifics">
<li>
<ul>
<li>Filter by Hosting</li>
<li data-value="ghost" class="active">Ghost Host</li>
<li data-value="they">They Host</li>
<li data-value="you">You Host</li>
<li data-value="server">Server</li>
</ul>
</li>
<li>
<ul>
<li>Filter by Game Mode</li>
<li data-value="1" class="active">Soccar</li>
<li data-value="2">Snowday</li>
<li data-value="3">Hoops</li>
</ul>
</li>
</ul>
The inner <ul> is hidden via line-height: 0; on the parent <li> element. However, when an <li> element is clicked, the .active class is added and it gets set to line-height: normal;
This all works fine, except that it causes some ugly results when these first-tier <li> elements are stacked on-top of each other, like they are in the fiddle demo.
You'll notice when you click Manfield or $100 list elements, that the list elements above them (Server and Soccar) get pushed up. They should stay in the same place they currently are, and the menu from the active <li> should simply flow over the other inactive <li> elements.
I tried changing the first-tier elements from <li> to <span> which solved the issue of the top options bringing their horizontal siblings along for the ride, but doesn't solve the issue of the bottom elements pushing their upper siblings when they expand.
I hope this makes sense.
Use CSS Positioning for this and instead of overflow use flexbox, like:
.dot-overflow {
position: relative;
}
.dot-overflow.active ul {
position: absolute;
bottom: 0;
background: #0F1316;
}
/* Make it a flex container */
ul.specifics {
display: flex;
flex-wrap: wrap;
}
Have a look at the working snippet below (use full screen to see it properly):
// handle the specifics dropdowns
var allSpecifics = $('ul.specifics > li');
$(document).on('click', 'ul.specifics > li', function(event) {
var openThis = ($(this).hasClass('active')) ? false : true;
allSpecifics.removeClass('active');
if (openThis)
$(this).addClass('active');
else {
// selected an option
$(event.target).closest('li[data-value]').addClass('active').siblings().removeClass('active');
}
}).click(function(event) {
if (!$(event.target).closest('ul.specifics > li').length || $(event.target).closest('ul.specifics > li.active > ul > li:first-of-type').length) {
allSpecifics.removeClass('active');
}
});
.specifics-container {
position: absolute;
z-index: 2;
bottom: 50px;
left: 0;
right: 0;
max-width: 100%;
}
ul.specifics {
display: flex;
flex-wrap: wrap;
position: relative;
list-style: none;
padding: 0;
}
ul.specifics > li {
display: inline-block;
position: relative;
box-shadow: 0 0 32px 1px #010;
/*border-right: 1px ridge rgba(225, 255, 225, 0.165);*/
padding: 9px 0;
margin: 0;
width: 24.5%;
text-align: center;
cursor: pointer;
background: #13141c;
transition: all 0.40s ease;
-o-transition: all 0.40s ease;
-moz-transition: all 0.40s ease;
-webkit-transition: all 0.40s ease;
}
ul.specifics > li > i {
display: block;
position: absolute;
left: 12px;
top: 11px;
font-size: 20px;
color: rgba(225, 225, 225, 0.3);
}
ul.specifics > li > ul {
list-style: none;
margin: 0;
padding: 0;
display: block;
width: 100%;
max-height: 420px;
background: none;
text-align: center;
}
ul.specifics > li.active > ul {
overflow-y: scroll;
}
ul.specifics > li > ul::-webkit-scrollbar {
/* this is added to the remodal open() function */
width: 0;
/* remove scrollbar space */
background: transparent;
/* optional: just make scrollbar invisible */
}
ul.specifics > li > ul > li {
background: none;
width: 100%;
margin: 0;
padding: 0;
display: block;
line-height: 0;
opacity: 0;
color: #777;
font-family: 'Play', sans-serif;
font-size: 22px;
transition: all 0.40s ease;
-o-transition: all 0.40s ease;
-moz-transition: all 0.40s ease;
-webkit-transition: all 0.40s ease;
}
ul.specifics > li > ul > li:first-of-type {
font-size: 16px;
color: #ccc;
}
ul.specifics > li > ul > li.active {
line-height: normal;
opacity: 1;
color: #ddd;
}
ul.specifics > li.active > ul > li {
line-height: normal;
opacity: 1;
padding: 16px 0;
}
ul.specifics > li.active > ul > li:first-of-type {
padding: 6px 0;
margin: 0 0 12px 0;
}
ul.specifics > li.active > ul > li.active {
background: rgba(0, 91, 36, 0.15);
}
ul.specifics > li.active > ul > li:hover {
color: #ddd;
background: rgba(0, 31, 96, 0.1);
}
ul.specifics > li.active > ul > li:first-of-type:hover {
background: none;
}
ul.specifics > li.active > i {
opacity: 0;
}
ul.specifics > li:last-of-type {
/*border-right: none;*/
}
ul.specifics > li:hover {
background: #1b1d24;
}
ul.specifics > li.active > ul > li:first-of-type:before {
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
font-size: 24px;
position: absolute;
top: 6px;
right: 0;
display: block;
width: 35px;
content: "\00d7";
text-align: center;
transition: all 0.40s ease;
-o-transition: all 0.40s ease;
-moz-transition: all 0.40s ease;
-webkit-transition: all 0.40s ease;
}
ul.specifics > li.active > ul > li:first-of-type:hover:before {
color: red;
}
#media (max-width: 991px) {
ul.specifics {
background: #13141c;
}
ul.specifics > li {
width: 49.5%;
}
}
.dot-overflow {
position: relative;
}
.dot-overflow.active ul {
position: absolute;
bottom: 0;
background: #0F1316;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="specifics-container">
<ul class="specifics">
<li class="dot-overflow">
<i class="fa fa-wifi"></i>
<ul>
<li>Filter by Hosting</li>
<li data-value="ghost" class="active">Ghost Host</li>
<li data-value="they">They Host</li>
<li data-value="you">You Host</li>
<li data-value="server">Server</li>
</ul>
</li>
<li class="dot-overflow">
<i class="fa fa-gear"></i>
<ul>
<li>Filter by Game Mode</li>
<li data-value="1" class="active">Soccar</li>
<li data-value="2">Snowday</li>
<li data-value="3">Hoops</li>
</ul>
</li>
<li class="dot-overflow">
<i class="fa fa-map"></i>
<ul>
<li>Filter by Map</li>
<li data-value="248" class="active">Manfield</li>
<li data-value="1337" i>Wasteland</li>
<li data-value="421">Utopia</li>
<li data-value="121">Stadium</li>
</ul>
</li>
<li class="dot-overflow">
<i class="fa fa-ticket"></i>
<ul>
<li>Filter by League</li>
<li data-value="100" class="active">$100</li>
<li data-value="50">$50</li>
<li data-value="20">$20</li>
<li data-value="5">$5</li>
<li data-value="1">$1</li>
<li data-value=".5">50ยข</li>
<li data-value="0">Free</li>
</ul>
</li>
</ul>
</div>
Hope this helps!
I'm trying to get this sliding border nav bar to work with an active page navbar highlight. I want it's default position to be on the page that is currently active.
http://codepen.io/rm/pen/ldhon
<script>$("a[href*='" + location.pathname + "']").addClass("current");</script>
I'm using this java script to get the current page.
My nav bar is set up like this. This is the li class "two"s specific code for it to be highlighted.
<div class="bar">
<ul>
<li class="one">Who we are</li><!--
--><li class="two"><a class"current" href="WhatWeDo.html">What we do</a></li><!--
--><li class="three">Get Involved</li><!--
--><li class="four">Event Schedule</li><!--
--><li class="five">Contact</li>
<hr />
</ul>
</div>
And I want to use a.current{} in my css but I can't get it to work with the sliding border. I've tried putting it in with these, just using commas but it isn't working.
.two:hover ~ hr, a.current {
margin-left: 20%;
}
.three:hover ~ hr, a.current {
margin-left: 40%;
}
.four:hover ~ hr, a.current {
margin-left: 60%;
}
.five:hover ~ hr, a.current {
margin-left: 80%;
}
.bar hr, a.current {
height: 4px;
width: 20%;
margin: 0;
background: rgb(248, 172, 48);
border: none;
transition: .3s ease-in-out;
}
You can do the following. I've added a click event to keep the border below clicked item. You can just do $("a[href*='" + location.pathname + "']").parent().addClass("current"); if you don't want such behaviour.
Note that /js is the value of location.pathname in the snippet. Also note the specificity trick on the hover selectors so that the border can slide backwards.
$('li').on('click', function() {
$('.current').removeClass('current');
$(this).addClass('current');
}).has("a[href*='" + location.pathname + "']").addClass("current");
* {
box-sizing: border-box;
}
body {
font: 300 100%'Helvetica Neue', Helvetica, Arial;
}
.container {
width: 50%;
margin: 0 auto;
}
ul li {
display: inline;
text-align: center;
}
a {
display: inline-block;
width: 25%;
padding: .75rem 0;
margin: 0;
text-decoration: none;
color: #333;
}
.one.current ~ hr,
ul li.one:hover ~ hr {
margin-left: 0%;
}
.two.current ~ hr,
li.two:hover ~ hr {
margin-left: 25%;
}
.three.current ~ hr,
.three:hover ~ hr {
margin-left: 50%;
}
hr {
height: .25rem;
width: 25%;
margin: 0;
background: tomato;
border: none;
transition: .3s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bar">
<ul>
<li class="one">Who we are
</li>
<li class="two">What we do
</li>
<li class="three">Get Involved
</li>
<hr />
</ul>
</div>
I'm working on the navigation bar for a website and currently the main menu is complete. However, the "Services" and "Products" buttons need to each have their own sub-menu. The sub-menu should normally be hidden from view and appears when the user mouse-overs on the respective button.
Here is a fiddle with the desired result. Obviously, I'd rather not use any javascript if possible.
The idea I had initially was to have sub-menu have position: absolute with a z-index value lower than that of the main-menu, so that it can slide underneath the main-menu. However, doing so messes up with the width if I give it width: 100% and since my site is responsive, I avoid static widths.
I also tried doing with relative positioning, but that doesn't work either.
Another thing I don't like with that approach is that the markup for the main menu and sub-menu get split. Is it possible to get the above result, but with this markup?
<nav>
<ul class="nav">
<li role="presentation" class="active">Home</li>
<li role="presentation">Services
<ul>
<li role="presentation">Link 1
<li role="presentation">Link 2
</ul>
</li>
<li role="presentation">Products
<ul>
<li role="presentation">Link 3
<li role="presentation">Link 4
</ul>
</li>
<li role="presentation">About</li>
<li role="presentation">Contact</li>
</ul>
</nav>
Here is my code:
CSS
body {
font-size: 0;
}
.bodyframe {
display: inline-block;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6);
}
.div_container {
max-width: 1460px;
width: 100%;
display: inline-block;
margin: 0 auto;
}
header {
width: 100%;
height: 49px;
}
.nav {
display: block;
position: relative;
list-style: none;
background: #304770;
z-index: 10;
}
.nav li {
display: inline-block;
background-color: #304770;
margin: 0 5px;
}
.nav li a {
padding: 12px 15px;
font-size: 18px;
color: #EFEFEF;
display: block;
}
.nav li.active a {
color: orange;
}
.nav li.active a:before {
width: 100%;
}
.nav li a:hover {
background-color: #304770;
color: orange;
transition: color 0.25s;
}
.nav li a:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background-color: orange;
-webkit-transition: width 0.2s;
transition: width 0.2s;
}
.nav li:nth-last-of-type(1) a:after {
display: none;
}
.nav li a:hover:before {
width: 100%;
}
.nav li a:after {
content: "";
display: block;
position: absolute;
right: -8px;
top: 21px;
height: 6px;
width: 6px;
background: #ffffff;
opacity: .5;
}
.subnav {
list-style-type: none;
display: block;
position: relative;
top: -49px;
margin: 0;
z-index: 1;
background-color: #ccc;
-webkit-transition: top 0.2s;
}
.subnav li {
display: inline-block;
background-color: #ccc;
margin: 0 5px;
}
.subnav li a {
padding: 8px 10px;
font-size: 14px;
color: #EFEFEF;
display: block;
}
HTML
<div class="bodyframe div_container">
<header>
<nav>
<ul class="nav">
<li role="presentation" class="active">Home</li>
<li role="presentation">Services</li>
<li role="presentation">Products</li>
<li role="presentation">About</li>
<li role="presentation">Contact</li>
</ul>
</nav>
<ul class="subnav">
<li>Test</li>
<li>1243</li>
</ul>
</header>
</div>
If you only need the submenu to mimic the one in the example, without using jQuery, using the second chunk of HTML with the CSS you supplied you could do:
nav:hover~ul {
top: 0px;
}
This shows the next ul element, in this case the subnav, whenever the nav is hovered over ("~" selector means select the ul element preceded by nav:hover).
However, if you want to do something more dynamic... id suggest just using JS/jQuery as well