Currently i have menu like this:
But I need to add a fill for the selected menu item and the same for home menu item, like next:
My code is:
<head>
<meta charset="UTF-8">
<title>Tab</title>
<style>
.tabs {
list-style-type: none;
position: relative;
}
.tabs:after {
content: "";
clear: both;
display: block;
}
.tabs li {
float: left;
}
.tabs li>input {
display: none;
}
.tabs li>label {
display: inline-block;
padding: 8px 30px;
}
.tabs .tab-content {
display: none;
position: absolute;
width: 100vw;
left: 0;
}
.tabs li>input:checked~.tab-content {
display: block;
}
ul {
background: rgb(65, 63, 63);
color: white;
}
.home {
background-color: blue;
}
.order {
background-color: green;
}
.tab-content {
padding: 5px;
border-top: 2px solid white;
}
</style>
</head>
<body>
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab-1" checked>
<label for="tab-1" class="home">Home</label>
<div class="tab-content home"></div>
</li>
<li>
<input type="radio" name="tabs" id="tab-2">
<label for="tab-2" class="order">Order</label>
<div class="tab-content order"></div>
</li>
</ul>
</body>
How i can add fill for selected menu item? Or maybe I need to somehow break the border and increase the height of the selected menu item?
A solution could be to use a pseudo-element after in your label tag:
.tabs label:after {
content: "";
display: none;
background-color: inherit;
position: absolute;
z-index: 10;
left: 0;
bottom: -2px;
height: 2px;
width: 100%;
}
.tabs li>input:checked+label:after {
display: block;
}
.tabs {
list-style-type: none;
position: relative;
}
.tabs:after {
content: "";
clear: both;
display: block;
}
.tabs li {
float: left;
}
.tabs li>input {
display: none;
}
.tabs li>label {
display: inline-block;
padding: 8px 30px;
position: relative;
}
.tabs .tab-content {
display: none;
position: absolute;
width: 100vw;
left: 0;
}
.tabs li>input:checked~.tab-content {
display: block;
}
ul {
background: rgb(65, 63, 63);
color: white;
}
.home {
background-color: blue;
}
.order {
background-color: green;
}
.tab-content {
padding: 5px;
border-top: 2px solid white;
}
.tabs li>input:checked+label:after {
display: block;
}
.tabs label:after {
content: "";
display: none;
background-color: inherit;
position: absolute;
z-index: 10;
left: 0;
bottom: -2px;
height: 2px;
width: 100%;
}
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab-1" checked>
<label for="tab-1" class="home">Home</label>
<div class="tab-content home"></div>
</li>
<li>
<input type="radio" name="tabs" id="tab-2">
<label for="tab-2" class="order">Order</label>
<div class="tab-content order"></div>
</li>
</ul>
Here's full working code:
document.querySelectorAll('.tabbar .tabs>li').forEach(function (c){
c.addEventListener('click', function(){
for (var elem of c.parentElement.children) {
elem.classList.remove('active');
document.querySelector(elem.getAttribute('page'))
.classList.remove('active');
}
document.querySelector(c.getAttribute('page')).classList.add('active');
c.classList.add('active');
});
});
body {
font-family: sans-serif;
}
.tabbar .tabs {
list-style: none;
display: flex;
flex-direction: row;
background: #aaa;
margin: 0 0 2px 0;
padding: 0;
}
.tabbar .pages {
list-style: none;
display: block;
padding: 0;
margin: 0;
color: #fff;
}
.tabbar .pages>li {
padding: 15px;
display: none;
}
.tabbar .pages>li.active {
display: block;
}
.tabbar .tabs>li {
padding: 10px 15px;
color: #fff;
position: relative;
cursor: pointer;
}
.tabbar .tabs>li.active:after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 2px;
background: inherit;
}
.tabbar .tabs>li:nth-child(1),
.tabbar .pages>li:nth-child(1){
background: blue;
}
.tabbar .tabs>li:nth-child(2),
.tabbar .pages>li:nth-child(2){
background: green;
}
.tabbar .tabs>li:nth-child(3),
.tabbar .pages>li:nth-child(3){
background: red;
}
<div class="tabbar">
<ul class="tabs">
<li page="#page-1">First</li>
<li page="#page-2" class="active">Second</li>
<li page="#page-3">Third</li>
</ul>
<ul class="pages">
<li id="page-1">Page 1</li>
<li id="page-2" class="active">Page 2</li>
<li id="page-3">Page 3</li>
</ul>
</div>
Related
I'm trying to complete a step progress bar, and on the final node the complete color is not reaching to the end, the finalized color is not being applied:
#charset "UTF-8";
.container {
width: 100%;
}
.multi-steps > li.is-active ~ li:before, .multi-steps > li.is-active:before {
content: counter(stepNum);
font-family: inherit;
font-weight: 700;
}
.multi-steps > li.is-active ~ li:after, .multi-steps > li.is-active:after {
background-color: #ededed;
}
.multi-steps {
margin: 0;
border-top: 1px solid red;
display: flex;
padding: 0;
}
.multi-steps > li {
flex: 1;
position: relative;
text-align: center;
display: flex;
counter-increment: stepNum;
flex-direction: column;
align-items: flex-start;
color: tomato;
}
.multi-steps > li:before {
content: "";
content: "✓;";
content: "𐀃";
content: "𐀄";
content: "✓";
width: 36px;
height: 36px;
line-height: 32px;
display: block;
/*margin: 0 auto 4px;*/
background-color: #fff;
text-align: center;
font-weight: bold;
border-width: 2px;
border-style: solid;
border-color: tomato;
border-radius: 50%;
}
.multi-steps > li:after {
content: "";
position: absolute;
height: 2px;
width: 100%;
background-color: tomato;
top: 16px;
left: 0;
right: 0;
z-index: -1;
}
.multi-steps > li:last-child {
/*&:after{*/
flex-grow: 0;
align-items: flex-end;
white-space: nowrap;
/*display: none;*/
/*}*/
}
.multi-steps > li.is-active:before {
background-color: #fff;
border-color: tomato;
}
.multi-steps > li.is-active ~ li {
color: #808080;
}
.multi-steps > li.is-active ~ li:before {
background-color: #ededed;
border-color: #ededed;
}
<div class="container">
<br /><br />
<ul class="list-unstyled multi-steps">
<li>
<div>Start</div>
</li>
<li>
<div>Should be aligned center</div>
</li>
<li>
<div>Should be centered too</div>
</li>
<li class="is-active">
<div>Finish step belevie or not</div>
</li>
</ul>
</div>
on this code I should center the titles of bot nodes and also the "completed" color should reach until the last node. For more detail please refer to my sniped code with sass
The problem is in your line:
.multi-steps > li.is-active ~ li:after, .multi-steps > li.is-active:after {
background-color: #ededed;
}
Which overrides the colour. Simply removing this will add the colour back in:
#charset "UTF-8";
.container {
width: 100%;
}
.multi-steps > li.is-active ~ li:before, .multi-steps > li.is-active:before {
content: counter(stepNum);
font-family: inherit;
font-weight: 700;
}
.multi-steps {
margin: 0;
border-top: 1px solid red;
display: flex;
padding: 0;
}
.multi-steps > li {
flex: 1;
position: relative;
text-align: center;
display: flex;
counter-increment: stepNum;
flex-direction: column;
align-items: flex-start;
color: tomato;
}
.multi-steps > li:before {
content: "";
content: "✓;";
content: "𐀃";
content: "𐀄";
content: "✓";
width: 36px;
height: 36px;
line-height: 32px;
display: block;
/*margin: 0 auto 4px;*/
background-color: #fff;
text-align: center;
font-weight: bold;
border-width: 2px;
border-style: solid;
border-color: tomato;
border-radius: 50%;
}
.multi-steps > li:after {
content: "";
position: absolute;
height: 2px;
width: 100%;
background-color: tomato;
top: 16px;
left: 0;
right: 0;
z-index: -1;
}
.multi-steps > li:last-child {
/*&:after{*/
flex-grow: 0;
align-items: flex-end;
white-space: nowrap;
/*display: none;*/
/*}*/
}
.multi-steps > li.is-active:before {
background-color: #fff;
border-color: tomato;
}
.multi-steps > li.is-active ~ li {
color: #808080;
}
.multi-steps > li.is-active ~ li:before {
background-color: #ededed;
border-color: #ededed;
}
<div class="container">
<br /><br />
<ul class="list-unstyled multi-steps">
<li>
<div>Start</div>
</li>
<li>
<div>Should be aligned center</div>
</li>
<li>
<div>Should be centered too</div>
</li>
<li class="is-active">
<div>Finish step belevie or not</div>
</li>
</ul>
</div>
I am trying to use HTML and CSS instead of images to show some arrows -- Here is the image:
I'm trying to make these arrows with before and after pseudo-elements, but I have got problems.
Here's my code:
HTML:
<ul class="steps-list">
<li class="step-item">
Contact us
</li>
<li class="step-item">
Consult with RCIC
</li>
<li class="step-item">
Apply via your pathway
</li>
<li class="step-item">
Settle in Canada
</li>
</ul>
SASS:
.steps-list {
display: flex;
.step-item {
display: inline-block;
text-align: center;
width: 25%;
.step-link {
font-weight: bold;
background: #e2e3e4;
width: 100%;
display: inline-block;
padding: 2rem 1rem;
&:hover {
#include gradient(left, $gradientList2);
}
}
}
}
I have followed this article by the way:
https://css-tricks.com/snippets/css/css-triangle/
[Edit] After looking at your image again, I failed to account for the first element being flat. I have updated my answer.
Using before,after, and nth-child selectors, you can achieve what you showed in your image. The before and after pseudo elements are used to create the top and bottom half of the arrows while the nth-child selectors are used to make the arrows appear to be progressively closer together.
.steps-list {
display: flex;
list-style: none;
}
.steps-list .step-item {
position: relative;
display: flex;
align-items:center;
text-align: center;
width: 25%;
}
.steps-list .step-item .step-link {
font-weight: bold;
width: 100%;
display: inline-block;
padding:10px 5px;
box-sizing:border-box;
}
.step-link::before {
content: "";
display: block;
position: absolute;
transform: skew(-40deg, 0);
background: #e2e3e4;
height: 50%;
bottom: 0;
z-index: -1;
left:5px;
}
.step-link::after {
content: "";
display: block;
position: absolute;
transform: skew(40deg, 0);
background: #e2e3e4;
height: 50%;
top: 0;
z-index: -1;
left:5px;
}
.step-item:nth-child(1){
overflow:hidden;
}
.step-item:nth-child(1) .step-link::after {
width:95%;
left:-15px;
}
.step-item:nth-child(1) .step-link::before {
width: 95%;
left:-15px;
}
.step-item:nth-child(2) .step-link::after {
width: 90%;
}
.step-item:nth-child(2) .step-link::before {
width: 90%;
}
.step-item:nth-child(3) .step-link::after {
width: 95%;
}
.step-item:nth-child(3) .step-link::before {
width: 95%;
}
.step-item:nth-child(4) .step-link::after {
width: 100%;
}
.step-item:nth-child(4) .step-link::before {
width: 100%;
}
<ul class="steps-list">
<li class="step-item">
Contact us
</li>
<li class="step-item">
Consult with RCIC
</li>
<li class="step-item">
Apply via your pathway
</li>
<li class="step-item">
Settle in Canada
</li>
</ul>
Check this site
.clearfix:after {
clear: both;
content: "";
display: block;
height: 0;
}
.container {
font-family: 'Lato', sans-serif;
width: 1000px;
margin: 0 auto;
}
.wrapper {
display: table-cell;
height: 400px;
vertical-align: middle;
}
.nav {
margin-top: 40px;
}
.arrow-steps .step {
font-size: 14px;
text-align: center;
color: #666;
cursor: default;
margin: 0 3px;
padding: 10px 10px 10px 30px;
min-width: 180px;
float: left;
position: relative;
background-color: #d9e3f7;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: background-color 0.2s ease;
}
.arrow-steps .step:after,
.arrow-steps .step:before {
content: " ";
position: absolute;
top: 0;
right: -17px;
width: 0;
height: 0;
border-top: 19px solid transparent;
border-bottom: 17px solid transparent;
border-left: 17px solid #d9e3f7;
z-index: 2;
transition: border-color 0.2s ease;
}
.arrow-steps .step:before {
right: auto;
left: 0;
border-left: 17px solid #fff;
z-index: 0;
}
.arrow-steps .step:first-child:before {
border: none;
}
.arrow-steps .step:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.arrow-steps .step span {
position: relative;
}
<div class="container">
<div class="wrapper">
<div class="arrow-steps clearfix">
<div class="step current"> <span> Step 1</span> </div>
<div class="step"> <span>Step 2 some words</span> </div>
<div class="step"> <span> Step 3</span> </div>
<div class="step"> <span>Step 4</span> </div>
</div>
</div>
</div>
I already figure out to do the circle steps horizontally. But to do like the picture below is quite stressful. Can you figure out how to do this?
Here is code
.container-progress {
margin: 100px auto;
font-size: 24px;
font-weight: bold;
font-family: Verdana;
color: white;
margin-top: 50px;
padding: 0;
}
.progressbar {
margin: 0;
padding: 0;
counter-reset: step;
}
.progressbar li {
list-style-type: none;
width: 16%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
}
.progressbar li:before {
width: 5em;
height: 5em;
content: counter(step);
counter-increment: step;
line-height: 90px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 10px auto;
padding: 0;
border-radius: 50%;
background-color: black;
font-size: 18px;
font-weight: bold;
}
.progressbar li:after {
margin-top: 30px;
width: 100%;
height: .5em;
content: '';
position: absolute;
background-color: #7d7d7d;
top: 15px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: white;
}
.progressbar li.active:before {
border-color: dodgerblue;
background: dodgerblue;
}
.progressbar li.active+li:after {
/*background-color: dodgerblue;*/
}
.progressbar label {
color: black;
}
<div class="container-progress">
<ul class="progressbar">
<li class="active active-step">
<label>step 1</label>
</li>
<li>
<label>step 2</label>
</li>
<li>
<label>step 3</label>
</li>
<li>
<label>step 4</label>
</li>
<li>
<label>step 5</label>
</li>
<li>
<label>step 6</label>
</li>
</ul>
</div>
Fiddle link
This uses a border on the ul to create your connecting lines and uses position:absolute to position the individual steps. You will probably need to tweak it a bit more but it could get you moving in the right direction.
Edit
To get the first three label to appear above ther cirlces, swap :before with :after. I've updated my code to reflect this.
.container-progress {
margin: 100px auto;
font-size: 24px;
font-weight: bold;
font-family: Verdana;
color: white;
margin-top: 50px;
padding: 0;
}
.progressbar {
margin: 0 50px;
padding: 0;
counter-reset: step;
position:relative;
border: 2px solid #7d7d7d;
border-left:none;
min-height:200px;
}
.progressbar li {
list-style-type: none;
width: 16%;
/*float: left;*/
font-size: 12px;
position: absolute;
text-align: center;
text-transform: uppercase;
}
/*First Three*/
.progressbar li:nth-child(-n+3)
{
top:-45px
}
/*Last Three*/
.progressbar li:nth-last-child(-n+3)
{
bottom:-75px
}
/*Left*/
.progressbar li:nth-child(1), .progressbar li:nth-child(6)
{
left:-45px
}
/*Middle*/
.progressbar li:nth-child(2), .progressbar li:nth-child(5)
{
left:calc(50% - 45px);
}
/*Right*/
.progressbar li:nth-child(3), .progressbar li:nth-child(4)
{
left:calc(100% - 45px);
}
.progressbar li:nth-last-child(-n+3):before, .progressbar li:nth-child(-n+3):after {
width: 5em;
height: 5em;
content: counter(step);
counter-increment: step;
line-height: 90px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 10px auto;
padding: 0;
border-radius: 50%;
background-color: black;
font-size: 18px;
font-weight: bold;
}
/*.progressbar li:after {
margin-top: 30px;
width: 100%;
height: .5em;
content: '';
position: absolute;
background-color: #7d7d7d;
top: 15px;
left: -50%;
z-index: -1;
}*/
/*.progressbar li:first-child:after {
content: none;
}*/
.progressbar li.active {
color: white;
}
.progressbar li.active:before, .progressbar li.active:after {
border-color: dodgerblue;
background: dodgerblue;
}
.progressbar li.active+li:after {
/*background-color: dodgerblue;*/
}
.progressbar label {
color: black;
}
<div class="container-progress">
<ul class="progressbar">
<li class="active active-step">
<label>step 1</label>
</li>
<li>
<label>step 2</label>
</li>
<li>
<label>step 3</label>
</li>
<li>
<label>step 4</label>
</li>
<li>
<label>step 5</label>
</li>
<li>
<label>step 6</label>
</li>
</ul>
</div>
I am trying to build up a horizontal css wizard navigation with a rounded css circle and text on each step. I am stuck on 1 point need to get ride on border from right side. Tried almost all steps. Attaching the code.
Attaching the screenshot of issue as well.
error image
ul {
text-align: justify;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
}
ul:before {
content: '';
width: 96%;
border: 2px solid #21a2d1;
position: absolute;
top: 1em;
margin-top: -6px;
z-index: -1;
margin-left: 16px;
}
.active:after {
content: '';
width: 100%;
border: 2px solid #b7b7b7;
position: absolute;
top: 1em;
margin-top: -6px;
z-index: -1;
}
ul:after {
content: '';
display: inline-block;
width: 100%;
}
li {
width: 1.5em;
height: 1.5em;
text-align: center;
line-height: 1.7em;
border-radius: 50%;
background: #21a2d1;
margin: 0 1em;
display: inline-block;
}
.marker-number {
font-size: 14px;
}
li.active {
background: #04497b;
}
.active ~ li {
background: #b7b7b7;
}
span.marker-text {
color: #7d7d7d;
font-size: 12px;
line-height: 16px;
width: 70px;
display: block;
margin-left: -21px;
font-family: Arial;
}
<ul>
<li><span class="marker-number"> </span> <span class="marker-text">Select Car</span></li>
<li><span class="marker-number"> </span> <span class="marker-text">Questions</span></li>
<li class="active"><span class="marker-number"> </span> <span class="marker-text">Problems</span></li>
<li><span class="marker-number"> </span> <span class="marker-text">Inspection</span></li>
<li><span class="marker-number"> </span> <span class="marker-text">Solution</span></li>
</ul>
Here is a sample, using flexbox, with a minimal markup, and for the marker the ::before pseudo and the line the ::after pseudo (starting from the 2:nd position)
ul.wizard, ul.wizard li {
margin: 0;
padding: 0;
display: flex;
width: 100%;
}
ul.wizard {
counter-reset: num;
}
ul.wizard li {
flex-direction: column;
align-items: center;
position: relative;
}
ul.wizard li::before {
counter-increment: num;
content: counter(num);
width: 1.5em;
height: 1.5em;
text-align: center;
line-height: 1.5em;
border-radius: 50%;
background: #21a2d1;
}
ul.wizard li ~ li::after {
content: '';
position: absolute;
width: 100%;
right: 50%;
height: 4px;
background-color: #21a2d1;
top: calc(.75em - 2px);
z-index: -1;
}
ul.wizard li.active::before {
background: #04497b;
color: white;
}
ul.wizard .active ~ li::before,
ul.wizard .active ~ li::after {
background: #b7b7b7;
}
ul.wizard span {
color: #7d7d7d;
font-size: 12px;
font-family: Arial;
}
/* updated sample */
ul.wizard li.completed::before { /* number and circle */
background: red;
color: white;
}
ul.wizard li.completed span { /* text */
color: red;
}
ul.wizard li.completed + li::after { /* line after circle */
background: red;
}
ul.wizard li.completed::after { /* line before circle */
background: red;
}
<ul class="wizard">
<li>
<span>Select Car</span>
</li>
<li class="completed">
<span>Questions</span>
</li>
<li class="active">
<span>Problems</span>
</li>
<li>
<span>Inspection</span>
</li>
<li>
<span>Solution</span>
</li>
</ul>
This can also be done without flexbox, if you need to target older browsers
ul.wizard, ul.wizard li {
margin: 0;
padding: 0;
}
ul.wizard {
counter-reset: num;
}
ul.wizard li {
list-style-type: none;
float: left;
width: 20%;
position: relative;
text-align: center;
}
ul.wizard li::before {
display: block;
counter-increment: num;
content: counter(num);
width: 1.5em;
height: 1.5em;
text-align: center;
line-height: 1.5em;
border-radius: 50%;
background: #21a2d1;
margin: 0 auto;
}
ul.wizard li ~ li::after {
content: '';
position: absolute;
width: 100%;
right: 50%;
height: 4px;
background-color: #21a2d1;
top: calc(.75em - 2px);
z-index: -1;
}
ul.wizard li.active::before {
background: #04497b;
color: white;
}
ul.wizard .active ~ li::before,
ul.wizard .active ~ li::after {
background: #b7b7b7;
}
ul.wizard span {
display: inline-block;
color: #7d7d7d;
font-size: 12px;
font-family: Arial;
}
<ul class="wizard">
<li>
<span>Select Car</span>
</li>
<li>
<span>Questions</span>
</li>
<li class="active">
<span>Problems</span>
</li>
<li>
<span>Inspection</span>
</li>
<li>
<span>Solution</span>
</li>
</ul>
Reduce width of pseudo element :befor to 90% and :after to 45% but you have to write it always different width percentages as per the activated li tag and as per screen size. I think If you modify your markup a little bit which will help you more and make the complications less.
============================================================
Changed markup as you required and few tweaks in css
ul {
text-align: justify;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
display: inline-flex;
justify-content: space-around;
width: 100%;
}
li {
position: relative;
width: 20%;
text-align: center;
display: inline;
padding-bottom: 20px;
}
.marker-number {
width: 1.5em;
height: 1.5em;
text-align: center;
line-height: 1.7em;
border-radius: 50%;
background: #21a2d1;
display: inline-block;
}
.marker-line {
position: absolute;
width: 100%;
height: 4px;
background-color: #21a2d1;
top: 10px;
}
li.active span.marker-number,
li.active span.marker-line {
background: #04497b;
}
.active ~ li span.marker-number,
.active ~ li span.marker-line {
background: #b7b7b7;
}
span.marker-text {
color: #7d7d7d;
font-size: 12px;
line-height: -15px;
font-family: Arial;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
<ul>
<li>
<span class="marker-number"> </span>
<span class="marker-line"></span>
<span class="marker-text">Select Car</span>
</li>
<li>
<span class="marker-number"> </span>
<span class="marker-line"></span>
<span class="marker-text">Questions</span>
</li>
<li class="active">
<span class="marker-number"> </span>
<span class="marker-line"></span>
<span class="marker-text">Problems</span>
</li>
<li>
<span class="marker-number"> </span>
<span class="marker-line"></span>
<span class="marker-text">Inspection</span>
</li>
<li>
<span class="marker-number"> </span>
<span class="marker-text">Solution</span>
</li>
</ul>
So I'm working on a CSS drop down menu where the div container is revealed by a radio button and I have that working as I'd like.
However, I'd like to add a second level to my drop-down just like it (same width, positioning beneath parent, ect..) I have it revealing the second level when you click on the input, however, If the input is in the middle (in between two links) my first level's links move beneath my first level of sub-menu. Please help? I can't figure out how to keep it looking the same way it's just if that input has another sub menu I would like for it to drop down below the first.
My code:
/*CSS for Menu */
.menu {
position: fixed;
top: 0;
left: 0;
height: 20px;
width: 100%;
z-index: 10000;
display: inline-block;
background-image: black url(../images/glossyback.gif);
background-color: #0066CC;
text-align: center;
font-family: Arial, Geneva, sans-serif;
}
/*CSS for main menu labels */
input + label {
color: #FFFFFF;
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: 20px;
display: none;
}
input:checked + label + div {
display: block;
}
/*CSS for main menu labels within menu class*/
.menu input {
display: none;
opacity: .3;
margin-right: -.7em;
margin-left: 0em;
overflow: visible;
}
.menu a {
text-decoration: none;
color: #FFFFFF;
}
.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 input:checked + label {
background-color: #AFCEEE;
border-color: #6696CB;
z-index: 1000;
}
div.menu input + label {
z-index: 1000;
padding: 0;
border-color: #ccc;
border-width: 0 1px;
height: 19px;
margin: 0 -.23em;
}
/*CSS for submenu container */
.menu input + label + div {
position: absolute;
border: 1px solid #808080;
right: 0;
background: #F0F6FC;
text-align: center;
width: 100%;
margin: 0 auto;
}
.menu input + label + div > div {
z-index: 1000;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid #ABABAB;
padding: 16px;
padding-top: 5px;
}
/*CSS for sub menu items*/
.sub-menu {
font-size: 14px;
display: inline-block;
}
.sub-menu a {
text-decoration: none;
color: #EEEEEE;
}
.sub-menu ul {
list-style-type: none;
}
.sub-menu li {
width: 175px;
color: #F0F0F0;
background-color: #9CB9D7;
display: inline-block;
}
.sub-menu li:hover {
color: #FFFFFF;
text-decoration: none;
background-color: #3385D6;
}
/*CSS for sub-menu second level */
.sub-menu input[type=radio] {
display: none;
}
.sub-menu input[type=radio]:checked ~ .remove-check {
display: none;
}
.sub-menu input[type=radio]:checked ~ #second-level {
display: block;
}
#second-level {
display: none;
}
/* The styling of items, ect...*/
.sub-menu input[type=text] {
width: 225px;
padding: 12px 14px;
}
.sub-menu div {
border: 1px solid #808080;
right: 0;
background: #F0F6FC;
text-align: center;
width: 100%;
margin: 0 auto;
}
.sub-menu div div {
top: 90%;
z-index: 1000;
position: absolute;
border: 1px solid #ABABAB;
padding: 16px;
padding-top: 5px;
}
.sub-menu .second-level-items {
width: 175px;
color: #F0F0F0;
background-color: #9CB9D7;
display: inline-block;
}
<div class="menu">
<input type="radio" name="UItab" id="tabf">
<label for="tabf"><span>Styles</span>
</label>
<div>
<div>
<ul class="sub-menu">
<a href="">
<li id="linkj">First Link</li>
</a>
<label for="reveal-email">
<li>Tab in submenu</li>
</label>
<input type="radio" id="reveal-email">
<div id="second-level">
<div>
<a href="">
<li>Links2.0</li>
</a>
</div>
</div>
<label for="reveal-email">
<li>Tab in submenu</li>
</label>
<input type="radio" id="reveal-email">
<div id="second-level">
<div>
<a class="second-level-items" href="">
<li>Links2.0</li>
</a>
</div>
</div>
<a href="">
<li id="linkj">First Link</li>
</a>
</div>
</div>
</div>