Develop Reference

Adding multiple dropdown menu's next to each other using JS, HTML and CSS

I am trying to get multiple dropdown menu's next to each other, however I am running into a problem. I have the two categories I want to have as dropdown in the header, however only 1 of them seems to work. With the non-working dropdown menu nothing happens when I click on it.
let click = document.querySelector('.click');
let list = document.querySelector('.list');
click.addEventListener("click", () => {
list.classList.toggle('newlist');
});
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.header {
width: 100%;
height: 100px;
display: block;
background-color: #F6D604;
border-bottom: 3px solid black;
}
.header img {
float: left;
width: 180px;
padding: 7px 20px;
height: 80%;
background: transparent;
}
img {
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
.inner_header {
width: 90%;
height: 100%;
display: block;
margin: 0 auto;
}
.container {
float: right;
text-align: center;
height: 100%;
padding: 25px 5px;
display: block;
border-color: black;
}
.click {
background-color: #F6D604;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-color: black;
outline: none;
width: 150px;
color: rgb(0, 0, 0);
transition: 0.3s;
border-radius: 10px;
}
.click:hover {
background-color: #F6D604;
}
.links {
border: none;
outline: none;
width: 150px;
color: rgb(0, 0, 0);
transition: 0.3s;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-radius: 7px;
}
.list {
position: absolute;
transform: scaleY(0);
transform-origin: top;
transition: 0.3s;
width: 150px;
border-radius: 10px;
border: 2px solid black;
background-color: #fdfdfd;
}
.newlist {
transform: scaleY(1);
border-radius: 10px;
border: 2px solid black;
}
.links {
background-color: #fdfdfd;
border-color: black;
}
.links:hover {
background-color: #F6D604;
}
<div class="header">
<div class="inner_header">
<a href="../project/index.html">
<div class="logo_container">
<img src="assets/images/LOGO.png" alt="logo" />
</div>
</a>
<div class="container">
<button class="click">About</button>
<div class="list">
<button class="links">About us</button>
<button class="links">Contact us</button>
</div>
<button class="click">Language</button>
<div class="list">
<button class="links">EN</button>
<button class="links">NL</button>
</div>
</div>
</div>
</div>

querySelector will pick up the first matching element, whereas querySelectorAll will get a collection of all matching elements. You need to iterate through the elements to apply the listener. This solution clears out any open nav menus when the other is clicked. Also, it makes use of the [...] spread operator to iterate through elements. I added a new class navitem so that each submenu would show where it should.
let click = document.querySelectorAll('.click');
let list = document.querySelectorAll('.list');
const showSub = (e) => {
[...list].forEach(el => el.classList.remove('newlist')); // reset
e.target.parentNode.querySelector('.list').classList.toggle('newlist');
// this also works
//e.target.nextElementSibling.classList.toggle('newlist');
}
[...click].forEach(el => el.addEventListener("click", showSub));
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.header {
width: 100%;
height: 100px;
display: block;
background-color: #F6D604;
border-bottom: 3px solid black;
}
.header img {
float: left;
width: 180px;
padding: 7px 20px;
height: 80%;
background: transparent;
}
img {
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
.inner_header {
width: 90%;
height: 100%;
display: block;
margin: 0 auto;
}
.container {
float: right;
text-align: center;
height: 100%;
padding: 25px 5px;
display: block;
border-color: black;
}
.click {
background-color: #F6D604;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-color: black;
outline: none;
width: 150px;
color: rgb(0, 0, 0);
transition: 0.3s;
border-radius: 10px;
}
.navitem {
width: 150px;
display: inline-block;
}
.click:hover {
background-color: #F6D604;
}
.links {
border: none;
outline: none;
width: 150px;
color: rgb(0, 0, 0);
transition: 0.3s;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-radius: 7px;
}
.list {
position: absolute;
transform: scaleY(0);
transform-origin: top;
transition: 0.3s;
width: 150px;
border-radius: 10px;
border: 2px solid black;
background-color: #fdfdfd;
}
.newlist {
transform: scaleY(1);
border-radius: 10px;
border: 2px solid black;
}
.links {
background-color: #fdfdfd;
border-color: black;
}
.links:hover {
background-color: #F6D604;
}
<div class="header">
<div class="inner_header">
<a href="../project/index.html">
<div class="logo_container">
<img src="assets/images/LOGO.png" alt="logo" />
</div>
</a>
<div class="container">
<div class='navitem'>
<button class="click">About</button>
<div class="list">
<button class="links">About us</button>
<button class="links">Contact us</button>
</div>
</div>
<div class='navitem'>
<button class="click">Language</button>
<div class="list">
<button class="links">EN</button>
<button class="links">NL</button>
</div>
</div>
</div>
</div>
</div>

The way querySelector works, is it returns the first matching DOM element. In your case, because you use the click class for both buttons, the listener is only attached to the first one. Check out relevant documentation (at the return value header).
In this case I would suggest either using two classes and adding listeners to both separately, or accessing both buttons using someting like:
let clicks = document.querySelectorAll('.click');
for (let click of clicks) {
click.addEventListener("click",()=>{
list.classList.toggle('newlist');
});
}

You need a forEach to address every button-list pair.
I believe the below code solves your JavaScript issues. Adjust the CSS as needed (I have changed the original HTML a little).
let drops = document.querySelectorAll('.drop');
drops.forEach(function(drop) {
let click = drop.querySelector('.click');
let list = drop.querySelector('.list');
click.addEventListener("click", () => {
list.classList.toggle('newlist');
});
});
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.header {
width: 100%;
height: 100px;
display: block;
background-color: #F6D604;
border-bottom: 3px solid black;
}
.header img {
float: left;
width: 180px;
padding: 7px 20px;
height: 80%;
background: transparent;
}
img {
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
.inner_header {
width: 90%;
height: 100%;
display: block;
margin: 0 auto;
}
.container {
text-align: center;
height: 100%;
padding: 25px 5px;
display: block;
border-color: black;
}
.drop {
width: 150px;
float: right;
padding: 0 5px;
}
.click {
background-color: #F6D604;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-color: black;
outline: none;
width: 100%;
color: rgb(0, 0, 0);
transition: 0.3s;
border-radius: 10px;
}
.click:hover {
background-color: #F6D604;
}
.links {
border: none;
outline: none;
width: 150px;
color: rgb(0, 0, 0);
transition: 0.3s;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-radius: 7px;
}
.list {
position: absolute;
transform: scaleY(0);
margin-top: 1px;
transform-origin: top;
transition: 0.3s;
width: 150px;
border-radius: 10px;
border: 2px solid black;
background-color: #fdfdfd;
}
.newlist {
transform: scaleY(1);
border-radius: 10px;
border: 2px solid black;
}
.links {
background-color: #fdfdfd;
border-color: black;
}
.links:hover {
background-color: #F6D604;
}
<div class="header">
<div class="inner_header">
<a href="../project/index.html">
<div class="logo_container">
<img src="assets/images/LOGO.png" alt="logo" />
</div>
</a>
<div class="container">
<div class="drop">
<button class="click">Language</button>
<div class="list">
<button class="links">EN</button>
<button class="links">NL</button>
</div>
</div>
<div class="drop">
<button class="click">About</button>
<div class="list">
<button class="links">About us</button>
<button class="links">Contact us</button>
</div>
</div>
</div>
</div>
</div>

Close sidebar menu when click outside of it and when click on menu item

The target is to close the sidebar menu when I click outside of it or when I click on one of the menu item. I've created the two working functions in Javascript to open and close the menu, clicking on the toggle:
<script>
function openNav() {
document.getElementById("#sideMenu").style.width = "250px";
}
function closeNav() {
document.getElementById("#sideMenu").style.width = "0";
}
function clickOutsite() {
TO-DO
}
function clickOnItemAndClose() {
TO-DO
}
</script>
<div class="header"></div>
<input type="checkbox" class="openSideMenu" id="openSideMenu">
<label for="openSideMenu" class="sideIconToggle" onclick="openNav()">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sideMenu">
<ul class="sideMenuInner">
<li class="active">Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div>
I've tried to create an overlay layer and create a function connected to it, but the result is not valid.
Could you help me, please? Thanks in advance
Edit: here there is a demo
https://codepen.io/Clara83/pen/PoPVMgN

The whole animation of hide/show is based off CSS so you just need to toggle the checked property of the checkbox <input type="checkbox" class="openSideMenu" id="openSideMenu">
To solve the problem of detecting click outside you can wrap the sidebar in a div and then use contains property of event object that gets emitted from the element being clicked
function hideSidebar() {
document.getElementById('openSideMenu').checked = false;
}
var sideIconToggle = document.getElementById('sidebarContainer');
document.addEventListener('click', function(event) {
if (!sidebarContainer.contains(event.target))
hideSidebar();
});
html,
body {
overflow-x: hidden;
height: 100%;
}
body {
background: #fff;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: black;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div {
display: table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sideMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background: grey;
z-index: 1;
}
.sideMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid black;
}
.sideMenuInner li {
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid black;
}
.sideMenuInner li span {
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sideMenuInner li a {
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked~#sideMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sideIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked~.sideIconToggle>.horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked~.sideIconToggle>.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked~.sideIconToggle>.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
#sidenav-overlay {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 100%;
background: rgba(0, 0, 0, .1);
cursor: pointer;
z-index: 1;
}
<div class="header"></div>
<div id="sidebarContainer">
<input type="checkbox" class="openSideMenu" id="openSideMenu">
<label for="openSideMenu" class="sideIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sideMenu">
<ul class="sideMenuInner">
<li class="active" onclick="hideSidebar()">Item1</li>
<li onclick="hideSidebar()">Item2</li>
<li onclick="hideSidebar()">Item3</li>
</ul>
</div>
</div>

Why does this dropdown move another element?

I am creating a new navbar for my site, and using JS to open some simple hidden content divs.
I have the parent selectors where I want them, but when I click on one, it makes the other parent jump.
http://codepen.io/NaughtySquid/pen/xRYaWd
// dropdowns
function toggle_visibility(id){
event.preventDefault();
// close any open menus
// TODO
// open this menu
var e = document.getElementById(id);
if(e.style.display == 'block') {
e.style.display = 'none';
}else{
e.style.display = 'block';
}
}
.container {
margin: 0px auto;
width: 960px;
}
/* Navbar */
.navigation-main {
position: fixed;
top: 0;
width: 100%;
height: 49px;
z-index: 10001;
background-color: #222;
}
.header-navbar {
list-style: none;
padding: 0;
margin: 0;
}
.caret-down {
display: inline-block;
width: 0px;
height: 0px;
vertical-align: middle;
border-top: 4px solid #999;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-top-style: dotted;
content: "";
}
/* alerts menu */
.alerts-box {position: relative; float: right; right: 100px; color: #999; line-height: 29px;}
.alerts-box-new{background-color: #609FA9;}
.alerts-box-new:hover{background-color: #6FA8B1;}
.alerts-box-normal{background-color: #383838;}
.alerts-box-normal:hover{background-color: #4B4B4B;}
.alerts-box a {padding: 10px; height: 29px; display: block; color: #999;}
.alerts-box:hover{cursor: pointer;}
#alerts-content{
display: none;
position: relative;
float: right;
right: 65px;
top: 49px;
background: #222;
box-shadow: 1px 1px 1px black;
padding: 5px;
}
/* user menu */
.user-box {position: relative; float: right; right: 0px; color: #999; line-height: 29px;}
#user-box-content{
display: none;
position: relative;
float: right;
right: -50px;
top: 49px;
background: #222;
box-shadow: 1px 1px 1px black;
padding: 5px;
}
.nav-special-content ul {
list-style: none;
list-style-type: none;
padding: 0;
margin: 0;
color: #999;
}
.nav-special-content a {display: block; color: #999;}
.nav-special-content a:hover {color: #fff;}
<div class="navigation-main">
<div class="container group">
<div class="alerts-box right hide-small alerts-box-normal">
<img src="https://www.gamingonlinux.com/templates/default/images/comments/envelope-open.png" alt=""/>
</div>
<div id="alerts-content">
<div class="nav-special-content">
<ul>
<li>{:comment_count} new comments</li>
<li>{:message_count} new messages</li>
</ul>
</div>
</div>
<div class="user-box hide-small">
<img class="nav-avatar" src="https://www.gamingonlinux.com/uploads/avatars/gallery/1.png" alt="" width="49" height="49"> <span class="caret-down"></span>
</div>
<div id="user-box-content">
<div class="nav-special-content">
<ul>
<li>View Profile</li>
<li>User CP</li>
{:admin_link}
<li>Logout</li>
</ul>
</div>
</div>
</div>
</div>

Put #alerts-content in .alerts-box and add some CSS like this:
#alerts-content {
position: absolute;
float: none;
right: 0;
}

CSS Menu- Submenu drop down positioning?

I'm currently writing a on-click drop-down menu in CSS. I want to position my div container for my submenu directly beneath my label. I've hard coded the percentage from the left on each specific container, but the second it is displayed on a larger screen, everything shifts. I know that was a wrong way to go about it, I just couldn't get anything else to work. I don't know Javascript or Jquery. What is the easiest way to achieve this look that will work on multiple browsers and screen size?
input {
opacity: .3;
margin-right: -.7em;
margin-left: 0em;
overflow: visible;
}
input + label {
color: #fff;
display: inline-block;
padding: 6px 8px 10px 24px;
background-image: black url(../images/glossyback2.gif);
height: 8px;
margin: 0;
line-height: 12px;
position: relative;
}
input:hover + label:hover {
background: #3385D6;
}
input + label + div {
margin: 0;
margin-top: 2px;
padding: 16px;
border: 1px solid;
width: 100%;
height: auto;
position: absolute;
top: 23px;
display: none;
}
input:checked + label + div {
display: block;
}
input:checked + label {
z-index: 3;
}
/* GUI styled: */
.menu {
z-index: 1000;
height: 1px;
width: 100%;
padding: 20px;
position: relative;
background-image: black url(../images/glossyback.gif);
background-color: #0066CC;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
}
.menu a {
text-decoration: none;
color: #fff;
}
.menu input {
display: none;
}
.menu div a {
text-decoration: none;
color: blue;
}
.menu div td:hover {
text-decoration: none;
background-color: #3385D6;
color: #ffffff;
}
.menu div input {
display: inline;
opacity: 1;
margin: 0;
}
div.menu input + label {
z-index: 1000;
padding: 0;
border-color: #ccc;
border-width: 0 1px;
height: 19px;
margin: 0 -.23em;
}
.menu label span {
z-index: 1000;
font-size: 12px;
line-height: 9px;
padding: 6px 1em 12px 1em;
display: block;
margin-top: -1px;
background-image: url(../images/glossyback.gif) repeat-x bottom left;
}
.menu label span a:hover {
background-image: black url(../images/glossyback2.gif);
}
.menu label span.startcap, .menu label span.endcap {
text-decoration: none;
z-index: 1000;
padding: 0;
background-image: black url(../images/glossyback.gif);
float: left;
width: 8px;
height: 24px;
margin-left: -6px;
}
.menu label span.endcap {
z-index: 1000;
background-image: black url(../images/glossyback.gif);
float: right;
margin-right: -6px;
}
.menu input + label + div {
position: absolute;
border: 1px solid #808080;
border-width: 2px 1px 1px 1px;
background: #F0F6FC;
text-align: left;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
width: 15%;
top: 35px;
left: 35px;
}
.menu input + label + div > div p {
font-size: 12px;
line-height: 18px;
margin-left: auto;
margin-right: auto;
width: 100%;
text-align: left;
z-index: 1000;
}
.menu input + label + div > div {
z-index: 1000;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid #ABABAB;
border-width: 2px 1px 1px 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
padding: 16px;
padding-top: 5px;
background-image: url(../images/glossyback2.gif));
}
.menu input:checked + label {
background-color: #AFCEEE;
border-color: #6696CB;
z-index: 1000;
}
.menu input:checked + label span {
background-image: url(../images/glossyback.gif);
}
.menu input:checked + label span.startcap {
background-image: url(../images/glossyback.gif);
}
.menu input:checked + label span.endcap {
background-image: url(../images/glossyback.gif);
z-index: 1000;
}
<div class="menu">
<input type="radio" name="UItab" id="taba" checked="checked">
<label for="taba"><span class="startcap"></span><span>
Home</span></label>
<input type="radio" name="UItab" id="tabb">
<label for="tabb"><span>Users</span></label>
<div style="height:5px;left:34.25%;width:10.5%">
<div>
<table>
<tr>
<td id="linka"><a href="index.php?page=user_management">
User Management</a></td>
</tr>
</table>
</div>
</div>
<input type="radio" name="UItab" id="tabc">
<label for="tabc"><span>Elements</span></label>
<div style="height:20px;left:38.5%;width:10.5%;">
<div>
<table>
<tr>
<td id="linkb"><a href="index.php?page=new_element">
New Element</a></td>
</tr>
<tr>
<td id="linkc"><a href="index.php?page=exst_element">
Existing Elements</a></td>
</tr>
</table>
</div>
</div>

Wrap the input and the menu in a container with position: relative and set to the menu position: absolute and top: 100% just like in this example:
.wrapper{
position: relative;
display: inline-block;
margin-right: 30px;
}
.my-menu{
display: none;
position: absolute;
top: 100%;
left: 0;
background: #4197CF;
width: 80px;
padding: 0 5px;
}
input:checked + label + .my-menu {
display: block;
}
<div class="wrapper">
<input type="radio" name="UItab" id="tabb">
<label for="tabb"><span>Users</span></label>
<div class="my-menu">
<p>Element 1</p>
<p>Element 2</p>
<p>Element 3</p>
</div>
</div>
<div class="wrapper">
<input type="radio" name="UItab" id="tabb1">
<label for="tabb1"><span>Other Users</span></label>
<div class="my-menu">
<p>Element 4</p>
<p>Element 5</p>
<p>Element 6</p>
</div>
</div>
The above is a basic example just to show you how to do it. Just add your styles.

Check this example out.
I used this website as a reference to make a similar drop-down setup. This has some added features that make it a bit more flashy and fluid. Figured I'd provide an alternative so you have some options for how you want to set up your drop-downs.
HTML:
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>Home</li>
<li>
Users <span class="arrow">▼</span>
<ul class="sub-menu">
<li>New Element</li>
</ul>
</li>
<li>
Elements <span class="arrow">▼</span>
<ul class="sub-menu">
<li>New Element</li>
<li>Existing Elements</li>
</ul>
</li>
</ul>
</nav>
</div>
CSS:
.clearfix:after {
display: block;
clear: both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width: 100%;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
}
.menu {
width: 50%;
margin-left: auto;
margin-right: auto;
}
.menu li {
margin: 0px;
list-style: none;
font-family: Verdana, Geneva, sans-serif;
background-color: #0066CC;
}
.menu a {
transition: all linear 0.15s;
color: white;
}
.menu li:hover > a,
.menu .current-item > a {
text-decoration: none;
color: #F4F9FD1;
}
.menu .arrow {
font-size: 11px;
line-height: 0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 19px;
}
.menu > ul > li > a {
padding: 10px 40px;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
background: #80B2E6;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 100%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #005CB8;
}
.sub-menu li {
display: block;
font-size: 16px;
}
.sub-menu li a {
padding: 10px 30px;
display: block;
}
.sub-menu li a:hover,
.sub-menu .current-item a {
background: #80B2E6;
}

convert css code from :hover to click

i have a problem :
there is in code , popup opens and close when the mouse hovers over the image, I want it to open and close when i press on the image .
photo on this code:
<a class="textlink" href="#" style="padding:10px 0;">
<img src="alert/images.gif" style="width: 21px;" />
<span id="mes">$count</span>
</a>
the full code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<style type="text/css">
a {
text-decoration: none;
color: #838383;
}
a:hover {
color: black;
}
#menu {
position: relative;
margin-left: auto;
top: -34px;
}
#menu ul {
list-style-type: none;
}
#menu li {
float: left;
position: relative;
text-align: center;
}
#menu ul.sub-menu {
position: absolute;
left: -10px;
z-index: 90;
display: none;
}
#menu ul.sub-menu li {
text-align: right;
}
#menu li:hover ul.sub-menu {
display: block;
}
.egg {
padding: 10px;
margin: 5px 5px 5px 5px;
position: relative;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
background-color: #fff;
border-radius: 3px 3px 3px 3px;
border: 1px solid rgba(100, 100, 100, 0.4);
}
.egg_Body {
border-top: 1px solid #D1D8E7;
color: #808080;
}
.egg_Message {
font-size: 13px !important;
font-weight: normal;
overflow: hidden;
}
h3 {
font-size: 13px;
color: #333;
margin: 0;
padding: 0;
}
.comment_ui {
border-bottom: 1px solid #e5eaf1;
clear: left;
float: none;
overflow: hidden;
padding: 6px 4px 3px 6px;
width: 331px;
cursor: pointer;
white-space: pre-line;
}
.comment_ui:hover {
background-color: #F7F7F7;
}
.comment_actual_text img {
margin: 0px 0px 0px 7px;
}
.dddd {
background-color: #f2f2f2;
border-bottom: 1px solid #e5eaf1;
clear: left;
float: none;
overflow: hidden;
margin-bottom: 2px;
padding: 6px 4px 3px 6px;
width: 331px;
}
.comment_text {
border-radius: 2px 2px 2px 2px;
padding: 2px 0 4px;
color: #333333;
}
.comment_actual_text {
display: inline;
padding-left: .4em;
}
ol {
list-style: none;
margin: 0 auto;
width: 500px;
margin-top: 20px;
}
#mes {
padding: 0px 3px;
border-radius: 3px 3px 3px 3px;
background-color: rgb(240, 61, 37);
background-color: #FF00CC;
font-size: 9px;
font-weight: bold;
color: #fff;
position: absolute;
top: 5px;
left: 73px;
}
.toppointer {
background-image: url(alert/top.png);
background-position: -82px 0;
background-repeat: no-repeat;
height: 11px;
position: absolute;
top: -11px;
width: 20px;
right: 276px;
}
.clean {
display: none
}
.textlink {
display: block;
width: 140px;
}
</style>
<span id="menu">
<ul>
<li>
<a class="textlink" href="#" style="padding:10px 0;">
<img src="alert/images.png" style="width: 21px;" />
<span id="mes">$count</span>
</a>
<ul class="sub-menu">
<li class="egg">
<div class="toppointer">
<img src="alert/top.png" />
</div>
<div id="view_comments"></div>
$all
<if condition="$count_all > 0 ">
<div class="bbbbbbb" id="view">
<div style="background-color: #F7F7F7; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; position: relative; z-index: 100; padding:8px; cursor:pointer;">
view all
</div>
</div>
</if>
</li>
</ul>
</li>
</ul>
</span>
Thank you very much !

Instead of the :hover pseudo-class, use the :active pseudo-class.
So the CSS block would look like this:
a:active {
color: black;
}
For more info, take a look at this: https://developer.mozilla.org/en-US/docs/Web/CSS/:active

Toggle with only CSS is a little bit tricky, but here is one way of doing it:
Demo: http://jsfiddle.net/DerekL/R5Bm5/
<input id="control" type="checkbox">
<label for="control"><span id="toggle">Toggle</span></label>
<div class="more">Here's more</div>
.more{
height: 0px;
overflow: hidden;
}
#control:checked ~ .more{
/*Do whatever you want here*/
height: 20px;
}
#control{
display: none;
}
#toggle{
color: blue;
text-decoration: underline;
cursor: pointer;
}
Of course, you can always toggle with JavaScript:
$("#toggle").click(function(){
$(".more").toggle();
});
A better demo according to your description: http://jsfiddle.net/DerekL/R5Bm5/2/