Show menu with CSS and fade in - html

Question

My output:
Home  | cat | Info
|sub1
| sub1sub1
| sub1sub2
|sub2
| sub2sub1
<div class="menu" >
<span>
<ul id="nav">
<li><a href="#" >HOME</a></li>
<li>cat
<div class="subs">
<div class="wrp2">
<ul>
<li><a href="#" >sub1</a></li>
<ul>
<li><a href="#" >sub1sub1</a></li>
<li> <a href="#" >sub1sub2</a></li>
</ul>
</ul>
<ul>
<li><a href="#" >sub2</a></li>
<ul><li><a href="#" >sub2sub1</a></li>
</li>
<li>Info</li>
</ul>
</span>
</div>
My CSS:
/* main menu styles */
.menu {
background: none repeat scroll 0px 0px rgba(255, 255, 255, 0.65);
text-align:center;
width:100%;
height:30px;
text-transform: uppercase;
padding-top: 8px;
padding-bottom: 5px;
font-size:19px;
}
.menu > span {
display:inline-block;
margin:0 auto;
}
#nav {
display:inline;
text-align:left;
position:relative;
list-style-type:none;
}
#nav > li {
float:left;
padding:0;
position:relative;
}
#nav > li > a {
color:black;
display:block;
padding:3px 10px;
position:relative;
text-decoration:none;
}
#nav > li > a:hover {
background-color:rgba(255, 255, 255, 0.65);
color:black;
}
#nav > li.selected > a {
z-index:2;
}
#nav li div {
position:relative;
}
#nav li ul a {
font-size: 100%;
color:black;
display:block;
margin-bottom:1px;
padding:3px 5px;
text-decoration:none;
}
#nav li ul a:hover{
background-color:rgba(255, 255, 255, 0.65);
color:black;
}
#nav li div div {
padding:12px 0;
display:none;
margin:0;
position:absolute;
top:6px;
background: none repeat scroll 0px 0px rgba(255, 255, 255, 0.65);
z-index:999;
width:auto;
}
#nav li div div.wrp2 {
width:380px;
}
#nav .sep {
left:190px;
bottom:0;
height:auto;
margin:15px 0;
position:absolute;
top:0;
width:1px;
}
#nav li div ul {
padding-left:10px;
padding-right:10px;
position:relative;
width:170px;
float:left;
list-style-type:none;
}
#nav li div ul li {
margin:0;
padding:0;
}
#nav li div ul li h3 {
color:black;
margin:0 5px 4px;
padding-bottom:3px;
padding-top:3px;
}
#nav li ul ul {
padding:0 0 8px;
padding-left:5px;
}
#nav li ul ul li {
margin:0;
padding:0;
}
#nav li ul ul li a {
font-size: 90%;
color:black;
display:block;
margin-bottom:1px;
padding:3px 5px;
text-decoration:none;
}
#nav li ul ul li a:hover{
background-color:rgba(255, 255, 255, 0.65);
color:black;
}
How can I make cat visible only with CSS and NO jquery. It should be: If I click on cat the submenu should come up. A fade-in/out effect would be great. Is it possible in general?

Answer 1

yes you can do that >
try to make dislay:none to the cat menu . them you must put : hover as dislay:block

Answer 2

ok.
it is east just make an new class to sub menu whit display:none . it means that this block doesn't open it self . after that put another class in : hover and make display that as block

Answer 3

If you want it on click, you can use the :target pseudoclass along with element IDs to control what is visible.
Update the relevant line in your HTML with a link to the ID:
<li id="cat">cat
Then add some simple CSS:
li .subs {
visibility:hidden;
opacity:0;
transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}
li:target .subs {
visibility:visible;
opacity:1;
transition-delay:0s;
}
You will also need to remove any display:none styles that will hide your submenus since we will be using visibility and opacity instead. This allows us to have a nice fade effect.