Develop Reference

if or case Statement in css

I'd like some help writing or finding out if it's possible to write an if or case statement in css for a hover function. The hover is for a dropdown that reveals links with shared class parent names.
The essential logic is, if one class's hover function is activated/on, deactivate/turn off the other hover function within the that share the parent class.
in my mind the psuedocode looks like this:
if (.drop: hover .last) /*when the cursor hovers, do below*/ then
.drop: hover .last{display:block;}
.drop:hover .first{display: none;}
.drop:hover .second{display: none;}
.drop:hover .third{display: none;}
etc...
elseif (.drop:hover .first) then
.drop:hover .first{display: block;}
.drop:hover .last{display: none;}
.drop:hover .second{display: none;}
.drop:hover .third{display: none;}
endif

If I understand what you mean, you need use :not to ignore a li:hover.
Note: use opacity instead display: none because the second one move the li to left and lost :hover.
Look the code below:
HTML
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
CSS
ul {
display: inline-block;
}
ul > li {
display: inline-block;
padding: 5px 15px;
}
ul:hover > li:not(:hover) {
opacity: 0;
}
more complete functionality:
https://codepen.io/ralfting/pen/qKqBvM

Opening an accordion and collapsing an existing one

I have created an accordion it works fine, the only thing which I would like is to close an already open accordion if another accordion is clicked on. Currently, the accordion open and close separately but if another is open I want the current one to collapse
HTML CODE
<ul class="accordion">
<li>Home</li>
<li>
Products
<div class="slide">
<ul>
<li>Product 1</li>
</ul>
</div>
</li>
<li>
Сlients
<div class="slide">
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</div>
</li>
<li>
About
<div class="slide">
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</div>
</li>
<li>Contact</li>
</ul>
CSS CODE
.accordion,
.accordion li .slide ul{
margin:0;
padding:0;
list-style:none;
overflow:hidden;
}
.accordion li{
overflow:hidden;
}
.accordion li .slide{
overflow:hidden;
height:0;
}
.accordion li.open .slide{
height:70px;
}
.accordion li .slide ul{
padding:0 0 0 20px;
}
JQUERY CODE
$(document).ready(function(e) {
$('.head').on('click', function(){
//checking if the parent has a class open assigned to it
if($(this).closest('li').hasClass('open')){
///TO CLOSE THE SLIDE//
$(this).closest('li').find('.slide').animate({'height':0}, 500);
$(this).closest('li').removeClass('open');
}
else{
///TO OPEN THE SLIDE////
//for dynamic height we ind the ul inside the sliding div and target its height
var autoHeight = $(this).closest('li').find('.slide ul').height();
//finding the closest slide in the DOM Tree, so that only that slide will open not all of them
$(this).closest('li').find('.slide').animate({'height':autoHeight}, 500);
//finding the closest parent of the clicked item so that only that parent will have the class assigned to it
$(this).closest('li').addClass('open');
}
});
});
I have added comments in the jquery code to make it easy to understand

Try this : You can animate and set height of all slide to 0 except the clicked one. see below code
$(document).ready(function(e) {
$('.head').on('click', function(){
//variable to store clicked slide
var $slide;
var $parentLi = $(this).closest('li');
//checking if the parent has a class open assigned to it
if($parentLi.hasClass('open')){
///TO CLOSE THE SLIDE//
$slide = $parentLi.find('.slide');
$slide.animate({'height':0}, 500);
$parentLi.removeClass('open');
}
else{
///TO OPEN THE SLIDE////
//for dynamic height we ind the ul inside the sliding div and target its height
var autoHeight = $parentLi.find('.slide ul').height();
//finding the closest slide in the DOM Tree, so that only that slide will open not all of them
$slide = $parentLi.find('.slide');
$slide.animate({'height':autoHeight}, 500);
//finding the closest parent of the clicked item so that only that parent will have the class assigned to it
$parentLi.addClass('open');
}
//close all slides except the clicked one
$('.slide').not($slide).animate({'height':0}, 500);
$('.head').closest('li').not($parentLi).removeClass('open');
});
});
JSFiddle Demo

Before this comment:
///TO OPEN THE SLIDE////
Just add this code:
$("li.open .head").trigger("click");
Then the .open li will close.

Along with Guedes fix, you can even use jquery slideUp and slideDown to avoid getting height dynamically and remove some css code too to make code more simpler.
JS
$(document).ready(function(e) {
$('.head').on('click', function(){
//checking if the parent has a class open assigned to it
if($(this).closest('li').hasClass('open')){
///TO CLOSE THE SLIDE//
$(this).closest('li').find('.slide').slideUp();
$(this).closest('li').removeClass('open');
}
else{
$(this).closest('ul').find("li.open .head").trigger("click");
///TO OPEN THE SLIDE////
//finding the closest slide in the DOM Tree, so that only that slide will open not all of them
$(this).closest('li').find('.slide').slideDown();
//finding the closest parent of the clicked item so that only that parent will have the class assigned to it
$(this).closest('li').addClass('open');
}
});
});
CSS
.accordion,
.accordion li .slide ul{
margin:0;
padding:0;
list-style:none;
overflow:hidden;
}
.accordion li{
overflow:hidden;
}
.accordion li .slide{
display: none;
}
.accordion li .slide ul{
padding:0 0 0 20px;
}

CSS li dropdown on touch devices

EDIT: Thanks for the answers. Do these suggestions keep the li:hover dropdown working, just adding the onclick feature for touch devices? I don't want desktop users to have to click, the menu should appear on:hover for them.
I have done my research on this subject but can't seem to find a good solution.
My site http://www.eastbournenl.com
Menu's in question are 'League Info' and 'Results' in the top navigation bar.
My CSS dropdown menu activates on li:hover (the li item is NOT a link, I changed the cursor so it appears as a hand but clicking will take you nowhere).
However, clearly this doesn't work on touch devices.
Is there a way to maintain the setup I have currently with the li:hover working on non-touch devices, but adding some javascript to enable functionality for touchscreen devices?
HTML
<div id="link_bar">
<ul>
<li>League Info
<ul class="drop">
<li>Team Directory</li>
<li>Fixtures</li>
<li>Rules</li>
<li>Umpire Directory</li>
</ul>
</li>
</ul>
</div>
And CSS
#link_bar ul ul {
display: none
}
#link_bar ul li:hover > ul {
display: block
}
#link_bar ul:after {
content: "";
clear:both;
display:block
}
#link_bar ul ul {
position: absolute;
top: 1em;
width: 10em;
padding-top: 1em;
margin-left: 0;
}
#link_bar ul ul li {float:none ; position: relative ; padding: 1em 1em 1em 0}
#link_bar ul ul li {width:100%}
#link_bar .drop li:hover a {color: #99FF33}

With Modernizr, you can target touch devices, so include it in your code, and then :
JS part :
if(Modernizr.touch){
$('.hasDropDown').click(function(){
$(this).find('.drop').addClass('visible');
});
}
HTML part :
<div id="link_bar">
<ul>
<li class="hasDropDown">League Info
<ul class="drop">
<li>Team Directory</li>
<li>Fixtures</li>
<li>Rules</li>
<li>Umpire Directory</li>
</ul>
</li>
</ul>
</div>
CSS :
.visible {
display: block;
}
That's weird, most of touch devices emulate hover events.

as you know touch device not supported hover effects
you can use some plugin for that,like Modernizer.js
another solution i see on the Web is:
div#menu ul li:hover ul needs to become div#menu ul li:active ul for it to respond on touch devices because they don't support hover states.
my specific solution for you is:
Jquery Smart Menu

Keep submenu while moving mouse

I want to make a menu (with submenu and div containing link for every submenu on hover).
Something like this:
AAAA | BBBB
| bbb1
| bbb2 HERE IS MOUSE (bbb2 LINK)
| bbb3
It is possible to keep listing submenus when you try to open link? If you move mouse from "bbb2" link disappear.
what I have now:
http://i.imgur.com/vhFtaQc.png
and what I want:
http://i.imgur.com/BOQNMat.png
Here is JSFiddle: http://jsfiddle.net/zu8Eu/
Hope you understand. Thanks!

As is noted you may need to nested the <div> inside the li elements. But additional to keep the hover() you can use padding to set the white space:
HTML
<li id="submenu1">
aaaa1
<div class="one">
Link for aaa1
</div>
</li>
CSS
.one {
display: none;
position: absolute;
top: 0px;
left:100%;
}
The demo http://jsfiddle.net/zu8Eu/27/

I'm sure the are jQuery plugins that will provide you with what you want to achieve, but I'd say restructure you HTML and nest the elements properly.
<ul>
<li>Menu 1
<ul>
<li>
Submenu 1
<ul>
<li>
Subsub menu
</li>
</ul>
</li>
</ul>
</li>
</ul>
This way, you can use CSS to achieve what you want:
ul li ul{
display: none;
}
ul li:hover > ul{
display: block;
}
ul li ul li:hover > ul{
display: block;
}
Once you hover on the first li, it will show the direct child ul, if you hover on that ul, it will still count as a hover on the first li, meaning it'll still be visible.
Fiddle: http://jsfiddle.net/x54gZ/

CSS single select list example

I am looking for a click based single select list. Instead of the normal drop down list, I want an overlay menu (similar to how we see on facebook when we change privacy settings, the single select list that appears). Is that CSS based or any code examples to creating a similar list? All the lists i found of the net are hover lists not same as we see on f/b.
Thanks.
Something like this:

It is just a menu that pops up where use can pick an option.
If you were using jQuery it would be something like this plug-in
http://plugins.jquery.com/project/selectbox

I can't find a non JS-solution (and for JS I'm using jQuery to assign focus to an arbitrary element that would keep the sub-menu open (on the plus side, I'm pretty darn sure that Facebook will be using JavaScript, of some sort, to achieve their implementation too).
However, I've put together a couple of examples, these are, much like Facebook, simply dropdown lists, with a JavaScript handler to assign focus to the clicked element (to keep the sub-menu open regardless of mouse position on the page, until the user clicks elsewhere).
With that in mind, I've used the standard css dropdown-style mark-up:
<ul>
<li>Symbol
<ul>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
</ul>
</li>
<li>Symbol
<ul>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
</ul>
</li>
<li>Symbol
<ul>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
</ul>
</li>
</ul>
With the css:
ul {
list-style-type: none;
padding: 0;
margin: 0 auto;
}
ul li {
display: inline-block;
position: relative;
width: 100px;
border-bottom: 1px solid #ccc;
}
ul li ul {
display: none;
width: 100%;
position: absolute;
top: 1em;
left: 0;
}
ul li a:hover + ul,
ul li a:active + ul,
ul li a:focus + ul {
display: block;
}
ul li ul li {
border: 0 none transparent;
}
And the jQuery:
$(document).ready(
function() {
$('li a').click(
function(){
$(this).focus();
});
}
);
Demo at JS Bin
Notice that I've used a elements, since focus is more easily assigned to anchors than plain, in this case, li elements. However a second version, with the same end result is achieved with the following jQuery:
$(document).ready(
function() {
$('li').click(
function(){
$('li').not(this).removeAttr('tabindex');
$(this).attr('tabindex','-1').focus();
});
}
);
Demo at JS Bin.
Addenda
Stu Nicholls, of CSS Play seems to have achieved a pure-css solution for this (with a gallery), but I haven't worked my way through his CSS to see how he did it.