Develop Reference

Linear gradient above img tag css

I have a card and images are fetched from BE. The image is a background image of a card. The text goes above this image. I need to add a gradient above the image and below text. Also when user hovers over the card, gradient color should change. How do I make the image to fill the entire card and show linear-gradient on an image?
.card {
position: relative;
margin-left: 25px;
min-width: 245px;
height: 293px;
border-radius: 20px;
box-shadow: 0px 4px 12px 1px var(--box-shadow-color);
margin-right: 1rem;
display: flex;
flex-direction: column;
align-items: center;
align-items: center;
justify-content: center;
z-index: 2;
transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
transform: scale(1);
transition-duration: 300ms;
}
<ul class="carousel" data-target="carousel">
<li class="card" data-target="card">
<img class="background" src="../scr/images/image.png">
<h2> Title
<h2>
</li>
</ul>

// enter code here
.card {
position: relative;
margin-left: 25px;
min-width: 245px;
height: 293px;
border-radius: 20px;
box-shadow: 0px 4px 12px 1px var(--box-shadow-color);
margin-right: 1rem;
display: flex;
flex-direction: column;
align-items: center;
align-items: center;
justify-content: center;
z-index: 2;
transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
transform: scale(1);
transition-duration: 300ms;
display:inline-block;
}
.pickgradient {
display:inline-block;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
img{
position:relative;
z-index:-1;
display:block;
height:200px; width:auto;
}
<ul class="carousel" data-target="carousel">
<li class="card" data-target="card">
<div class="pickgradient">
<img src="https://i.imgur.com/5I0iHYf.jpg" />
</div>
<h2> Title dfdf
</h2>
</li>
</ul>

try this.
body {
font-family: 'Segoe UI', 'San Francisco', Calibri, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.c-graidient {
background: #000;
background: -moz-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background-size: 400% 400%;
background-repeat: no-repeat;
display: flex;
width: 500px;
height: 500px;
max-width: 100vw;
max-height: auto;
justify-content: center;
align-items: center;
color: #fff;
position: relative;
cursor: pointer;
transition: .5s all;
}
.c-graidient__img {
position: absolute;
left: 0;
top: 0;
background-position: center center;
background-repeat: no-repeat;
background: #000;
background-size: cover;
width: 100%;
height: auto;
z-index: 1;
opacity: .5;
mix-blend-mode: screen;
}
.c-graidient__title {
position: relative;
z-index: 10;
text-transform: uppercase;
letter-spacing: .05em;
}
.c-graidient:hover {
background-position: 100% 100%;
}
.c-graidient:hover__title {
text-shadow: 0 0 20px black;
}
<a class="c-graidient">
<img class="c-graidient__img" src="https://images.unsplash.com/photo-1466657718950-8f9346c04f8f?dpr=1&auto=format&fit=crop&w=800&h=800&q=80&cs=tinysrgb" />
<h2 class="c-graidient__title">Gradient Hover Effect</h2>
</a>

Here is a solution, try this.
body {
font-family: 'Segoe UI', 'San Francisco', Calibri, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.c-graidient {
background: #000;
background: -moz-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background-size: 400% 400%;
background-repeat: no-repeat;
display: flex;
width: 500px;
height: 500px;
max-width: 100vw;
max-height: 100vh;
justify-content: center;
align-items: center;
color: #fff;
position: relative;
cursor: pointer;
transition: .5s all;
}
.c-graidient__img {
position: absolute;
left: 0;
top: 0;
background: #000 url(https://images.unsplash.com/photo-1466657718950-8f9346c04f8f?dpr=1&auto=format&fit=crop&w=800&h=800&q=80&cs=tinysrgb) no-repeat center center;
background-size: cover;
width: 100%;
height: 100%;
z-index: 1;
opacity: .5;
mix-blend-mode: screen;
}
.c-graidient__title {
position: relative;
z-index: 10;
text-transform: uppercase;
letter-spacing: .05em;
}
.c-graidient:hover {
background-position: 100% 100%;
}
.c-graidient:hover__title {
text-shadow: 0 0 20px black;
}
<a class="c-graidient">
<div class="c-graidient__img"></div>
<h2 class="c-graidient__title">Gradient Hover Effect</h2>
</a>

How to get this link to work on this element?

I was wondering how to get the link/a href to work on the text inside the box? I'm not sure what is causing the link to not work/function. I'd like to keep the animation if possible, not sure if this is what is causing the link to not work. Thank you for your help in advance!
Here is my html and css:
.sign a {
text-decoration: none;
cursor: pointer;
}
s
.sign a:hover {
color:aqua;
}
.sign {
position: relative;
vertical-align: top;
margin: 0 auto;
z-index: -10;
margin-top: 10px;
display: inline-block;
/* sign width */
width: 150px;
/* Give it a white border */
border: 5px solid #fff;
/* pad content text away from the edges of the sign */
padding: 1em 1em .75em;
/* give it a drop shadow and inset shadow at the top */
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 5px 10px rgba(0, 0, 0, 0.4);
/* setup a default background red and a red gradient where supported */
background-color: #a1cdad;
//background: linear-gradient(top, #ff9696 0%, #c80000 100%);
/* attempt to get rid of jaggies when rotated */
transform-style: preserve-3d;
backface-visibility: hidden;
/* nice rounded corners */
border-radius: 15px;
/* set the swing origin (nail body) */
transform-origin: 50% -65px;
/* animate the swing with pendulum-style easing */
animation: swing 1.5s infinite alternate ease-in-out;
}
.sign:hover {
/* Hover over the sign to stop the animation */
animation-play-state: paused;
}
.sign p {
/* Typography */
/* let's have uppercase.. */
text-transform: uppercase;
/* bold... */
font-weight: bold;
/* white... */
color: #fff;
/* centered text */
text-align: center;
/* text-shadow: 0 0 2px rgba(0,0,0,1);*/
margin: 0 auto;
line-height: normal;
}
.one P {
font-size:1.5em;
line-height:1.5em;
font-family: 'Open Sans', sans-serif;
}
.sign IMG {
display:block;
width:3.5em;
margin:auto;
}
.sign:before {
/* string */
position: absolute;
content: "";
/* string thickness/color */
border: 2px dotted #444;
/* hide string after connection with sign */
border-bottom: none;
border-left: none;
/* string 'size' (as a -45deg rotated square) */
width: 100px;
height: 100px;
/* string position */
top: -55px;
left: 50%;
margin-left: -50px;
/* string construct */
transform: rotate(-45deg);
/* string curved round nail body (unseen) */
border-radius: 0 5px 0 0;
}
.sign:after {
/* nail */
position: absolute;
content: "";
/* nail head size */
width: 10px;
height: 10px;
/* nail head as a circle */
border-radius: 50%;
/* nail position */
top: -75px;
left: 50%;
margin-left: -4px;
/* nail head default color + gradient (where supported) */
background: #4c4c4c;
background: linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
}
/* sign swinging animation sequence */
#keyframes swing {
0% { transform: rotate(-3deg) }
100% { transform: rotate(3deg) }
}
<div class="sign one">
<p>start my<br>order</p>
</div>

The root cause is z-index: -10 on .sign which moves all the thing to background. And lack of z-index on a which makes it hidden behind absolutely positioned elements.
See the updated snippet:
.sign a {
text-decoration: none;
cursor: pointer;
position:relative; z-index:1;
}
.sign a:hover {
color:aqua;
}
.sign {
position: relative;
vertical-align: top;
margin: 0 auto;
/* z-index: -10; */
margin-top: 70px;
display: inline-block;
/* sign width */
width: 150px;
/* Give it a white border */
border: 5px solid #fff;
/* pad content text away from the edges of the sign */
padding: 1em 1em .75em;
/* give it a drop shadow and inset shadow at the top */
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 5px 10px rgba(0, 0, 0, 0.4);
/* setup a default background red and a red gradient where supported */
background-color: #a1cdad;
//background: linear-gradient(top, #ff9696 0%, #c80000 100%);
/* attempt to get rid of jaggies when rotated */
transform-style: preserve-3d;
backface-visibility: hidden;
/* nice rounded corners */
border-radius: 15px;
/* set the swing origin (nail body) */
transform-origin: 50% -65px;
/* animate the swing with pendulum-style easing */
animation: swing 1.5s infinite alternate ease-in-out;
}
.sign:hover {
/* Hover over the sign to stop the animation */
animation-play-state: paused;
}
.sign p {
/* Typography */
/* let's have uppercase.. */
text-transform: uppercase;
/* bold... */
font-weight: bold;
/* white... */
color: #fff;
/* centered text */
text-align: center;
/* text-shadow: 0 0 2px rgba(0,0,0,1);*/
margin: 0 auto;
line-height: normal;
}
.one P {
font-size:1.5em;
line-height:1.5em;
font-family: 'Open Sans', sans-serif;
}
.sign IMG {
display:block;
width:3.5em;
margin:auto;
}
.sign:before {
/* string */
position: absolute;
content: "";
/* string thickness/color */
border: 2px dotted #444;
/* hide string after connection with sign */
border-bottom: none;
border-left: none;
/* string 'size' (as a -45deg rotated square) */
width: 100px;
height: 100px;
/* string position */
top: -55px;
left: 50%;
margin-left: -50px;
/* string construct */
transform: rotate(-45deg);
/* string curved round nail body (unseen) */
border-radius: 0 5px 0 0;
}
.sign:after {
/* nail */
position: absolute;
content: "";
/* nail head size */
width: 10px;
height: 10px;
/* nail head as a circle */
border-radius: 50%;
/* nail position */
top: -75px;
left: 50%;
margin-left: -4px;
/* nail head default color + gradient (where supported) */
background: #4c4c4c;
background: linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
}
/* sign swinging animation sequence */
#keyframes swing {
0% { transform: rotate(-3deg) }
100% { transform: rotate(3deg) }
}
<div class="sign one">
<p>start my<br>order</p>
</div>

CSS Submit Button with Loading Animation has a hover effect division

I have a button with a loading animation inside and when I hover it I want to display a gradient effect as a whole thing.
I manage to do it but if you move the cursor over the loading effect and the text you will notice the division between these two.
Please take a look at the following snippet which shows my problem:
document.getElementById("search").onclick = function() {
var hiddeninputs = document.getElementById("loading");
hiddeninputs.style.display = "inline-flex";
$("#loading").delay(1500).fadeOut();
}
.hidden {
display: none;
}
#loading {
width: 10px;
height: 10px;
border: 5px solid #ccc;
border-top-color: #004E98;
border-radius: 100%;
animation: round 2s linear infinite;
}
#keyframes round {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
.btn-search {
width: 20%;
display: inline-block;
text-align: center;
margin: 10px;
height: 12%;
margin-top: 25px;
box-sizing: border-box;
border: 2px solid #00386d;
border-radius: 5px;
ext-align: center;
background-color: #004E98;
color: #fff;
text-decoration: none;
font-size: 17px;
box-shadow: 0px 5px 20px rgba(25, 25, 25, .3);
}
#button-search:hover {
cursor: pointer;
background: #004E98;
background-image: -webkit-linear-gradient(top, #004E98, #3498db);
background-image: -moz-linear-gradient(top, #004E98, #3498db);
background-image: -ms-linear-gradient(top, #004E98, #3498db);
background-image: -o-linear-gradient(top, #004E98, #3498db);
background-image: linear-gradient(to bottom, #004E98, #3498db);
}
#button-search:active {
background-color: #003465;
transform: translateY(1px);
}
#search {
display: inline-block;
text-align: center;
padding: 10px;
padding-left: 25px;
padding-right: 25px;
background-repeat: no-repeat;
background-position: center;
border: hidden;
background-color: #004E98;
color: #fff;
}
#search:hover {
cursor: pointer;
background: #004E98;
background-image: -webkit-linear-gradient(top, #004E98, #3498db);
background-image: -moz-linear-gradient(top, #004E98, #3498db);
background-image: -ms-linear-gradient(top, #004E98, #3498db);
background-image: -o-linear-gradient(top, #004E98, #3498db);
background-image: linear-gradient(to bottom, #004E98, #3498db);
}
#search:active {
background-color: #003465;
transform: translateY(1px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-search" id="button-search">
<input type="submit" id="search" value="Buscar" onclick="showHide()">
<div id="loading" class="hidden"></div>
</div>

You had another background on the input element #search and that created another background on top of the background of the div .btn-search. I made them transparent and removed the outline that appears around the input on :active and :focus.
document.getElementById("search").onclick = function() {
var hiddeninputs = document.getElementById("loading");
hiddeninputs.style.display="inline-flex";
$("#loading").delay(1500).fadeOut();
}
.hidden{
display: none;
}
#loading{
width: 10px;
height: 10px;
border: 5px solid #ccc;
border-top-color: #004E98;
border-radius: 100%;
animation: round 2s linear infinite;
}
#keyframes round{
from{transform: rotate(0deg)}
to{transform:rotate(360deg)}
}
.btn-search{
width:20%;
display:inline-block;
text-align: center;
margin:10px;
height: 12%;
margin-top:25px;
box-sizing: border-box;
border: 2px solid #00386d;
border-radius: 5px;
ext-align: center;
background-color: #004E98;
color: #fff;
text-decoration: none;
font-size: 17px;
box-shadow: 0px 5px 20px rgba(25,25,25,.3);
}
#button-search:hover{
cursor: pointer;
background: #004E98;
background-image: -webkit-linear-gradient(top, #004E98, #3498db);
background-image: -moz-linear-gradient(top, #004E98, #3498db);
background-image: -ms-linear-gradient(top, #004E98, #3498db);
background-image: -o-linear-gradient(top, #004E98, #3498db);
background-image: linear-gradient(to bottom, #004E98, #3498db);
}
#button-search:active{
background-color: #003465;
transform: translateY(1px);
}
#search{
display: inline-block;
text-align: center;
padding:10px;
padding-left:25px;
padding-right:25px;
background-repeat: no-repeat;
background-position: center;
border: hidden;
background-color: transparent;
color: #fff;
}
#search:hover{
cursor: pointer;
background: transparent;
}
#search:active{
background-color: transparent;
transform: translateY(1px);
}
#search:focus {
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-search" id="button-search">
<input type="submit" id="search" value="Buscar" onclick="showHide()">
<div id="loading" class="hidden"></div>
</div>

You could add a transparent background to the input using background-color: rgba(0, 0, 0, 0);
<!DOCTYPE html>
<html lang="es">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>CSS LOADING SPINNERS</title>
<link rel = "stylesheet" type="text/css" href="style.css">
</head>
<body>
<style>
.hidden{
display: none;
}
#loading{
width: 10px;
height: 10px;
border: 5px solid #ccc;
border-top-color: #004E98;
border-radius: 100%;
animation: round 2s linear infinite;
}
#keyframes round{
from{transform: rotate(0deg)}
to{transform:rotate(360deg)}
}
.btn-search{
width:20%;
display:inline-block;
text-align: center;
margin:10px;
height: 12%;
margin-top:25px;
box-sizing: border-box;
border: 2px solid #00386d;
border-radius: 5px;
ext-align: center;
background-color: #004E98;
color: #fff;
text-decoration: none;
font-size: 17px;
box-shadow: 0px 5px 20px rgba(25,25,25,.3);
}
#button-search:hover{
cursor: pointer;
background: #004E98;
background-image: -webkit-linear-gradient(top, #004E98, #3498db);
background-image: -moz-linear-gradient(top, #004E98, #3498db);
background-image: -ms-linear-gradient(top, #004E98, #3498db);
background-image: -o-linear-gradient(top, #004E98, #3498db);
background-image: linear-gradient(to bottom, #004E98, #3498db);
}
#button-search:active{
background-color: #003465;
transform: translateY(1px);
}
#search{
display: inline-block;
text-align: center;
padding:10px;
padding-left:25px;
padding-right:25px;
background-repeat: no-repeat;
background-position: center;
border: hidden;
background-color: rgba(0,0,0,0);
color: #fff;
}
/* #search:hover{
cursor: pointer;
background: #004E98;
background-image: -webkit-linear-gradient(top, #004E98, #3498db);
background-image: -moz-linear-gradient(top, #004E98, #3498db);
background-image: -ms-linear-gradient(top, #004E98, #3498db);
background-image: -o-linear-gradient(top, #004E98, #3498db);
background-image: linear-gradient(to bottom, #004E98, #3498db);
} */
#search:active{
background-color: #003465;
transform: translateY(1px);
}
</style>
<div class="btn-search" id="button-search">
<input type="submit" id="search" value="Buscar" onclick="showHide()">
<div id= "loading" class="hidden"></div>
</div>
<script type="text/javascript">
document.getElementById("search").onclick = function() {
var hiddeninputs = document.getElementById("loading");
hiddeninputs.style.display="inline-flex";
$("#loading").delay(1500).fadeOut();
}
</script>
</body>
</html>

Submenu pop out from div wih overflow set to hidden

I need to create horizontal menu with sliding option and submenu. Because of sliding option I have to set overflow on hidden, but than I have problem with submenu. I would appreciate any help or idea how to solve this problem.
.horizontalni {
border:solid 1px rgba(0,0,0,0.3);
border-radius:4px;
box-shadow:0 0 0 4px rgba(125,125,125,0.1);
padding:0;
position:relative;
width:auto;
max-width:800px;
background:silver;
overflow:hidden;
}
/* navigation items */
.horizontalni .navigation {
background:rgba(0,0,0,0.1);
color:rgba(255,255,255,0.1);
display:block;
font-family:verdana,sans-serif;
font-size:3em;
height:55px;
padding-top:0px;
position:absolute;
text-align:center;
text-shadow:rgba(0,0,0,0.1); 0 0 2px;
width:50px;
-moz-transition:all 0.4s;
-ms-transition:all 0.4s;
-webkit-transition:all 0.4s;
-o-transition:all 0.4s;
transition:all 0.4s;
}
.horizontalni:hover .navigation {
background:rgba(0,0,0,0.3);
color:rgba(255,255,255,0.8);
text-shadow:rgba(0,0,0,0.7); 0 0 2px;
}
.horizontalni .navigation:hover {
background:rgba(0,0,0,0.5);
}
.horizontalni .previous {
left:0;
}
.horizontalni .next {
right:0;
}
/* carousel container */
.horizontalni ul {
-moz-box-orient:horizontal;
-ms-box-orient:horizontal;
-webkit-box-orient:horizontal;
-o-box-orient:horizontal;
box-orient:horizontal;
display:-moz-box;
display:-ms-box;
display:-webkit-box;
display:-o-box;
display:box;
list-style-type:none;
margin-top:5px;
margin-bottom:5px;
padding:0;
}
/* standard width and height for the carousel items */
.horizontalni li {
border:solid 1px #333;
height:40px;
margin-right:10px;
width:auto;
min-width:150px;
max-width:300px;
}
/* animation properties for the carousel */
.animate ul {
-moz-transition:margin 1s;
-ms-transition:margin 1s;
-webkit-transition:margin 1s;
-o-transition:margin 1s;
transition:margin 1s;
}
/* different color for each of our items */
.horizontalni li {
box-shadow: inset 0 0 0 1px #8a8a8a;
-moz-box-shadow: inset 0 0 0 1px #8a8a8a;
-webkit-box-shadow: inset 0 0 0 1px #8a8a8a;
background: #4a4a4a url(images/grad_dark.png) repeat-x left top;
background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a8a8a), color-stop(50%, #707070), color-stop(51%, #626262), color-stop(100%, #787878));
background: -webkit-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -o-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -ms-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: linear-gradient(to bottom, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
text-align: center;
}
.horizontalni a {
color: #ffffff;
display: inline-block;
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
min-width: 35px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #333333;
}
.horizontalni > ul > li a {
padding-left:10px;
padding-right:10px;
line-height: 40px;
filter: none;
}
.horizontalni > ul > li:hover {
background: #8a8a8a url(images/grad_dark.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(50%, #4a4a4a), color-stop(51%, #3b3b3b), color-stop(100%, #525252));
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
filter: none;
}
.horizontalni .has-sub:hover ul {
display: block;
z-index:1;
}
.horizontalni .has-sub ul {
display: none;
min-width: 100%;
text-align: center;
IE7
*width: 100%;
}
.horizontalni .has-sub ul li {
text-align: center;
}
.horizontalni .has-sub ul li a {
border-top: 0 none;
border-left: 1px solid #5d5d5d;
display: block;
line-height: 120%;
padding: 9px 5px;
text-align: center;
z-index:1;
}
<div id="carousel" class="horizontalni wrapper">
«
»
<ul>
<li >Test1</li>
<li ><a>Test2</a></li>
<li><a>Test3</a></li>
<li ><a>Test4</a></li>
<li ><a>Test5</a></li>
<li class="has-sub parent"><a>Test6</a>
<div class="wrapper">
<ul class="sub">
<li><a>Test61</a></li>
<li><a>Test62</a></li>
<li><a>Test63</a></li>
</ul>
</div>
</li>
<li class="child-element"><a>Test7</a></li>
<li class="child-element"><a>Test8</a></li>
<li class="child-element"><a>Test9</a></li>
</ul>
</div>
<script src="http://www.andismith.com/flexbox-carousel/library/js/modernizr.js"></script>
<script src="http://www.andismith.com/flexbox-carousel/library/js/common.js"></script>
Here is demo of this code: sliding menu demo

Setting the submenu to a fixed position should work.
.has-sub.parent .wrapper {
position: fixed;
}
Here is the JSFiddle

Border Radius changes when setting CSS width using Jquery

The problem I'm having is that the border-radius of a <div/> gets removed when applying the css width property via jQuery. The <div/> that has the radius is also cropping off an absolute positioned <div/>. I've included an example below:
http://jsfiddle.net/SLvBZ/2/
Here is a similar example where it works for Twitter (log in first):
https://twitter.com/welcome/recommendations
Browser version: Chrome 26.0.1410.65
#SuggestProgressContainer {
height: 27px;
float: left;
margin: 4px 20px 0 0;
position: relative; top: 0; left: 0;
width: 247px;
overflow: hidden;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#SuggestProgressBar {
width: 247px;
height: 27px;
background: #c6c6c6;
border: 1px solid #bfbfbf;
position: absolute; top: 0; left: 0;
}
#SuggestProgress {
height: 100%;
width: 50px;
position: absolute; top: 0; left: 0;
border: 1px solid #068CE1;
background: #0F93E7;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1c9dee), to(#068ce1));
background: -webkit-linear-gradient(top, #1c9dee, #068ce1);
background: -moz-linear-gradient(top, #1c9dee, #068ce1);
background: -ms-linear-gradient(top, #1c9dee, #068ce1);
background: -o-linear-gradient(top, #1c9dee, #068ce1);
-webkit-transition: width 230ms ease-out;
-moz-transition: width 230ms ease-out;
-ms-transition: width 230ms ease-out;
-o-transition: width 230ms ease-out;
transition: width 230ms ease-out;
}
#ProgressText {
position: absolute;
top: 5px;
left: 10px;
font-size: 11px;
font-weight: 700;
color: #fff;
text-shadow: 0 -1px rgba(0,0,0, .15);
}

There is a bug in webkit (or at least Chrome) with the combination of border-radius, overflow: hidden and position other than static. Your example link on twitter uses static position. So I'd say your only option is to use position: static. I modified your code to do so:
<div id="SuggestComplete">
<div id="SuggestProgressContainer">
<div id="SuggestProgressBar">
<div id="SuggestProgress"></div>
</div>
<span id="ProgressText">Follow 5 collections</span>
</div>
</div>
<div id="button">test</div>
CSS:
#SuggestProgressContainer {
height: 27px;
float: left;
margin: 4px 20px 0 0;
position: relative; top: 0; left: 0;
width: 247px;
/*overflow: hidden;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;*/ /* removed here */
}
#SuggestProgressBar {
width: 247px;
height: 27px;
background: #c6c6c6;
border: 1px solid #bfbfbf;
position: absolute; top: 0; left: 0;
/* added overflow and border radius here */
overflow: hidden;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#SuggestProgress {
height: 100%;
width: 50px;
/*position: absolute; top: 0; left: 0;*/ /* so it is static to prevent the bug */
border: 1px solid #068CE1;
background: #0F93E7;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1c9dee), to(#068ce1));
background: -webkit-linear-gradient(top, #1c9dee, #068ce1);
background: -moz-linear-gradient(top, #1c9dee, #068ce1);
background: -ms-linear-gradient(top, #1c9dee, #068ce1);
background: -o-linear-gradient(top, #1c9dee, #068ce1);
-webkit-transition: width 230ms ease-out;
-moz-transition: width 230ms ease-out;
-ms-transition: width 230ms ease-out;
-o-transition: width 230ms ease-out;
transition: width 230ms ease-out;
}
Which seems to work. Here is a demo.
The funny part is that the issue described in the bug report seems to be fixed because back then the problem occurred even without programmatically changing the width. But it looks like they forgot to solve the issue on rerender events too.