Develop Reference

How can I put the rectangle div on the space that was flex?

I want the div rectangle will also columned on that space provided. I used display flex on the .education so that the other div will be at the side of the education however if I attach the other rectangle div on the bottom side of the 2 rectangle it is on the side instead. Please excuse my English.
How can I do that? Please help me thank you in advance!
.resume-body {
background-color: #1f2021;
}
.wrapper-body-resume {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* Header */
.header-resume {
font-family: Arial;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-repeat: no-repeat;
margin: 0;
position: relative;
width: 100%;
height: 350px;
z-index: 1;
box-sizing: border-box;
display: flex;
flex-direction: row-reverse;
background: linear-gradient(to right, rgb(46, 46, 46), rgb(0, 0, 0));
}
.GP {
background: url(../Resources/Aljon-GP.png);
width: 100%;
height: 500px;
background-size: contain;
background-repeat: no-repeat;
bottom: 150px;
left: 400px;
position: relative;
}
.name-left {
text-align: center;
box-sizing: border-box;
justify-content: center;
width: 50%;
height: 100%;
padding: 80px 0 0 0;
margin: 0;
left: 300px;
position: relative;
}
.name-left h1 {
line-height: 0;
font-size: 30px;
color: #ffffff;
}
.name-left p {
color: #999999;
}
.body-resume {
width: 100%;
padding: 10px 20px;
box-sizing: border-box;
background-color: rgb(255, 255, 255);
}
.about {
padding: 5px;
margin: 10px;
font-family: Arial;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.about h1 {
padding: 10px;
margin: 5px;
font-size: 20px;
font-family: Arial;
color: #1f2021;
}
.about p {
padding: 10px;
margin: 5px;
font-size: 16px;
font-family: Arial;
font-style: italic;
}
.personalinfo {
padding: 5px;
margin: 10px;
font-family: Arial;
width: 22%;
height: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.personalinfo h1 {
padding: 10px;
margin: 5;
font-size: 20px;
font-family: Arial;
color: #1f2021;
}
.personalinfo p {
padding: 10px;
margin: 5px;
font-size: 16px;
font-family: Arial;
font-style: italic;
}
.column1 {
display: flex;
flex: row;
}
.education {
padding: 5px;
margin: 10px;
width: 30%;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: flex;
flex-direction: column;
}
.education h1 {
padding: 10px;
margin: 5;
font-size: 20px;
font-family: Arial;
color: #1f2021;
}
.education p {
padding: 10px;
margin: 5px;
font-size: 16px;
font-family: Arial;
font-style: italic;
}
.workexper {
padding: 5px;
margin: 10px;
font-family: Arial;
width: 100%;
height: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.cert {
padding: 5px;
margin: 10px;
font-family: Arial;
width: 50%;
height: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<main>
<div class="wrapper-body-resume">
<div class="header-resume">
<div class="GP"></div>
<div class="name-left">
<h1>Aljo</h1>
<p style=" color: white"><i><b>logy</b></i></p>
<p style=" color: white">Contac +39</p>
<hr>
<p><i>"Th</i></p>
<p><i>-Colin Powell</i></p>
</div>
</div>
<div class="body-resume">
<div class="about">
<h1>About me</h1>
<p>I .</p>
</div>
<div class="column1">
<div class="education">
<h1>Education</h1>
<p><b><u>Elementary</u></b></p>
<p><i><b>Sool</b></i><br>An9)</p>
<p><i><b>Scia</b></i><br>P11)</p>
<p><b><u>High School</u></b></p>
<p><i><b>Hemy</b></i><br>An 2012)</p>
<p><i><b>Frol</b></i><br>Po4)</p>
<p><i><b>Ju</b></i><br>C 2015)</p>
<p><b><u>College</u></b></p>
<p><i><b>Uninan</b></i><br>C5 - 2019)</p>
</div>
<div class="personalinfo">
<h1>Personal Info</h1>
<p>
</div>
<div class="workexper">
</div>
</div>
<div class="cert">
</div>
</div>
</div>
</main>

CSS-Grid proves out to be the powerful tool to achieve these kinds of layouts with neat code. This such a handy tool once you apply your #media queries to work you app on small screens, since this does not follow order. We can place grid-items any where we want on our grid.
Here is the demo.
.resume-body {
background-color: #1f2021;
}
.wrapper-body-resume {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* Header */
.header-resume {
font-family: Arial;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-repeat: no-repeat;
margin: 0;
position: relative;
width: 100%;
height: 350px;
z-index: 1;
box-sizing: border-box;
display: flex;
flex-direction: row-reverse;
background: linear-gradient(to right, rgb(46, 46, 46), rgb(0, 0, 0));
}
.GP {
background: url(../Resources/Aljon-GP.png);
width: 100%;
height: 500px;
background-size: contain;
background-repeat: no-repeat;
bottom: 150px;
left: 400px;
position: relative;
}
.name-left {
text-align: center;
box-sizing: border-box;
justify-content: center;
width: 50%;
height: 100%;
padding: 80px 0 0 0;
margin: 0;
left: 300px;
position: relative;
}
.name-left h1 {
line-height: 0;
font-size: 30px;
color: #ffffff;
}
.name-left p {
color: #999999;
}
.body-resume {
width: 100%;
padding: 10px 20px;
box-sizing: border-box;
background-color: rgb(255, 255, 255);
}
.about {
padding: 5px;
margin: 10px;
font-family: Arial;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.about h1 {
padding: 10px;
margin: 5px;
font-size: 20px;
font-family: Arial;
color: #1f2021;
}
.about p {
padding: 10px;
margin: 5px;
font-size: 16px;
font-family: Arial;
font-style: italic;
}
.column1 {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(5, 125px);
gap: 0.5rem;
}
.education {
padding: 5px;
margin: 10px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: flex;
flex-direction: column;
grid-column: 1/3;
grid-row: 1/6;
}
.education h1 {
padding: 10px;
margin: 5;
font-size: 20px;
font-family: Arial;
color: #1f2021;
}
.education p {
padding: 10px;
margin: 5px;
font-size: 16px;
font-family: Arial;
font-style: italic;
}
.personalinfo {
padding: 5px;
margin: 10px;
font-family: Arial;
height: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
grid-column: 3/5;
}
.personalinfo h1 {
padding: 10px;
margin: 5;
font-size: 20px;
font-family: Arial;
color: #1f2021;
}
.personalinfo p {
padding: 10px;
margin: 5px;
font-size: 16px;
font-family: Arial;
font-style: italic;
}
.workexper {
padding: 5px;
margin: 10px;
font-family: Arial;
height: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
grid-column: 5/9;
}
.cert {
padding: 5px;
margin: 10px;
font-family: Arial;
width: 50%;
height: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
grid-column: 3/9;
grid-row: 5/6;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<main>
<div class="wrapper-body-resume">
<div class="header-resume">
<div class="GP"></div>
<div class="name-left">
<h1>Aljo</h1>
<p style="color: white">
<i><b>logy</b></i>
</p>
<p style="color: white">Contac +39</p>
<hr />
<p><i>"Th</i></p>
<p><i>-Colin Powell</i></p>
</div>
</div>
<div class="body-resume">
<div class="about">
<h1>About me</h1>
<p>I .</p>
</div>
<div class="column1">
<div class="education">
<h1>Education</h1>
<p>
<b><u>Elementary</u></b>
</p>
<p>
<i><b>Sool</b></i
><br />An9)
</p>
<p>
<i><b>Scia</b></i
><br />P11)
</p>
<p>
<b><u>High School</u></b>
</p>
<p>
<i><b>Hemy</b></i
><br />An 2012)
</p>
<p>
<i><b>Frol</b></i
><br />Po4)
</p>
<p>
<i><b>Ju</b></i
><br />C 2015)
</p>
<p>
<b><u>College</u></b>
</p>
<p>
<i><b>Uninan</b></i
><br />C5 - 2019)
</p>
</div>
<div class="personalinfo">
<h1>Personal Info</h1>
<p></p>
</div>
<div class="workexper"></div>
<div class="cert"></div>
</div>
</div>
</div>
</main>
</body>
</html>
NOTE: The main change in the HTML file is that, I have also put the last div with class="cert" within my grid-container itself.

You will need to put those two divs in another div. So the div containing work experience and personal info will will be displayed as blocks relative to the flex div they are inside of. I have attached the example code with the fix.
.resume-body {
background-color: #1f2021;
}
.wrapper-body-resume {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* Header */
.header-resume {
font-family: Arial;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-repeat: no-repeat;
margin: 0;
position: relative;
width: 100%;
height: 350px;
z-index: 1;
box-sizing: border-box;
display: flex;
flex-direction: row-reverse;
background: linear-gradient(to right, rgb(46, 46, 46), rgb(0, 0, 0));
}
.GP {
background: url(../Resources/Aljon-GP.png);
width: 100%;
height: 500px;
background-size: contain;
background-repeat: no-repeat;
bottom: 150px;
left: 400px;
position: relative;
}
.name-left {
text-align: center;
box-sizing: border-box;
justify-content: center;
width: 50%;
height: 100%;
padding: 80px 0 0 0;
margin: 0;
left: 300px;
position: relative;
}
.name-left h1 {
line-height: 0;
font-size: 30px;
color: #ffffff;
}
.name-left p {
color: #999999;
}
.body-resume {
width: 100%;
padding: 10px 20px;
box-sizing: border-box;
background-color: rgb(255, 255, 255);
}
.about {
padding: 5px;
margin: 10px;
font-family: Arial;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.about h1 {
padding: 10px;
margin: 5px;
font-size: 20px;
font-family: Arial;
color: #1f2021;
}
.about p {
padding: 10px;
margin: 5px;
font-size: 16px;
font-family: Arial;
font-style: italic;
}
.personalinfo {
padding: 5px;
margin: 10px;
font-family: Arial;
width: 150px;
height: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.personalinfo h1 {
padding: 10px;
margin: 5;
font-size: 20px;
font-family: Arial;
color: #1f2021;
}
.personalinfo p {
padding: 10px;
margin: 5px;
font-size: 16px;
font-family: Arial;
font-style: italic;
}
.column1 {
display: flex;
flex: row;
}
.education {
padding: 5px;
margin: 10px;
width: 30%;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: flex;
flex-direction: column;
}
.education h1 {
padding: 10px;
margin: 5;
font-size: 20px;
font-family: Arial;
color: #1f2021;
}
.education p {
padding: 10px;
margin: 5px;
font-size: 16px;
font-family: Arial;
font-style: italic;
}
.workexper {
padding: 5px;
margin: 10px;
font-family: Arial;
width: 150px;
height: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.cert {
padding: 5px;
margin: 10px;
font-family: Arial;
width: 50%;
height: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<main>
<div class="wrapper-body-resume">
<div class="header-resume">
<div class="GP"></div>
<div class="name-left">
<h1>Aljo</h1>
<p style=" color: white"><i><b>logy</b></i></p>
<p style=" color: white">Contac +39</p>
<hr>
<p><i>"Th</i></p>
<p><i>-Colin Powell</i></p>
</div>
</div>
<div class="body-resume">
<div class="about">
<h1>About me</h1>
<p>I .</p>
</div>
<div class="column1">
<div class="education">
<h1>Education</h1>
<p><b><u>Elementary</u></b></p>
<p><i><b>Sool</b></i><br>An9)</p>
<p><i><b>Scia</b></i><br>P11)</p>
<p><b><u>High School</u></b></p>
<p><i><b>Hemy</b></i><br>An 2012)</p>
<p><i><b>Frol</b></i><br>Po4)</p>
<p><i><b>Ju</b></i><br>C 2015)</p>
<p><b><u>College</u></b></p>
<p><i><b>Uninan</b></i><br>C5 - 2019)</p>
</div>
<div class="flex-container">
<div class="personalinfo">
<h1>Personal Info</h1>
<p>
</div>
<div class="workexper">
</div>
</div>
</div>
<div class="cert">
</div>
</div>
</div>
</main>

.resume-body {
background-color: #1f2021;
}
.wrapper-body-resume {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* Header */
.header-resume {
font-family: Arial;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-repeat: no-repeat;
margin: 0;
position: relative;
width: 100%;
height: 350px;
z-index: 1;
box-sizing: border-box;
display: flex;
flex-direction: row-reverse;
background: linear-gradient(to right, rgb(46, 46, 46), rgb(0, 0, 0));
}
.GP {
background: url(../Resources/Aljon-GP.png);
width: 100%;
height: 500px;
background-size: contain;
background-repeat: no-repeat;
bottom: 150px;
left: 400px;
position: relative;
}
.name-left {
text-align: center;
box-sizing: border-box;
justify-content: center;
width: 50%;
height: 100%;
padding: 80px 0 0 0;
margin: 0;
left: 300px;
position: relative;
}
.name-left h1 {
line-height: 0;
font-size: 30px;
color: #ffffff;
}
.name-left p {
color: #999999;
}
.body-resume {
width: 100%;
padding: 10px 20px;
box-sizing: border-box;
background-color: rgb(255, 255, 255);
}
.about {
padding: 5px;
margin: 10px;
font-family: Arial;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.about h1 {
padding: 10px;
margin: 5px;
font-size: 20px;
font-family: Arial;
color: #1f2021;
}
.about p {
padding: 10px;
margin: 5px;
font-size: 16px;
font-family: Arial;
font-style: italic;
}
.personalinfo {
padding: 5px;
margin: 10px;
font-family: Arial;
width: 22%;
height: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.personalinfo h1 {
padding: 10px;
margin: 5;
font-size: 20px;
font-family: Arial;
color: #1f2021;
}
.personalinfo p {
padding: 10px;
margin: 5px;
font-size: 16px;
font-family: Arial;
font-style: italic;
}
.column1 {
display: flex;
flex: row;
}
.education {
padding: 5px;
margin: 10px;
width: 30%;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: flex;
flex-direction: column;
}
.education h1 {
padding: 10px;
margin: 5;
font-size: 20px;
font-family: Arial;
color: #1f2021;
}
.education p {
padding: 10px;
margin: 5px;
font-size: 16px;
font-family: Arial;
font-style: italic;
}
.workexper {
padding: 5px;
margin: 10px;
font-family: Arial;
width: 100%;
height: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.cert {
padding: 5px;
margin: 10px;
font-family: Arial;
width: 50%;
height: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<main>
<div class="wrapper-body-resume">
<div class="header-resume">
<div class="GP"></div>
<div class="name-left">
<h1>Aljo</h1>
<p style=" color: white"><i><b>logy</b></i></p>
<p style=" color: white">Contac +39</p>
<hr>
<p><i>"Th</i></p>
<p><i>-Colin Powell</i></p>
</div>
</div>
<div class="body-resume">
<div class="about">
<h1>About me</h1>
<p>I .</p>
</div>
<div class="column1">
<div class="education">
<h1>Education</h1>
<p><b><u>Elementary</u></b></p>
<p><i><b>Sool</b></i><br>An9)</p>
<p><i><b>Scia</b></i><br>P11)</p>
<p><b><u>High School</u></b></p>
<p><i><b>Hemy</b></i><br>An 2012)</p>
<p><i><b>Frol</b></i><br>Po4)</p>
<p><i><b>Ju</b></i><br>C 2015)</p>
<p><b><u>College</u></b></p>
<p><i><b>Uninan</b></i><br>C5 - 2019)</p>
</div>
<div class="personalinfo">
<h1>Personal Info</h1>
<p>
</div>
<div class="workexper">
</div>
<div class="cert"> <!--I have moved this into your column div!-->
</div>
</div>
</div>
</div>
</main>
You just needed to move your 'cert' div into the 'column' div because you had display flex on the column

how to add box under the initial and keep hover state?

I want the second box to hover under the "Download our Mobile App", and still want the hover state to be active so that I can be able to click on the links in the box, I am stuck so can anyone help me, please.
body {
background-color: #f5f5f5;
}
/* ======================START App Platforms===============================*/
header {
position: relative;
}
header .left {
float: left;
}
header .right {
float: right;
}
header .platform-container {
padding: 0 0 0 .5rem;
transition: all .5s ease-in-out;
}
header .platform-container li {
margin: 5px 0;
}
.platform-container:hover {
background-color: #fff;
-webkit-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, .3), 5px 0 20px -5px rgba(0, 0, 0, .3);
-moz-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, .3), 5px 0 20px -5px rgba(0, 0, 0, .3);
box-shadow: -5px 0 20px -5px rgba(0, 0, 0, .3), 5px 0 20px -5px rgba(0, 0, 0, .3);
position: relative;
z-index: 13;
cursor: pointer;
}
header ul {
eight: 30px;
}
header ul li {
margin: 0 5px;
display: inline-block;
list-style: none;
}
header ul li i {
vertical-align: middle;
margin-right: 5px;
font-size: 15px;
}
header ul>li>a,
header ul {
color: #6C6C6C;
text-decoration: none;
}
header ul li.mobile-links,
.mobile-links i {
color: #08a95b !important;
font-weight: 700;
}
header ul li.down-arrow i {
display: inline-block;
color: #bbb;
font-size: 15px;
margin-left: 5px;
}
header .app-platform {
position: absolute;
-webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3);
-moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3);
width: 223.5px;
background-color: #fff;
left: 0;
z-index: 12;
color: #333;
font-size: 14px;
cursor: default;
padding: 5px 0;
display: none;
}
header .platform-container:hover+.app-platform {
display: block;
}
header .mobile-app-link {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
header .mobile-app-link ul {
padding: 0;
}
header .mobile-app-link a {
text-decoration: none;
display: flex;
flex-direction: column;
}
header .mobile-app-link i {
margin: 0 auto;
}
header .mobile-app-link a span {
color: #0095DA!important;
font-size: 14px;
font-weight: 400;
margin: 10px auto;
}
header .mobile-app-container p {
font-size: 12px;
font-style: italic;
padding: 0 5px;
text-align: center;
}
/* ======================END App Platforms===============================*/
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<header>
<ul class="left platform-container">
<li class="mobile-links">
<i style="font-size: 20px" class="fa fa-mobile-phone"></i>Download our Mobile App
</li>
<li class="down-arrow">
<i class="fa fa-caret-down"></i>
</li>
</ul>
<div class="app-platform">
<div class="mobile-app-container">
<div class="mobile-app-link">
<ul>
<li>
<a href="#" target="_blank">
<i style="font-size: 48px;" class="fa fa-android"></i>
<span class="platform">Android</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#" target="_blank">
<i style="font-size: 48px;" class="fa fa-apple"></i>
<span class="platform">iOS</span>
</a>
</li>
</ul>
</div>
<p>Téléchargez-la maintenant!</p>
</div>
</div>
</header>

We need to wrap your .platform-container and .app-platform to a container. Then on that container set its position to relative and add the hover event styles.
.nav-wrapper {
position: relative;
}
.nav-wrapper:hover .app-platform {
display: block;
}
Once you have that all setup, we need now to set the correct position to your .app-platform when shown.
header .app-platform {
position: absolute;
top: 100%;
}
body {
background-color: #f5f5f5;
}
/* ======================START App Platforms===============================*/
header {
position: relative;
}
header .left {
float: left;
}
header .right {
float: right;
}
header .platform-container {
padding: 0 0 0 0.5rem;
transition: all 0.5s ease-in-out;
}
header .platform-container li {
margin: 5px 0;
}
.platform-container:hover {
/* background-color: #fff;
-webkit-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.3),
5px 0 20px -5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.3),
5px 0 20px -5px rgba(0, 0, 0, 0.3);
box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.3),
5px 0 20px -5px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 13;
cursor: pointer; */
}
header ul {
/* height: 30px; */
}
header ul li {
margin: 0 5px;
display: inline-block;
list-style: none;
}
header ul li i {
vertical-align: middle;
margin-right: 5px;
font-size: 15px;
}
header ul>li>a,
header ul {
color: #6c6c6c;
text-decoration: none;
}
header ul li.mobile-links,
.mobile-links i {
color: #08a95b !important;
font-weight: 700;
}
header ul li.down-arrow i {
display: inline-block;
color: #bbb;
font-size: 15px;
margin-left: 5px;
}
header .app-platform {
position: absolute;
top: 100%;
-webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
width: 223.5px;
background-color: #fff;
left: 0;
z-index: 12;
color: #333;
font-size: 14px;
cursor: default;
padding: 5px 0;
display: none;
}
header .mobile-app-link {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
header .mobile-app-link ul {
padding: 0;
}
header .mobile-app-link a {
text-decoration: none;
display: flex;
flex-direction: column;
}
header .mobile-app-link i {
margin: 0 auto;
}
header .mobile-app-link a span {
color: #0095da !important;
font-size: 14px;
font-weight: 400;
margin: 10px auto;
}
header .mobile-app-container p {
font-size: 12px;
font-style: italic;
padding: 0 5px;
text-align: center;
}
.nav-wrapper {
position: relative;
}
.platform-container {
margin: 0;
}
.nav-wrapper:hover .app-platform {
display: block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<header>
<div class="nav-wrapper left">
<ul class="platform-container">
<li class="mobile-links">
<i style="font-size: 20px;" class="fa fa-mobile-phone"></i>Download our Mobile App
</li>
<li class="down-arrow">
<i class="fa fa-caret-down"></i>
</li>
</ul>
<div class="app-platform">
<div class="mobile-app-container">
<div class="mobile-app-link">
<ul>
<li>
<a href="#" target="_blank">
<i style="font-size: 48px;" class="fa fa-android"></i>
<span class="platform">Android</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#" target="_blank">
<i style="font-size: 48px;" class="fa fa-apple"></i>
<span class="platform">iOS</span>
</a>
</li>
</ul>
</div>
<p>Téléchargez-la maintenant!</p>
</div>
</div>
</div>
</header>

Here's my take on this using JS:
const appPlatform = document.querySelector(".app-platform");
const platformContainerLi = document.querySelector(".platform-container li");
const mobileAppContainer = document.querySelector(".mobile-app-container");
platformContainerLi.onmouseover = function() {
appPlatform.style.display = 'block';
};
mobileAppContainer.onmouseover = function() {
appPlatform.style.display = 'block';
};
mobileAppContainer.onmouseout = function() {
appPlatform.style.display = 'none';
};
Example:
const appPlatform = document.querySelector(".app-platform");
const platformContainerLi = document.querySelector(".platform-container li");
const mobileAppContainer = document.querySelector(".mobile-app-container");
platformContainerLi.onmouseover = function() {
appPlatform.style.display = 'block';
};
mobileAppContainer.onmouseover = function() {
appPlatform.style.display = 'block';
};
mobileAppContainer.onmouseout = function() {
appPlatform.style.display = 'none';
};
body {
background-color: #f5f5f5;
}
/* ======================START App Platforms===============================*/
header {
position: relative;
}
header .left {
float: left;
}
header .right {
float: right;
}
header .platform-container {
padding: 0 0 0 .5rem;
transition: all .5s ease-in-out;
}
header .platform-container li {
margin: 5px 0;
}
.platform-container:hover {
background-color: #fff;
-webkit-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, .3), 5px 0 20px -5px rgba(0, 0, 0, .3);
-moz-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, .3), 5px 0 20px -5px rgba(0, 0, 0, .3);
box-shadow: -5px 0 20px -5px rgba(0, 0, 0, .3), 5px 0 20px -5px rgba(0, 0, 0, .3);
position: relative;
z-index: 13;
cursor: pointer;
}
header ul {
height: 30px;
}
header ul li {
margin: 0 5px;
display: inline-block;
list-style: none;
}
header ul li i {
vertical-align: middle;
margin-right: 5px;
font-size: 15px;
}
header ul>li>a,
header ul {
color: #6C6C6C;
text-decoration: none;
}
header ul li.mobile-links,
.mobile-links i {
color: #08a95b !important;
font-weight: 700;
}
header ul li.down-arrow i {
display: inline-block;
color: #bbb;
font-size: 15px;
margin-left: 5px;
}
header .app-platform {
position: absolute;
-webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3);
-moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3);
width: 223.5px;
background-color: #fff;
left: 0;
z-index: 12;
color: #333;
font-size: 14px;
cursor: default;
padding: 5px 0;
display: none;
}
header .platform-container:hover+.app-platform {
display: block;
}
header .mobile-app-link {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
header .mobile-app-link ul {
padding: 0;
}
header .mobile-app-link a {
text-decoration: none;
display: flex;
flex-direction: column;
}
header .mobile-app-link i {
margin: 0 auto;
}
header .mobile-app-link a span {
color: #0095DA!important;
font-size: 14px;
font-weight: 400;
margin: 10px auto;
}
header .mobile-app-container p {
font-size: 12px;
font-style: italic;
padding: 0 5px;
text-align: center;
}
/* ======================END App Platforms===============================*/
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<header>
<ul class="left platform-container">
<li class="mobile-links">
<i style="font-size: 20px" class="fa fa-mobile-phone"></i>Download our Mobile App
</li>
<li class="down-arrow">
<i class="fa fa-caret-down"></i>
</li>
</ul>
<div class="app-platform">
<div class="mobile-app-container">
<div class="mobile-app-link">
<ul>
<li>
<a href="#" target="_blank">
<i style="font-size: 48px;" class="fa fa-android"></i>
<span class="platform">Android</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#" target="_blank">
<i style="font-size: 48px;" class="fa fa-apple"></i>
<span class="platform">iOS</span>
</a>
</li>
</ul>
</div>
<p>Téléchargez-la maintenant!</p>
</div>
</div>
</header>
And if you want to keep icons below the bar, just adjust z-index also:
platformContainerLi.onmouseover = function() {
appPlatform.style.display = 'block';
appPlatform.style.zIndex = '-1';
};
mobileAppContainer.onmouseover = function() {
appPlatform.style.display = 'block';
appPlatform.style.zIndex = '-1';
};
mobileAppContainer.onmouseout = function() {
appPlatform.style.display = 'none';
appPlatform.style.zIndex = '';
};

jQuery Dropdown Function doesn't work on mobile devices

So I made a pretty simple function that causes a dropdown-menu to show up. It worked fine on my PC but not on my mobile devices. When I click the element which should show the dropdown menu, the dropd. menu doesn't show up. Actually nothing happens.
After some debugging it seems that this loop makes some trouble:
for (i=0;i <= faecher.length;i++) {$(id(faecher[i])).html(faecher[i]+" &#9660");}
Here a snippet:
function getMouseX() {
return (event.clientX + document.body.scrollLeft);
}
function getMouseY() {
return (event.clientY + document.body.scrollTop);
}
// Position of an element relative to left --> x coordinate
function getLiX(element) {
var pos = $(element).position();
return pos.left;
}
// Position of an element relative to top --> y coordinate
function getLiY(element) {
return $(element).height();
}
// Just a name list for my elements
var faecher = ["physik", "mathematik", "chemie", "latein", "info", "profil"];
// Sets a # before an element name
function id(id) {
return "#" + id;
}
// The main dropdown function
function dd(ex) {
var jId = id(ex);
document.getElementById("agenda").innerHTML = "1";
for (i = 0; i <= faecher.length; i++) {
$(id(faecher[i])).html(faecher[i] + " &#9660");
}
document.getElementById("agenda").innerHTML = "2";
$(jId).html(ex + " &#9650");
document.getElementById("agenda").innerHTML = "3";
for (i = 0; i <= faecher.length; i++) {
$(id(faecher[i])).css({
"background": "none",
"color": "#ffffff"
});
}
document.getElementById("agenda").innerHTML = "4";
$(jId + "DD").css('position', 'absolute');
document.getElementById("agenda").innerHTML = "5";
$(jId + "DD").css('top', getLiY(jId));
document.getElementById("agenda").innerHTML = "6";
$(jId + "DD").css('left', getLiX(jId));
document.getElementById("agenda").innerHTML = "7";
if ($(jId + "DD").css("display") != "none") {
$(jId).css({
"background": "none",
"color": "#ffffff"
});
$(jId).html(ex + " &#9660");
} else {
$(jId).css({
"background": "rgba(255, 255, 255, 0.97)",
"color": "#000000"
});
for (i = 0; i <= faecher.length; i++) {
$(id(faecher[i] + "DD")).slideUp(250);
}
}
document.getElementById("agenda").innerHTML = "8";
$(jId + "DD").outerWidth($(jId).outerWidth());
document.getElementById("agenda").innerHTML = "9";
$(jId + "DD").slideToggle(500);
document.getElementById("agenda").innerHTML = "10";
}
function physikClick() {
document.getElementById("agenda").innerHTML = "Click";
dd("physik");
} // .innerHTML just for debugging
function mathematikClick() {
dd("mathematik");
}
function chemieClick() {
dd("chemie");
}
function lateinClick() {
dd("latein");
}
function infoClick() {
dd("info");
}
function profilClick() {
dd("profil")
}
#font-face {
font-family: "aspace";
src: local("../media/font/aspace.otf"), url("../media/font/aspace.otf") format("OpenType")
}
#font-face {
font-family: "Nero";
src: local("../media/font/nero.otf"), url("../media/font/nero.otf") format("OpenType")
}
#font-face {
font-family: "MOONBEAM";
src: local("../media/font/moonbeam.ttf"), url("../media/font/moonbeam.ttf") format("TrueType")
}
#font-face {
font-family: "GOOD TIMES";
src: local("../media/font/goodtimes.ttf"), url("../media/font/goodtimes.ttf") format("TrueType")
}
#font-face {
font-family: "Induction";
src: local("../media/font/induction.ttf"), url("../media/font/induction.ttf") format("TrueType")
}
#font-face {
font-family: "Ethnocentric";
src: local("../media/font/ethnocentric.ttf"), url("../media/font/ethnocentric.ttf") format("TrueType")
}
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
body {
background-size: cover;
overflow: auto;
background-repeat: repeat-x;
font-family: Arial, Helvetica;
text-align: justify;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #335588;
/*background-image:url(../media/img/wa3.jpg),url(../media/img/wa2.jpg),url(../media/img/wa1.jpg),url(../media/img/wa4.jpg),url(../media/img/wa5.jpg);*/
}
h1 {
color: #FFFFFF;
font-family: "NEON CLUB MUSIC", "aspace", "MOONBEAM";
text-align: center;
}
h2,
h3,
h4,
h5,
h6 {
color: #FFFFFF;
font-family: "GOOD TIMES", "aspace", "MOONBEAM";
text-align: center;
letter-spacing: 2em;
}
a {
text-decoration: none;
color: #ffffff;
}
button,
input[type=submit],
input[type=reset] {
outline: none;
text-align: center;
padding-top: 5px;
font-family: "Good Times";
font-size: 17px;
transition: all 0.4s;
-webkit-transition: all 0.4s;
background: rgba(0, 0, 0, .6);
border: 1px solid rgba(255, 255, 255, 0.5);
color: #ffffff;
border-radius: 0.2em;
-webkit-border-radius: 0.2em;
-moz-border-radius: 0.2em;
box-shadow: .05em .05em .3em #ffffff;
text-shadow: 0.1em 0.1em 0.3em rgba(255, 255, 255, 0.5)
}
button:hover,
input[type=submit]:hover,
input[type=reset]:hover {
background: rgba(255, 255, 255, 1);
color: rgba(0, 0, 0, 1);
border-radius: 0.3em;
-webkit-border-radius: 0.3em;
-moz-border-radius: 0.3em;
box-shadow: .25em .25em .5em #eeeeee;
cursor: pointer;
text-shadow: 0.1em 0.1em 0.3em rgba(0, 0, 0, 1);
}
input[type=button] {
width: 25px;
height: 25px;
outline: none;
transition: all 0.4s;
-webkit-transition: all 0.4s;
background: rgba(0, 0, 0, .6);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: .05em .05em .3em #ffffff;
}
input[type=button]:hover {
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 1);
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
box-shadow: .25em .25em .5em #eeeeee;
cursor: pointer;
}
input[type=password],
input[type=file],
select,
option,
input[type=text],
input[type=search],
input[type=date],
input[type=number],
input[type=email],
textarea {
transition: all 0.5s;
-webkit-transition: all 0.5s;
outline: none;
background: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(255, 255, 255, 0.7);
color: #ffffff;
padding: 2px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
input[type=password]:focus,
input[type=file]:focus,
select:focus,
option:focus,
input[type=text]:focus,
input[type=date]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=email]:focus,
textarea:focus {
border: 1px solid #ffffff;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
input[type=password]::-webkit-input-placeholder,
input[type=file]::-webkit-input-placeholder,
select::-webkit-input-placeholder,
option::-webkit-input-placeholder,
input[type=text]::-webkit-input-placeholder,
input[type=date]::-webkit-input-placeholder,
input[type=number]::-webkit-input-placeholder,
input[type=email]::-webkit-input-placeholder,
input[type=search]::-webkit-input-placeholder {
color: rgba(50, 50, 50, 0.9);
text-shadow: none;
-webkit-text-fill-color: initial;
}
option: {
background: #ffffff;
color: rgba(0, 0, 0, .6)
}
table {
border-spacing: 0.5em;
display: table;
border-collapse: collapse;
border-color: #ffffff;
padding: 0.3em;
empty-cells: hide;
table-layout: auto;
width: 100%;
overflow: auto;
font-weight: normal;
text-align: left;
}
table th,
table td {
border: 1px solid #ffffff;
padding: 0.3em;
height: 1em;
overflow: auto;
font-weight: normal;
}
table .alt td {} #title {
position: relative;
text-align: center;
z-index: 5;
margin-top: 4em;
background: transparent;
}
#menubar {
left: 0;
right: 0;
position: fixed;
background: rgba(0, 0, 0, .8);
z-index: 10;
top: 0;
height: 3em;
vertical-align: middle;
line-height: 3em;
overflow: auto;
box-shadow: 0 .1em .9em #000000;
}
.mb {
margin: 0;
list-style-type: none;
font-family: "Good Times", "Arial";
vertical-align: middle;
}
.mb li {
display: inline;
-webkit-transition: all 0.7s;
transition: all 0.7s;
height: 100%;
padding-left: 1em;
padding-right: 1em;
float: left;
vertical-align: middle;
}
.mb li:hover {
background: rgba(255, 255, 255, 0.97) !important;
color: #000000 !important;
}
.dropdown {
z-index: 11;
/*border-radius:0.2em;
-webkit-border-radius:0.2em;
-moz-border-radius:0.2em;*/
background: rgba(255, 255, 255, 0.92);
display: none;
padding: 0.2em;
padding-left: 0.3em;
padding-top: 0.3em;
font-size: 1.2em;
background-clip: border-box;
text-align: left;
overflow: auto;
}
.dropdown a {
background-clip: border-box;
padding: 0 0;
}
.dropdown a:hover {
/*text-shadow: 0.5em 0.5em 1em #000000;*/
/*font-size:1.05em;*/
font-weight: bold;
}
#profil {
float: right;
}
.prlxcntr {
position: absolute;
top: 0;
margin: 0;
padding: 0;
}
#main {
background: rgba(0, 0, 0, 0);
color: #ffffff;
padding: 1px;
position: relative;
display: block;
border-top: 1px solid #ffffff;
width: 100%;
left: 0;
right: 0;
text-align: center;
margin: 0 auto;
z-index: 5;
}
#main h2 {
color: #ffffff;
font-family: "GOOD TIMES";
}
.text {
text-align: justify;
padding: 1em;
font-size: 1.3em;
}
#footer {
bottom: 0;
position: fixed;
background: rgba(0, 0, 0, .8);
left: 0;
right: 0;
text-align: center;
color: #ffffff;
padding: 0.2em;
overflow: auto;
z-index: 10;
}
.ddp {
color: rgba(0, 0, 0, 1);
}
.mainNav {
overflow: auto;
width: 98%;
}
.mainNav ul {
list-style-type: none;
}
.mainNav ul li {
display: inline;
transition: all 0.0s;
-webkit-transition: all 0.0s;
}
.mainNav ul li:hover {
display: inline;
border-bottom: 1px solid #ffffff;
cursor: pointer;
}
.div[id^="woerterliste"] {
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
width: 100%;
background: red;
}
#menubar2 {
left: 0;
right: 0;
position: fixed;
background: rgba(255, 255, 255, .8);
z-index: 9;
top: 3em;
height: 3em;
vertical-align: middle;
line-height: 3em;
overflow: auto;
color: #000000;
box-shadow: 0 .1em .9em #000000;
}
.mb2 {
margin: 0;
list-style-type: none;
font-family: "Good Times", "Arial";
vertical-align: middle;
color: #000000;
}
.mb2 li {
display: inline;
-webkit-transition: all 0.7s;
transition: all 0.7s;
height: 100%;
float: left;
padding-left: 1em;
padding-right: 1em;
vertical-align: middle;
color: #000000;
}
.mb2 li:hover {
cursor: pointer;
background: rgba(0, 0, 0, 0.97) !important;
color: #ffffff !important;
}
.ueberschrift {
font-family: Ethnocentric;
text-shadow: .1em .1em .5em #000000;
}
<!DOCTYPE html>
<html lang="ch_DE">
<head>
<title>My Site</title>
<meta charset="UTF-16" />
<!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
<link rel="stylesheet" type="text/css" href="css/universal.css"></link>
<link rel="stylesheet" type="text/css" href="css/idsAndClasses.css"></link>
<link rel="icon" href="media/img/logo.png" type="image/x-icon"></link>
<!--<script src="js/bootstrap.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/scrollmagic/minified/ScrollMagic.min.js"></script>
<script type='text/javascript' src='js/jquery.marquee.min.js'></script>
<script src="js/bitballoon.js"></script>
<script src="js/forms.js"></script>
<script src="js/client.js"></script>
<script src="js/functions.js"></script>
<!--<script src="js/styleManagement.js"></script>-->
<script src="js/clientManagement.js"></script>
<script src="js/parallax.js"></script>
<script>
$(document).on('beforeunload', function() {
$(document).scrollTop(0);
});
</script>
</head>
<body background="media/img/wa2.jpg" onload="scrollToTop()">
<!--<div class="prlxcntr" data-parallax="scroll" data-position="top" data-bleed="10" data-image-src="media/img/doubleNebula.jpg" data-natural-width="1400" data-natural-height="900">-->
<!-- http://i.imgur.com/kJiOdp8.jpg -->
<nav id="menubar">
<ul class="mb">
<a href="index.html" title="Home">
<li id="home">Home
</li>
</a>
<a href="#physik" onclick="physikClick()" title="Physik">
<li id="physik">Physik ▼
</li>
</a>
<a href="#mathematik" onclick="mathematikClick()" title="Mathematik">
<li id="mathematik">Mathematik ▼
</li>
</a>
<a href="#chemie" onclick="chemieClick()" title="Chemie">
<li id="chemie">Chemie ▼
</li>
</a>
<a href="#latein" onclick="lateinClick()" title="Latein">
<li id="latein">Latein ▼
</li>
</a>
<a href="#info" onclick="infoClick()" title="Info">
<li id="info">Info ▼
</li>
</a>
<a href="#profil" onclick="profilClick()" title="Profil">
<li id="profil">Profil ▼
</li>
</a>
</ul>
</nav>
<div class="parallax-window" id="title">
<h1 style="letter-spacing: 2em;" title='"Insert Easter Egg here."'>My Site</h1>
</div>
<!-- DROP DOWN DIV CONTAINERS -->
<div id="physikDD" class="dropdown"><a class="ddp" href="doc/physik/startseite.html">Theorie
</a>
<br /><a class="ddp" href="#formellehre">Formellehre
</a>
<br /><a class="ddp" href="#uebungen">Übungen
</a>
</div>
<div id="mathematikDD" class="dropdown"><a class="ddp" href="#theorie">Theorie
</a>
<br /><a class="ddp" href="#formellehre">Formellehre
</a>
<br /><a class="ddp" href="#uebungen">Übungen
</a>
</div>
<div id="chemieDD" class="dropdown"><a class="ddp" href="#theorie">Theorie
</a>
<br /><a class="ddp" href="#uebungen">Übungen
</a>
</div>
<div id="infoDD" class="dropdown"><a class="ddp" href="#agenda">Agenda
</a>
<br /><a class="ddp" href="doc/info/kontakt.html">Kontakt
</a>
<br /><a class="ddp" href="#ueber">Über
</a>
</div>
<div id="lateinDD" class="dropdown"><a class="ddp" href="#grammatik">Grammatik
</a>
<br /><a class="ddp" href="doc/latein/woerter.html">Wörter
</a>
</div>
<div id="profilDD" class="dropdown">
<!--<span id="profilName" style="color:white;text-decoration:underline;">Profil:</span><br />
Anmelden<br />Registrieren
--><b style="color: #ff7777;">IN ARBEIT</b>
</div>
<!-- MAIN DIV CONTAINER -->
<section class="text">
<h4 id="agenda">Debug Text</h4>
</section>
<!-- FOOTER DIV CONTAINER -->
<!--</div>-->
</body>
</html>
Do you know why this won't work with a mobile device?

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/

Issue with div floating on top of carousel

I'm using jCarousel and there's a weird bug on my page and I can't figure it out! Essentially, I'm trying to overlay a <div> on top of my carousel.
When I place the <div> on top, this weird gap pops up on top of the carousel! I don't know where it's coming from. Is it in the JavaScript?
The black box, I can format later. Just need to know why the white space is appearing.
JsFiddle from the bug
HTML
<div class="carousel-wrapper">
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<li>
<img src="http://placekitten.com/850/500" width="850" height="500" alt="">
</li>
<li>
<img src="http://placekitten.com/850/500" width="850" height="500" alt="">
</li>
<li>
<img src="http://placekitten.com/850/500" width="850" height="500" alt="">
</li>
</ul>
</div>
‹
›
<p class="jcarousel-pagination"></p>
</div>
</div>
CSS
#login-carousel-wrapper {
width: 850px;
height: 500px;
margin: 0px auto;
}
#login-carousel-area {
background-color: #000;
z-index: 999;
width: 200px;
height: 200px;
position: relative;
top: 200px;
left: 100px;
}
#body-wrapper {
width: 970px;
height: 100%;
margin: 0px auto;
text-align: top;
}
.carousel-wrapper {
max-width: 850px;
/*padding: 0 20px 40px 20px;*/
margin: auto;
}
.jcarousel-wrapper {
margin: 20px auto;
position: relative;
border: 10px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.jcarousel-wrapper .photo-credits {
position: absolute;
right: 15px;
bottom: 0;
font-size: 13px;
color: #fff;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
opacity: .66;
}
.jcarousel-wrapper .photo-credits a {
color: #fff;
}
/** Carousel **/
.jcarousel {
position: relative;
overflow: hidden;
width: 850px;
height: 500px;
}
.jcarousel ul {
width: 20000em;
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.jcarousel li {
float: left;
}
/** Carousel Controls **/
.jcarousel-control-prev, .jcarousel-control-next {
position: absolute;
top: 200px;
width: 30px;
height: 30px;
text-align: center;
background: #4E443C;
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000;
font: 24px/27px Arial, sans-serif;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.jcarousel-control-prev {
left: -50px;
}
.jcarousel-control-next {
right: -50px;
}
.jcarousel-control-prev:hover span, .jcarousel-control-next:hover span {
display: block;
}
.jcarousel-control-prev.inactive, .jcarousel-control-next.inactive {
opacity: .5;
cursor: default;
}
/** Carousel Pagination **/
.jcarousel-pagination {
position: absolute;
bottom: 0;
left: 15px;
}
.jcarousel-pagination a {
text-decoration: none;
display: inline-block;
font-size: 11px;
line-height: 14px;
min-width: 14px;
background: #fff;
color: #4E443C;
border-radius: 14px;
padding: 3px;
text-align: center;
margin-right: 2px;
opacity: .75;
}
.jcarousel-pagination a.active {
background: #4E443C;
color: #fff;
opacity: 1;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
}

Live Demo
If you are talking about the 20px white line in the top, that comes from .jcarousel-wrapper's margin: 20px auto;.
Just change 20px to 0px or add a new line overwriting margin-top if you want to keep the bottom margin:
.jcarousel-wrapper {
margin: 20px auto;
margin-top: 0px;
}