Dropdown Menu Element Not Displaying - html

I'm making a website that uses a group of images as a menu.
I was able to get one side to properly display the dropdown (slideout, in this case) menus. But even though both sides are identical, the other one does not display the menu on mouseOver.
I looked through the code for the last hour, and just can't find what is wrong.
Here is the jsFiddle.
Thanks :)
* {
box-sizing: border-box;
}
h1 {
font-size: 50px;
color: aliceblue
}
.topbar{
margin-top: 0px;
padding: 1px;
background-color:#605E5E;
border-bottom-style:inset;
border-bottom-color: #888888;
}
.touch-menu{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#eda954+0,e5933b+29,e59f54+56,e89230+79,e89230+91,e89230+100 */
background: rgb(237,169,84); /* Old browsers */
background: -moz-linear-gradient(top, rgba(237,169,84,1) 0%, rgba(229,147,59,1) 29%, rgba(229,159,84,1) 56%, rgba(232,146,48,1) 79%, rgba(232,146,48,1) 91%, rgba(232,146,48,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(237,169,84,1) 0%,rgba(229,147,59,1) 29%,rgba(229,159,84,1) 56%,rgba(232,146,48,1) 79%,rgba(232,146,48,1) 91%,rgba(232,146,48,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(237,169,84,1) 0%,rgba(229,147,59,1) 29%,rgba(229,159,84,1) 56%,rgba(232,146,48,1) 79%,rgba(232,146,48,1) 91%,rgba(232,146,48,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eda954', endColorstr='#e89230',GradientType=0 ); /* IE6-9 */
display: flex;
padding: 10px;
}
ul {
text-align: center;
list-style-type: none;
margin: 10px;
vertical-align: middle;
}
.slideout-content-top-left, .slideout-content-bottom-left {
display: none;
height: 95%;
margin: 10px 0px 10px 0px;
min-width: 16px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
background-color: #736E6F;
z-index: 1;
}
.slideout-content-top-right, .slideout-content-bottom-right {
display: none;
height: 95%;
margin: 10px 10px 10px 0px;
background-color: #736E6F;
min-width: 16px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
vertical-align: middle;
}
.menu-top-right :hover + .slideout-content-top-right , .menu-bottom-right :hover + .slideout-content-bottom-right {
display: inline-block;
}
.slideout-content-bottom-right:hover , .slideout-content-top-right:hover {
display: inline-block;
}
.menu-top-left :hover + .slideout-content-top-left , .menu-bottom-left :hover + .slideout-content-bottom-left {
display: inline-block;
}
.slideout-content-bottom-left:hover , .slideout-content-bottom-left:hover {
display: inline-block;
}
.touch-menu img:hover {
filter: brightness(1.25);
}
.column {
flex: 50%;
display: flex;
flex-direction: column;
vertical-align: middle;
}
.menu-top-left , .menu-bottom-left , .menu-bottom-right, .menu-top-right {
flex: 50%;
height: 100%;
}
.menu-bottom-left img, .menu-top-left img{
width: 50%;
height: 95%;
float: right;
margin: 10px 10px 10px 0px;
}
.menu-bottom-right img , .menu-top-right img {
width: 50%;
height: 95%;
float: left;
margin: 10px 0px 10px 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Heter Iska</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="images/favicon.png">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/styles.css">
<style>
body {font-family: "Lato", sans-serif}
</style>
</head>
<body>
<header>
<div class="topbar" align="center">
<h1>Links of Links</h1>
</div>
</header>
<div class="touch-menu" align="center">
<div class="column slideout-left" align="right">
<div class="menu-top-left" >
<div class="slideout-content-top-left" id="top-left">
<ul>
<li>
scaleLink 1
</li>
<li>
scaleLink 2
</li>
<li>
scaleLink 3
</li>
</ul>
</div>
<img class="slideout" src="https://avatarfiles.alphacoders.com/105/thumb-105223.jpg" alt="scale">
</div>
<div class="menu-bottom-left" >
<div class="slideout-content-bottom-left" id="bottom-left">
<ul>
<li>
bookLink 1
</li>
<li>
bookLink 2
</li>
<li>
bookLink 3
</li>
</ul>
</div>
<img class="slideout " src="https://avatarfiles.alphacoders.com/105/thumb-105223.jpg" alt="Book" >
</div>
</div>
<div class="column slideout-right" align="left">
<div class= "menu-top-right">
<img class="slideout " src="https://avatarfiles.alphacoders.com/105/thumb-105223.jpg" alt="topGavel">
<div class="slideout-content-top-right" id="top-right" >
<ul class="slidelist">
<li>
ugavelLink 1
</li>
<li>
ugavelLink 2
</li>
<li>
ugavelLink 3
</li>
</ul>
</div>
</div>
<div class="menu-bottom-right">
<img class="slideout" src="https://avatarfiles.alphacoders.com/105/thumb-105223.jpg" alt="bottomGavel">
<div class="slideout-content-bottom-right" id="bottom-right">
<ul>
<li>
lgavelLink 1
</li>
<li>
lgavelLink 2
</li>
<li>
lgavelLink 3
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="w3-container w3-padding-2 w3-center w3-opacity w3-dark-grey w3-xlarge">
<p class="w3-medium">Powered by Barack Obama</p>
</footer>
<script>
function expandTab(n) {
document.getElemen
}
</script>
</body>
</html>


Your css is wrong. You are using + instead >
* {
box-sizing: border-box;
}
h1 {
font-size: 50px;
color: aliceblue
}
.topbar {
margin-top: 0px;
padding: 1px;
background-color: #605E5E;
border-bottom-style: inset;
border-bottom-color: #888888;
}
.touch-menu {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#eda954+0,e5933b+29,e59f54+56,e89230+79,e89230+91,e89230+100 */
background: rgb(237, 169, 84); /* Old browsers */
background: -moz-linear-gradient(top, rgba(237, 169, 84, 1) 0%, rgba(229, 147, 59, 1) 29%, rgba(229, 159, 84, 1) 56%, rgba(232, 146, 48, 1) 79%, rgba(232, 146, 48, 1) 91%, rgba(232, 146, 48, 1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(237, 169, 84, 1) 0%, rgba(229, 147, 59, 1) 29%, rgba(229, 159, 84, 1) 56%, rgba(232, 146, 48, 1) 79%, rgba(232, 146, 48, 1) 91%, rgba(232, 146, 48, 1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(237, 169, 84, 1) 0%, rgba(229, 147, 59, 1) 29%, rgba(229, 159, 84, 1) 56%, rgba(232, 146, 48, 1) 79%, rgba(232, 146, 48, 1) 91%, rgba(232, 146, 48, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eda954', endColorstr='#e89230', GradientType=0); /* IE6-9 */
display: flex;
padding: 10px;
}
ul {
text-align: center;
list-style-type: none;
margin: 10px;
vertical-align: middle;
}
.slideout-content-top-left, .slideout-content-bottom-left {
display: none;
height: 95%;
margin: 10px 0px 10px 0px;
min-width: 16px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
background-color: #736E6F;
z-index: 1;
}
.slideout-content-top-right, .slideout-content-bottom-right {
display: none;
height: 95%;
margin: 10px 10px 10px 0px;
background-color: #736E6F;
min-width: 16px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
vertical-align: middle;
}
.menu-top-right:hover > .slideout-content-top-right, .menu-bottom-right:hover > .slideout-content-bottom-right {
display: inline-block;
}
.slideout-content-bottom-right:hover, .slideout-content-top-right:hover {
display: inline-block;
}
.menu-top-left:hover > .slideout-content-top-left, .menu-bottom-left:hover > .slideout-content-bottom-left {
display: inline-block;
}
.slideout-content-bottom-left:hover, .slideout-content-bottom-left:hover {
display: inline-block;
}
.touch-menu img:hover {
filter: brightness(1.25);
}
.column {
flex: 50%;
display: flex;
flex-direction: column;
vertical-align: middle;
}
.menu-top-left, .menu-bottom-left, .menu-bottom-right, .menu-top-right {
flex: 50%;
height: 100%;
}
.menu-bottom-left img, .menu-top-left img {
width: 50%;
height: 95%;
float: right;
margin: 10px 10px 10px 0px;
}
.menu-bottom-right img, .menu-top-right img {
width: 50%;
height: 95%;
float: left;
margin: 10px 0px 10px 10px;
}

Related

How to remove or edit surrounding white space?

How can I remove all the white spaces in the surrounding or edit it? I mean how to make the white spaces less thicker? ____________________________________________________________________________________________________________________________________________________________________________________________________________________
*,
*:after,
*:before {
padding: 0;
margin: 0;
font-family: Arial;
}
ul {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
list-style: none;
width: 955px;
height: 450px;
border-radius: 3px;
overflow: hidden;
box-shadow: 1px 1px 3px 1px;
}
li {
position: relative;
width: 190px;
height: 450px;
float: left;
border-left: 1px solid white;
-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
transition: all 0.7s;
box-shadow: -2px 0 10px 2px;
border-color: rgb(0, 0, 0);
}
ul li:first-child {
border: none;
}
span {
display: block;
position: absolute;
bottom: 0;
width: 50%;
color: white;
white-space: nowrap;
padding: 20px;
background: -moz-linear-gradient(
left,
rgba(0, 0, 0, 0.65) 0%,
rgba(0, 0, 0, 0) 100%
); /* FF3.6+ */
background: -webkit-gradient(
linear,
left top,
right top,
color-stop(0%, rgba(0, 0, 0, 0.65)),
color-stop(100%, rgba(0, 0, 0, 0))
); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(
left,
rgba(0, 0, 0, 0.65) 0%,
rgba(0, 0, 0, 0) 100%
); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(
left,
rgba(0, 0, 0, 0.65) 0%,
rgba(0, 0, 0, 0) 100%
); /* Opera 11.10+ */
background: -ms-linear-gradient(
left,
rgba(0, 0, 0, 0.65) 0%,
rgba(0, 0, 0, 0) 100%
); /* IE10+ */
background: linear-gradient(
to right,
rgba(0, 0, 0, 0.65) 0%,
rgba(0, 0, 0, 0) 100%
); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
}
img {
width: 800px;
height: 450px;
}
ul:hover li {
width: 50px;
cursor: pointer;
}
ul li:hover {
width: 750px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Currency Notes</title>
</head>
<body>
<div class="country-flags">
<ul>
<li>
<span>MYR</span>
<img src='images/malay.png' /></li>
<li>
<span>RMB</span>
<img src='images/china-flag-medium.jpg' /></li>
<li>
<span>USD</span>
<img src='images/united-states-of-america-flag-medium.jpg' /></li>
<li>
<span>SGD</span>
<img src='images/singapore-flag-medium.jpg' />
</li>
<li>
<span>HKD</span>
<img src='images/new HK.jpg' />
</li>
</ul>
</div>
</body>
</html>

Can you please try this:
body {
padding: 100px;
}
ul {
position: absolute;
display: flex;
align-content: center;
justify-content: center;
list-style: none;
width: 100%;
height: 100%;
border-radius: 3px;
overflow: hidden;
box-shadow: 1px 1px 3px 1px;
}
li {
position: relative;
width: 190px;
height: 75%;
float: left;
border-left: 1px solid white;
-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
transition: all 0.7s;
box-shadow: -2px 0 10px 2px;
border-color: rgb(0, 0, 0);
}

Centering ul content in a div

I'm a visual designer, and new to CSS. I have hit a road block and am hoping you can help me sort it out!
I have some text and images in a ul which I want centered in a div no matter how the browser is resized. I am adding this code to an adaptive wordpress theme.
.clinCon {
height: 460px;
background: rgb(249, 255, 254); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(249, 255, 254, 1) 0%, rgba(253, 253, 253, 1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(249, 255, 254, 1) 0%, rgba(253, 253, 253, 1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(249, 255, 254, 1) 0%, rgba(253, 253, 253, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f9fffe', endColorstr='#fdfdfd', GradientType=1); /* IE6-9 fallback on horizontal gradient */
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.clinCon > ul {
list-style-type: none;
padding: 33px 0px 0px 0px;
position: relative;
font-size: 22px;
letter-spacing: 0.05em;
color: #566471;
}
.clinCon img {
padding: 11px 20px 0 0;
color: #566471!important;
width: 70px;
}
.clinCon p {
font-size: 13px;
position: relative;
top: -23px;
left: 70px;
}
<section class="shadow">
<div class="clinical">CLINICAL</div>
<div class="clinCon">
<ul>
<li>
<img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon">1-on-1 Therapy</li>
<p class="explain">Address root causes of addiction</p>
<li>
<img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon">Addiction Education</li>
<p class="explain">Understand Addiction's inner workings</p>
<li>
<img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon">Literary Therapy</li>
<p class="explain">Identify, process and resolve trauma</p>
<li>
<img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon">Process Group</li>
<p class="explain">Connect with a group of your peers</p>
</ul>
</div>
</section>
Any help would be greatly appreciated. Thanks so much!!

Not Sure If you want to achieve this,
.clinCon {
height: 500px;
width: 100%;
text-align: center;
background: rgb(249, 255, 254);
/* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(249, 255, 254, 1) 0%, rgba(253, 253, 253, 1) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(249, 255, 254, 1) 0%, rgba(253, 253, 253, 1) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(249, 255, 254, 1) 0%, rgba(253, 253, 253, 1) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f9fffe', endColorstr='#fdfdfd', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.clinCon > ul {
list-style-type: none;
padding: 33px 0px 0px 0px;
position: relative;
font-size: 22px;
letter-spacing: 0.05em;
color: #566471;
}
.clinCon img {
padding: 11px 20px 0 0;
color: #566471!important;
width: 70px;
float: left;
margin-left: 2em;
}
.clinCon p {
font-size: 13px;
float: right;
margin-right: 3em;
margin-top: 2em;
}
<section class="shadow">
<div class="clinical">CLINICAL</div>
<div class="clinCon">
<ul>
<li>
<img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon">
<p class="explain">Process Group
<br>Connect with a group of your peers</p>
</li>
</ul>
</div>
</section>

Changed your HTML and CSS to meet your requirement....
.clinCon{
height:auto;
background: rgb(249,255,254); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(249,255,254,1) 0%, rgba(253,253,253,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(249,255,254,1) 0%,rgba(253,253,253,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(249,255,254,1) 0%,rgba(253,253,253,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fffe', endColorstr='#fdfdfd',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
.clinCon > ul{
list-style-type: none;
position: relative;
font-size: 22px;
letter-spacing: 0.05em;
color: #566471;
}
.clinCon > ul > li {
height: 70px;
display: block;
width: 400px;
margin: 0 auto;
padding: 20px 0px;
}
.clinCon img{
color: #566471!important;
width: 70px;
height: 70px;
display: inline-block;
float: left;
margin-right: 20px;
}
.clinCon span{
display: inline-block;
line-height: 1;
padding: 10px 0;
}
.clinCon p{
font-size: 13px;
position: relative;
display: block;
margin: 0 !important;
margin-left: -35px;
}
<section class="shadow">
<div class="clinical">CLINICAL</div>
<div class="clinCon">
<ul>
<li><img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon"><span>1-on-1 Therapy</span><p class="explain">Address root causes of addiction</p></li>
<li><img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon"><span>Addiction Education</span><p class="explain">Understand Addiction's inner workings</p></li>
<li><img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon"><span>Literary Therapy</span><p class="explain">Identify, process and resolve trauma</p></li>
<li><img src="http://thrpdx.com/wp-content/uploads/2017/02/ABIT-ICON.png" class="p-icon"><span>Process Group</span><p class="explain">Connect with a group of your peers</p></li>
</ul>
</div>
</section>
Check This out and let me know if it meets your requirement...

drop - down menu in css

I am new in css/html . I am working on cctccart project.while running this code
in bottom_menu,during click any menu like Products ,white background color is merging with blue.I want to fix this problem
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Cctvcart store</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="header_wrap">
<div class="header_top_wrap">
<div class="header_top">
</div>
</div>
<!--end of header top wrap -->
<div class="header_bottom_wrap">
<div class="header_bottom">
<ul class="bottom_menu">
<li>Company
</li>
<li>Products
<u1 class="submenu">
<li>DVR & Kits
</li>
<li>spy camraes
</li>
<li>alarms
</li>
</u1>
</li>
<li>Services
</li>
<li>Support
</li>
<li>Multimedia
</li>
</ul>
</div>
</div>
<!--end of bottom wrap -->
</div>
<!--end of header wrap -->
<div class="main_wrap">
<div class="main">
</div>
<!--end of main -->
</div>
<!--end of main wrap -->
<div class="footer_wrap">
<footer></footer>
</div>
<!--end of footer wrap -->
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
}
.header_wrap {
width: 100%;
height: 160px;
background: red;
position: relative;
}
.main_wrap {
width: 100%;
height: 1475px;
background: green;
}
.footer_wrap {
width: 100%;
height: 325px;
background: aqua;
}
.main {
width: 1000px;
height: 100%;
background: blue;
margin: auto;
}
footer {
width: 1000px;
height: 100%;
background: aqua;
margin: auto;
}
.header_top_wrap {
width: 100%;
height: 23px;
background: #ccc;
}
.header_bottom_wrap {
width: 100%;
height: 40px;
background: #06F;
position: absolute;
bottom: 0px;
left: 0px;
}
.header_top {
width: 1000px;
height: 100%;
background: purple;
margin: auto;
}
.header_bottom {
width: 1000px;
height: 100%;
background: black;
margin: auto;
}
.bottom_menu > li {
display: inline-block;
}
.bottom_menu a
{
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
color: #fff;
}
.bottom_menu > li >a {
display: block;
text-decoration: none;
padding: 0px 30px;
height: 45px;
line-height: 35px;
text-align: center;
}
.bottom_menu > li:hover >a
{
background:#fff;
color:#151716;
}
.submenu a:active, .submenu a:visited{
display: block;
color: #fff;
text-decoration: none;
z-index: 21;
}
.submenu {
position: absolute;
display: none;
width:160px;
height:250px;
background:white;
list-style:none;
}
.dropdown:hover > .submenu{
display: block;
}
.submenu>li>a
{
display:block;
width:100%;
height:42px;
background:black;
text-decoration:none;
line-height:58px;
padding-left:50px;
border:1px dashed white;
}

Edit your CSS to this:
.bottom_menu > li >a {
display: block;
text-decoration: none;
padding: 0px 30px;
height: 40px; /* this is the thing you have to fix */
line-height: 35px;
text-align: center;
}

I hope it can help you.
Link
HTML
<form id="form1" runat="server">
<div>
<br />
<br />
<div style="text-align: center;">
<label class="button">
<input type="radio" name="button" />
<span class="outer"><span class="inner"></span></span><span class="text">Add Details</span></label>
<label class="button">
<input type="radio" name="button" /> <span class="outer"><span class="inner"></span></span><span class="text">Choice 2</span></label>
<br />
<br />
<br />
<br />
</div>
<br />
</div>
</form>
CSS
.button {
background: #cfe7fa;
background: -moz-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cfe7fa), color-stop(100%, #6393c1));
background: -webkit-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -o-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -ms-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
border: 1px solid #6393c1;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
cursor: pointer;
display: inline-block;
font: 10px Arial, Verdana, Geneva, sans-serif;
line-height: 3px;
padding-right: 5px;
}
.button:hover .inner {
opacity:.5;
}
.button input {
display:none;
}
.button input:checked + .outer .inner {
opacity:1;
}
.button .outer {
background:#2989d8;
background:-moz-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #2989d8), color-stop(99%, #101354));
background:-webkit-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background:-o-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background:-ms-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background:radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
border:1px solid black;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
height:10px;
margin:5px;
width:10px;
}
.button .inner {
background:#e4f5fc;
background:-moz-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #e4f5fc), color-stop(50%, #bfe8f9), color-stop(51%, #9fd8ef), color-stop(100%, #2ab0ed));
background:-webkit-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background:-o-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background:-ms-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background:radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
display:block;
height:10px;
margin:.5px;
opacity:0;
-moz-transition:opacity .5s;
-webkit-transition:opacity .5s;
-o-transition:opacity .5s;
transition:opacity .5s;
width:10px;
}
span.text,
span.outer
{
display: inline-block;
vertical-align: middle;
}

How to create thismenu background?

I have a design that i should convert to a HTML page, there is a menu with a background and a little space between them, please see the image so you understand what i should do.
http://i.imgur.com/KC3KqLA.png
What i have (a bit messy):
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, blockquote {
margin: 0; padding: 0; border: 0;
}
body {
font-family: Helvetica, Arial, Sans-Serif; line-height: 24px;
background: #eee url(images/body-bg.jpg) center top no-repeat;
}
#container {
width: 80%; margin: 0 auto; height:1000px; margin-top: -75px; background-color: blue;
}
#destaques {
margin-top: 75px;
width:100%;
height: 100%;
background-color: grey;
}
#categories {
background-color: red;
position: absolute;
top: 80px; right: 25px;
}
#categories a {
margin: 0 4px;
font-size: 15px;
color: white;
text-decoration: none;
padding: 6px 20px;
}
#header {
overflow: hidden;
padding: 0 0 50px 0;
}
#mllcont {
height:200px;
background-color: grey;
}
#slidecont {
height: 650px;
background-color: red;
}
#squares {
width:100%;
height:250px;
}
#divs div {
height: 250px;
width: 20%;
border: 0px solid red;
margin-left: 2.5%;
margin-right: 2.5%;
float: left; /*Here you can also use display: inline-block instead of float:left*/
background: orange;
}
#header h1 {
float: left;
}
#content, #footer, #header {
height: 100%;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Particle</title>
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="slidecont">
<div id="mllcont">
<div id="logo">
</div>
<div id="header">
<ul id="categories">
Menu1</li>
Menu2</li>
Menu3</li>
Menu4</li>
</ul>
</div>
<div id="languages">
</div>
</div>
</div>
<div id="container">
<div id="squares">
<div id="divs">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>
</div>
<div id="destaques">
</div>
<div id="Projetos">
</div>
</div>
<div id="footer">
<ul id="credits">
<li>Powered by WordPress</li>
<li>Theme by SpoonGraphics</li>
</ul>
<p id="back-top">Back to top</p>
</div>
</div>
</body>
</html>

instead
<ul id="categories">
Menu1</li>
Menu2</li>
Menu3</li>
Menu4</li>
</ul>
use
<ul id="categories">
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
background menu - http://www.colorzilla.com/gradient-editor/
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, blockquote {
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: Helvetica, Arial, Sans-Serif;
line-height: 24px;
background: #eee url(images/body-bg.jpg) center top no-repeat;
}
#container {
width: 80%;
margin: 0 auto;
height:1000px;
margin-top: -75px;
background-color: blue;
}
#categories {
list-style: none;
position: absolute;
top: 80px;
right: 25px;
font-size: 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1b75b1+0,529282+47,71ac4a+100 */
background: rgb(27, 117, 177);
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;
base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFiNzViMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ3JSIgc3RvcC1jb2xvcj0iIzUyOTI4MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3MWFjNGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgb(27, 117, 177) 0%, rgb(82, 146, 130) 47%, rgb(113, 172, 74) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgb(27, 117, 177)), color-stop(47%, rgb(82, 146, 130)), color-stop(100%, rgb(113, 172, 74)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgb(27, 117, 177) 0%, rgb(82, 146, 130) 47%, rgb(113, 172, 74) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgb(27, 117, 177) 0%, rgb(82, 146, 130) 47%, rgb(113, 172, 74) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, rgb(27, 117, 177) 0%, rgb(82, 146, 130) 47%, rgb(113, 172, 74) 100%);
/* IE10+ */
background: linear-gradient(to right, rgb(27, 117, 177) 0%, rgb(82, 146, 130) 47%, rgb(113, 172, 74) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1b75b1', endColorstr='#71ac4a', GradientType=1);
/* IE6-8 */
}
#categories li {
display: inline-block;
vertical-align: top;
position: relative;
}
#categories li a {
font-size: 15px;
color: white;
text-decoration: none;
padding: 6px 22px;
display: block;
}
#categories li:before{
content: '';
width: 1px;
height: 15px;
background: #fff;
position: absolute; top: 0; left: 0;
}
#categories li:first-child:before{
background: none;
}
<ul id="categories">
<li>Menu1
</li>
<li>Menu2
</li>
<li>Menu3
</li>
<li>Menu4
</li>
</ul>

How come the navigation's box-shadow isn't showing?

I want to have the header's navigation to have a box shadow. However, the box-shadow seems to be hidden by the carousel I placed below it. I put a z-index of all children of #carousel but the box-shadow still doesn't show up.
(page snippet)
Here's what happens when I push #carousel down when I give it margin-top: 40px;
(another page snippet)
HTML
<header>
<nav>
<div class="container">
<h1><img src="images/logo.png" alt="" id="logo"></h1>
<h1 id="NHS">Newport High School</h1>
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Students</li>
<li>Parents</li>
<li>Activities & Atletics</li>
<li>Resources</li>
</ul>
</div><!--container--->
</nav>
</header><div id="carousel">
<div class="inner">
<ul>
<li><img src="images/example-slide-1.jpg" alt="Fish"></li>
<li><img src="images/example-slide-2.jpg" alt="Elephant"></li>
<li><img src="images/example-slide-3.jpg" alt="Giraffe"></li>
<li><img src="images/example-slide-4.jpg" alt="Fish"></li>
</ul>
</div>
</div>
CSS
/* - - - header - - - */
header {
background: rgb(30,27,27); /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,27,27,1) 0%, rgba(2,2,2,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,27,27,1)), color-stop(100%,rgba(2,2,2,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%);
box-shadow: 0px 3px 15px rgba(50, 50, 50, .7);
-webkit-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7);
-moz-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7);
z-index: 1000;
}
header h1, header li {
float: left;
}
header a {
color: #A1A1A1 ;
font-family: arial, helvetica, verana, sans-serif;
}
header a:hover {
color: #A1A1A1;
text-decoration: none;
}
#logo {
width: 50px;
}
#NHS {
margin: 1.8% 0 0 2%;
font-size: 1.2em;
text-transform: uppercase;
}
#NHS a {
color: #F6F6F6;
letter-spacing: 2px;
}
#nav {
float: right;
margin: 3% 0 0 0;
}
#nav li {
margin-right: 20px;
padding: 0;
}
#nav li:last-of-type {
margin-right: 0px;
}
#nav a {
font-size: .8em;
text-transform: uppercase;
padding-top: 3px;
font-weight: 400;
}
#nav a:hover {
border-top: 1px dotted #C41D0E;
}
/* - - - carousel - - - */
#carousel {
margin: 40px 0 0 0;
width: 100%;
overflow: hidden;
z-index: -999;
}
#carousel .inner {
box-sizing: border-box;
margin-left: -50px;
z-index: -5000;
}
#carousel ul {
width: 60000px;
height: 480px;
z-index: -5000;
}
#carousel li {
height: 480px;
float: left;
overflow: hidden;
z-index: -5000;
}
#carousel img {
text-align: center;
width: 1375px;
height: auto;
z-index: -5000;
}

Remember z-index only works with positioned elements. So both your carousel and header needs to have a position value other than static and then you can specify a higher z-index to the header. That way box-shadow will appear properly above the carousel.

You only need to add position:relative to the header. The carousel doesn't need a z-index alteration.

try adding !important to your shadowbox. I think that should work.
box-shadow: 0px 3px 15px rgba(50, 50, 50, .7) !important;
-webkit-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7) !important;
-moz-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7) !important;