...

View Full Version : hover over gap between li and ul



timgolding
11-25-2011, 01:54 PM
Working on a css3 drop down menu. It's doing my head right in. I'm 90% there but one thing i cant figure out. When i hover over a link the menu appears but since there is a gap between the li and the next ul when i hover over this gap the drop down disappears. Is there anyway to make it stay even of hovering over the gap.



<!DOCTYPE HTML>
<html>
<head>
<title>Cool Navigation</title>
</head>
<style type="text/css">

ul#horizontal_nav
{
line-height:100%;
width:400px;
height:45px;
padding: 7px 6px 0;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-o-border-radius: 2em;
-ie-border-radius: 2em;
border:1px solid silver;
background-image: linear-gradient(top, #A7A7A7, #868686);
background-image: -o-linear-gradient(top, #A7A7A7, #868686);
background-image: -webkit-linear-gradient(top, #A7A7A7, #868686);
background-image: -moz-linear-gradient(top, #A7A7A7, #868686);
background-image: -ie-linear-gradient(top, #A7A7A7, #868686);
-moz-box-shadow:3px 3px 3px #666;
-webkit-box-shadow:3px 3px 3px #666;
-ms-box-shadow:3px 3px 3px #666;
-o-box-shadow:3px 3px 3px #666;
box-shadow:3px 3px 3px #666;
filter:progid:DXImageTransform.Microsoft.DropShadow(color='#666666',offX='3',offY='3');
-ms-filter: "progid:DXImageTransform.Microsoft.DropShadow(color='#666666',offX='3',offY='3')";
}


ul#horizontal_nav li
{
margin: 0 5px;
padding: 8px;
float: left;
position: relative;
list-style: none;
border-radius: 1.6em;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
-o-border-radius: 1.6em;
-ie-border-radius: 1.6em;
-moz-box-shadow:3px 3px 3px #666;
-webkit-box-shadow:3px 3px 3px #666;
-ms-box-shadow:3px 3px 3px #666;
-o-box-shadow:3px 3px 3px #666;
box-shadow:3px 3px 3px #666;
background-image: linear-gradient(top, rgb(255,255,255) 29%, rgb(225,225,225) 50%, rgb(210,210,225) 51%, rgb(200,200,225) 100%);
background-image: -o-linear-gradient(top, rgb(255,255,255) 29%, rgb(225,225,225) 50%, rgb(210,210,225) 51%, rgb(200,200,225) 100%);
background-image: -moz-linear-gradient(top, rgb(255,255,255) 29%, rgb(225,225,225) 50%, rgb(210,210,225) 51%, rgb(200,200,225) 98%, rgb(255,255,255) 100%);
background-image: -webkit-linear-gradient(top, rgb(255,255,255) 29%, rgb(225,225,225) 50%, rgb(210,210,225) 51%, rgb(200,200,225) 100%);
background-image: -ms-linear-gradient(top, rgb(255,255,255) 29%, rgb(225,225,225) 50%, rgb(210,210,225) 51%, rgb(200,200,225) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#C8C8E1'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#C8C8E1')"; /* IE8+ */
border:1px solid silver;
}

ul#horizontal_nav a
{
font-weight: bold;
color: gold;
text-decoration: none;
text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
-moz-text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
-ms-text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
-o-text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
}
ul#horizontal_nav ul
{
display:none;
position: absolute;
top: 40px;
width: 145px;
left: 0;
background-image: linear-gradient(top, rgb(255,255,255) 29%, rgb(225,225,225) 50%, rgb(210,210,225) 51%, rgb(200,200,225) 100%);
background-image: -o-linear-gradient(top, rgb(255,255,255) 29%, rgb(225,225,225) 50%, rgb(210,210,225) 51%, rgb(200,200,225) 100%);
background-image: -moz-linear-gradient(top, rgb(255,255,255) 29%, rgb(225,225,225) 50%, rgb(210,210,225) 51%, rgb(200,200,225) 98%, rgb(255,255,255) 100%);
background-image: -webkit-linear-gradient(top, rgb(255,255,255) 29%, rgb(225,225,225) 50%, rgb(210,210,225) 51%, rgb(200,200,225) 100%);
background-image: -ms-linear-gradient(top, rgb(255,255,255) 29%, rgb(225,225,225) 50%, rgb(210,210,225) 51%, rgb(200,200,225) 100%);

border-radius: 1.6em;
-webkit-border-radius: .25em;
-moz-border-radius: .25em;
-o-border-radius: .25em;
-ie-border-radius: .25em;
-moz-box-shadow:3px 3px 3px #666;
-webkit-box-shadow:3px 3px 3px #666;
-ms-box-shadow:3px 3px 3px #666;
-o-box-shadow:3px 3px 3px #666;
box-shadow:3px 3px 3px #666;
}

ul#horizontal_nav ul li
{
background-image:none;
border:none;
position:relative;
left:-25px;
border-bottom:1px solid silver;
-moz-box-shadow:none;
-webkit-box-shadow:none;
-ms-box-shadow:none;
-o-box-shadow:none;
box-shadow:none;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
-ie-border-radius: 0;
padding-left:0;
margin-left:0;
float:none;
}

ul#horizontal_nav ul li:hover
{
-moz-box-shadow:none;
-webkit-box-shadow:none;
-ms-box-shadow:none;
-o-box-shadow:none;
box-shadow:none;
}

ul#horizontal_nav li:hover
{
-moz-box-shadow:1px 1px 1px #666;
-webkit-box-shadow:1px 1px 1px #666;
-ms-box-shadow:1px 1px 1px #666;
-o-box-shadow:1px 1px 1px #666;
box-shadow:1px 1px 1px #666;
}

ul#horizontal_nav li:hover > a
{
text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;
-moz-text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;
-ms-text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;
-o-text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;
}


ul#horizontal_nav li:hover > ul {
display: block;
animation:fancyanimation 2s 1;
animation-fill-mode:forwards;
-moz-animation: fancyanimation 2s 1;
-moz-animation-fill-mode:forwards;
-webkit-animation: fancyanimation 2s 1;
-webkit-animation-fill-mode:forwards;
-o-animation: fancyanimation 2s 1;
-o-animation-fill-mode:forwards;
-ms-animation: fancyanimation 2s 1;
-ms-animation-fill-mode:forwards;
}

@keyframes fancyanimation {
0% {
-moz-transform:scale(1,0);
opacity:0;
}
45% {
-moz-transform:scale(1,0);
opacity:0;
}
55% {
-moz-transform:scale(1,1);
opacity:1;

}
100% {
-moz-transform:scale(1,1);
opacity:1;

}
}

@-webkit-keyframes fancyanimation {
0% {
-moz-transform:scale(1,0);
opacity:0;
top:0;
}
45% {
-moz-transform:scale(1,0.5);
opacity:0.5;
top:0;
}
55% {
-moz-transform:scale(1,1);
opacity:1;
top:40px;

}
100% {
-moz-transform:scale(1,1);
opacity:1;
top:40px;

}
}

@-moz-keyframes fancyanimation {
0% {
-moz-transform:scale(1,0);
opacity:0;
top:0;
}
45% {
-moz-transform:scale(1,0);
opacity:0;
top:0;
}
55% {
-moz-transform:scale(1,1);
opacity:1;
top:40px;
}
100% {
-moz-transform:scale(1,1);
opacity:1;
top:40px;

}
}

@-o-keyframes fancyanimation {
0% {
-moz-transform:scale(1,0);
opacity:0;
top:0;
}
45% {
-moz-transform:scale(1,0.5);
opacity:0.5;
top:0;
}
55% {
-moz-transform:scale(1,1);
opacity:1;
top:35px;

}
100% {
-moz-transform:scale(1,1);
opacity:1;
top:35px;

}
}

@-ie-keyframes fancyanimation {
0% {
-moz-transform:scale(1,0);
opacity:0;
top:0;
}
45% {
-moz-transform:scale(1,0.5);
opacity:0.5;
top:0;
}
55% {
-moz-transform:scale(1,1);
opacity:1;
top:35px;

}
100% {
-moz-transform:scale(1,1);
opacity:1;
top:35px;

}
}

html[xmlns] #horizontal_nav {
display: block;
}

* html #horizontal_nav {
height: 1%;
}

</style>
<body>
<ul id="horizontal_nav">
<li><a href="#">Cars</a>
<ul>
<li><a href="#">Ferrari</a></li>
<li><a href="#">Lotus</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">Aston Martin</a></li>
</ul>
</li>
<li><a href="#">Footballers</a>
<ul>
<li><a href="#">Gazza</a></li>
<li><a href="#">Zidane</a></li>
<li><a href="#">Le Tizzier</a></li>
<li><a href="#">Messi</a></li>
</ul>
</li>
<li><a href="#">Destinations</a>
<ul>
<li><a href="#">Crete</a></li>
<li><a href="#">Majorca</a></li>
<li><a href="#">Malta</a></li>
<li><a href="#">Cyprus</a></li>
</ul>
</li>
<li><a href="#">Elements</a>
<ul>
<li><a href="#">Earth</a></li>
<li><a href="#">Fire</a></li>
<li><a href="#">Wind</a></li>
<li><a href="#">Water</a></li>
<li><a href="#">Sky</a></li>
</ul>
</li>
</ul>
</body>
</html>


I'm testing on firefox. Probably wont work on IE at all at the moment.

timgolding
11-25-2011, 03:34 PM
I guess the answere is to style ul#horizontal_nav a as a button instead of ul#horizontal_nav li then i can increase the height of the li? I will give this brain wave a try

timgolding
11-25-2011, 03:59 PM
That worked
heres the change:



<!DOCTYPE HTML>
<html>
<head>
<title>Cool Navigation</title>
</head>
<style type="text/css">

ul#horizontal_nav
{
line-height:100%;
width:400px;
height:45px;
padding: 7px 6px 0;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-o-border-radius: 2em;
-ie-border-radius: 2em;
border:1px solid silver;
background-image: linear-gradient(top, #A7A7A7, #868686);
background-image: -o-linear-gradient(top, #A7A7A7, #868686);
background-image: -webkit-linear-gradient(top, #A7A7A7, #868686);
background-image: -moz-linear-gradient(top, #A7A7A7, #868686);
background-image: -ie-linear-gradient(top, #A7A7A7, #868686);
-moz-box-shadow:3px 3px 3px #666;
-webkit-box-shadow:3px 3px 3px #666;
-ms-box-shadow:3px 3px 3px #666;
-o-box-shadow:3px 3px 3px #666;
box-shadow:3px 3px 3px #666;
filter:progid:DXImageTransform.Microsoft.DropShadow(color='#666666',offX='3',offY='3');
-ms-filter: "progid:DXImageTransform.Microsoft.DropShadow(color='#666666',offX='3',offY='3')";
}


ul#horizontal_nav li
{
margin: 0;
padding: 8px;
float: left;
position: relative;
list-style: none;

}

ul#horizontal_nav a
{
font-weight: bold;
color: gold;
text-decoration: none;
padding-top:7px;
padding-bottom:7px;
padding-left:6px;
padding-right:6px;
text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
-moz-text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
-ms-text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
-o-text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
border-radius: 1.6em;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
-o-border-radius: 1.6em;
-ie-border-radius: 1.6em;
-moz-box-shadow:3px 3px 3px #666;
-webkit-box-shadow:3px 3px 3px #666;
-ms-box-shadow:3px 3px 3px #666;
-o-box-shadow:3px 3px 3px #666;
box-shadow:3px 3px 3px #666;
background-image: linear-gradient(top, rgb(255,255,255) 29%, rgb(225,225,225) 50%, rgb(210,210,225) 51%, rgb(200,200,225) 100%);
background-image: -o-linear-gradient(top, rgb(255,255,255) 29%, rgb(225,225,225) 50%, rgb(210,210,225) 51%, rgb(200,200,225) 100%);
background-image: -moz-linear-gradient(top, rgb(255,255,255) 29%, rgb(225,225,225) 50%, rgb(210,210,225) 51%, rgb(200,200,225) 98%, rgb(255,255,255) 100%);
background-image: -webkit-linear-gradient(top, rgb(255,255,255) 29%, rgb(225,225,225) 50%, rgb(210,210,225) 51%, rgb(200,200,225) 100%);
background-image: -ms-linear-gradient(top, rgb(255,255,255) 29%, rgb(225,225,225) 50%, rgb(210,210,225) 51%, rgb(200,200,225) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#C8C8E1'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#C8C8E1')"; /* IE8+ */
border:1px solid silver;
}
ul#horizontal_nav ul
{
display:none;
position: absolute;
top: 40px;
width: 145px;
left: 0;
background-image: linear-gradient(top, rgb(255,255,255) 29%, rgb(225,225,225) 50%, rgb(210,210,225) 51%, rgb(200,200,225) 100%);
background-image: -o-linear-gradient(top, rgb(255,255,255) 29%, rgb(225,225,225) 50%, rgb(210,210,225) 51%, rgb(200,200,225) 100%);
background-image: -moz-linear-gradient(top, rgb(255,255,255) 29%, rgb(225,225,225) 50%, rgb(210,210,225) 51%, rgb(200,200,225) 98%, rgb(255,255,255) 100%);
background-image: -webkit-linear-gradient(top, rgb(255,255,255) 29%, rgb(225,225,225) 50%, rgb(210,210,225) 51%, rgb(200,200,225) 100%);
background-image: -ms-linear-gradient(top, rgb(255,255,255) 29%, rgb(225,225,225) 50%, rgb(210,210,225) 51%, rgb(200,200,225) 100%);

border-radius: 1.6em;
-webkit-border-radius: .25em;
-moz-border-radius: .25em;
-o-border-radius: .25em;
-ie-border-radius: .25em;
-moz-box-shadow:3px 3px 3px #666;
-webkit-box-shadow:3px 3px 3px #666;
-ms-box-shadow:3px 3px 3px #666;
-o-box-shadow:3px 3px 3px #666;
box-shadow:3px 3px 3px #666;
}

ul#horizontal_nav ul li
{
display:block;
width:145px;
line-height:100%;
padding:0;
}

ul#horizontal_nav ul li:hover
{
height:auto;
}

ul#horizontal_nav ul li a
{
display:block;
background-image:none;
border:none;
position:relative;
left:-25px;
border-bottom:1px solid silver;
-moz-box-shadow:none;
-webkit-box-shadow:none;
-ms-box-shadow:none;
-o-box-shadow:none;
box-shadow:none;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
-ie-border-radius: 0;
padding-left:0;
margin-left:0;
float:none;
}

ul#horizontal_nav ul li a:hover
{
-moz-box-shadow:none;
-webkit-box-shadow:none;
-ms-box-shadow:none;
-o-box-shadow:none;
box-shadow:none;
}

ul#horizontal_nav a:hover
{
-moz-box-shadow:1px 1px 1px #666;
-webkit-box-shadow:1px 1px 1px #666;
-ms-box-shadow:1px 1px 1px #666;
-o-box-shadow:1px 1px 1px #666;
box-shadow:1px 1px 1px #666;
}

ul#horizontal_nav li:hover
{
height:100px;
}

ul#horizontal_nav li:hover > a
{
text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;
-moz-text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;
-ms-text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;
-o-text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;
}


ul#horizontal_nav li:hover > ul {
display: block;
animation:fancyanimation 2s 1;
animation-fill-mode:forwards;
-moz-animation: fancyanimation 2s 1;
-moz-animation-fill-mode:forwards;
-webkit-animation: fancyanimation 2s 1;
-webkit-animation-fill-mode:forwards;
-o-animation: fancyanimation 2s 1;
-o-animation-fill-mode:forwards;
-ms-animation: fancyanimation 2s 1;
-ms-animation-fill-mode:forwards;
}

@keyframes fancyanimation {
0% {
-moz-transform:scale(1,0);
opacity:0;
}
45% {
-moz-transform:scale(1,0);
opacity:0;
}
55% {
-moz-transform:scale(1,1);
opacity:1;

}
100% {
-moz-transform:scale(1,1);
opacity:1;

}
}

@-webkit-keyframes fancyanimation {
0% {
-moz-transform:scale(1,0);
opacity:0;
top:0;
}
45% {
-moz-transform:scale(1,0);
opacity:0.5;
top:0;
}
55% {
-moz-transform:scale(1,1);
opacity:1;
top:40px;

}
100% {
-moz-transform:scale(1,1);
opacity:1;
top:40px;

}
}

@-moz-keyframes fancyanimation {
0% {
-moz-transform:scale(1,0);
opacity:0;
top:0;
}
45% {
-moz-transform:scale(1,0);
opacity:0;
top:0;
}
55% {
-moz-transform:scale(1,1);
opacity:1;
top:40px;
}
100% {
-moz-transform:scale(1,1);
opacity:1;
top:40px;

}
}

@-o-keyframes fancyanimation {
0% {
-moz-transform:scale(1,0);
opacity:0;
top:0;
}
45% {
-moz-transform:scale(1,0);
opacity:0.5;
top:0;
}
55% {
-moz-transform:scale(1,1);
opacity:1;
top:35px;

}
100% {
-moz-transform:scale(1,1);
opacity:1;
top:35px;

}
}

@-ie-keyframes fancyanimation {
0% {
-moz-transform:scale(1,0);
opacity:0;
top:0;
}
45% {
-moz-transform:scale(1,0);
opacity:0.5;
top:0;
}
55% {
-moz-transform:scale(1,1);
opacity:1;
top:35px;

}
100% {
-moz-transform:scale(1,1);
opacity:1;
top:35px;

}
}

html[xmlns] #horizontal_nav {
display: block;
}

* html #horizontal_nav {
height: 1%;
}

</style>
<body>
<ul id="horizontal_nav">
<li><a href="#">Cars</a>
<ul>
<li><a href="#">Ferrari</a></li>
<li><a href="#">Lotus</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">Aston Martin</a></li>
</ul>
</li>
<li><a href="#">Footballers</a>
<ul>
<li><a href="#">Gazza</a></li>
<li><a href="#">Zidane</a></li>
<li><a href="#">Le Tizzier</a></li>
<li><a href="#">Messi</a></li>
</ul>
</li>
<li><a href="#">Destinations</a>
<ul>
<li><a href="#">Crete</a></li>
<li><a href="#">Majorca</a></li>
<li><a href="#">Malta</a></li>
<li><a href="#">Cyprus</a></li>
</ul>
</li>
<li><a href="#">Elements</a>
<ul>
<li><a href="#">Earth</a></li>
<li><a href="#">Fire</a></li>
<li><a href="#">Wind</a></li>
<li><a href="#">Water</a></li>
<li><a href="#">Sky</a></li>
</ul>
</li>
</ul>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum