HTML navbar animation doesn't work - html

Hi guys I'm new to programming and I'm trying to build a site. I wanted a nice animation for my nabber and followed this guide (http://tobiasahlin.com/blog/css-trick-animating-link-underlines/),I want an animation in which the text gets underlined when you hover over it, but it doesn't work, why not? Did I write everything properly in the right places etc. and is it right to write you CSS in the head because I saw someone who had a separate file for the CSS code.
<head>
<style>
body{
background-color: rgb(57, 57, 57);
}
header{
background-color: white;
}
header::after{
content: " ";
display: table;
clear: both;
}
.container{
width: 95%;
margin: 0 auto;
}
.logo{
float: left;
width: 250px;
height: auto;
margin-top: 10px;
margin-bottom: 10px;
}
nav{
float: right;
font-family: 'courier';
font-size: 18px;
font-weight: 300;
letter-spacing: 0.5px;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
nav li{
display: inline-block;
margin-left: 45px;
}
nav li a{
display: block;
color: black;
text-decoration: none;
padding: 17px 15px;
}
nav li a:before{
content: '';
position: absolute;
width: 100%;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0,3s ease-in-out 0s;
transition: all 0,3s ease-in-out 0s;
}
nav li a:hover:before{
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
</style>
</head>
<!DOCTYPE html>
<html>
<body>
<header>
<div class="container">
<img class="logo" src="file:///Users/siebe/PROJECTEN/Code/HTML/Site%20DIA/Pics/Logo%20DIA%20site.png">
<nav>
<ul>
<li>PROJECTEN</li>
<li>OVER</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</body>
</html>


Here is your error:
transition: all 0,3s ease-in-out 0s;
You have a comma (,) instead of a period (.)
In future, try this handy CSS validation service, it will point out errors for you!
CSS Validation


3 things.
1. You had an error here:
-webkit-transition: all 0,3s ease-in-out 0s;
transition: all 0,3s ease-in-out 0s;
2. "nav li a" need to have a "relative" position.
3. You did not set a height for "nav li a:before"
This works..
<head>
<style>
body{
background-color: rgb(57, 57, 57);
}
header{
background-color: white;
}
header::after{
content: " ";
display: table;
clear: both;
}
.container{
width: 95%;
margin: 0 auto;
}
.logo{
float: left;
width: 250px;
height: auto;
margin-top: 10px;
margin-bottom: 10px;
}
nav{
float: right;
font-family: 'courier';
font-size: 18px;
font-weight: 300;
letter-spacing: 0.5px;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
nav li{
display: inline-block;
margin-left: 45px;
}
nav li a{
display: block;
color: black;
text-decoration: none;
padding: 17px 15px;
position: relative;
}
nav li a:before{
content: '';
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: black;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav li a:hover:before{
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
</style>
</head>
<!DOCTYPE html>
<html>
<body>
<header>
<div class="container">
<img class="logo" src="file:///Users/siebe/PROJECTEN/Code/HTML/Site%20DIA/Pics/Logo%20DIA%20site.png">
<nav>
<ul>
<li>PROJECTEN</li>
<li>OVER</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</body>
</html>


In your css code try changing nav li a to nav ul li a where ever you have in the style tag. That way your <a> tag can get the proper style.
nav li a would refer to a link in a list item in a navbar
nav ul li a would refer to a link in a list item in a list in a navbar


body{
background-color: rgb(57, 57, 57);
}
header{
background-color: white;
}
header::after{
content: " ";
display: table;
clear: both;
}
.container{
width: 95%;
margin: 0 auto;
}
.logo{
float: left;
width: 250px;
height: auto;
margin-top: 10px;
margin-bottom: 10px;
}
nav{
float: right;
font-family: 'courier';
font-size: 18px;
font-weight: 300;
letter-spacing: 0.5px;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
nav li{
display: inline-block;
margin-left: 45px;
}
nav li a{
display: block;
color: black;
text-decoration: none;
padding: 17px 15px;
}
nav li a:after{
display:block;
content: '';
border-bottom: solid 3px #019fb6;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
nav li a:hover:after{
transform: scaleX(1);
}
<header>
<div class="container">
<img class="logo" src="file:///Users/siebe/PROJECTEN/Code/HTML/Site%20DIA/Pics/Logo%20DIA%20site.png">
<nav>
<ul>
<li>PROJECTEN</li>
<li>OVER</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>
We can achieve by using border-bottom and transform css properties.

Related

Hovering over link not working correctly for first child

So, I want to make just the first element of a nav-bar to change it's background colour when I hover over it, but both the "Home" and "News" button change colour even though i wrote a:first-child:hover. Please help.
<!DOCTYPE html>
<html>
<head>
<style>
html, nav, ul, li, a, span{
font-family: regular;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
.nav, header{
display: block;
}
ol, ul{
list-style: none;
}
a{
text-decoration: none;
}
#header h1 {
left: 1.25em;
margin: 0;
position: absolute;
}
#header {
background: rgba(39, 40, 51, 0.965);
box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.25);
width: 100%;
height: 3.5em;
left: 0;
top: 0;
line-height: 3.5em;
position: fixed;
z-index: 100;
}
#header a, #header a:visited{
color: rgba(224, 224, 224, 0.986);
-o-transition: 0.5s;
-ms-transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
font-size: 125%;
}
#header nav{
position: absolute;
right: 1em;
top: 0;
}
#header nav ul li{
display: inline-block;
margin-left: 1em;
}
#header nav ul li a:first-child:hover{
background-color: red;
}
</style>
</head>
<body>
<header id="header">
<h1 id="logo">Random</h1>
<nav id="nav">
<ul>
<li>Home</li>
<li>News</li>
</ul>
</nav>
</header>
</body>
</html>

The :first-child should be given to the li, not to the a.
Because, there are only single childs of a inside each li, but there are more than one li inside the ul. So the :first-child should be given to the li, and hover to the a
#header h1 {
left: 1.25em;
margin: 0;
position: absolute;
}
#header {
background: rgba(39, 40, 51, 0.965);
box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.25);
width: 100%;
height: 3.5em;
left: 0;
top: 0;
line-height: 3.5em;
position: fixed;
z-index: 100;
}
#header a, #header a:visited{
color: rgba(224, 224, 224, 0.986);
-o-transition: 0.5s;
-ms-transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
font-size: 125%;
}
#header nav{
position: absolute;
right: 1em;
top: 0;
}
#header nav ul li{
display: inline-block;
margin-left: 1em;
}
#header nav ul li:first-child a:hover{
background-color: red;
}
<header id="header">
<h1 id="logo">Random</h1>
<nav id="nav">
<ul>
<li>Home</li>
<li>News</li>
</ul>
</nav>
</header>

Hover on li not on a element .
Try Following
<html>
<head>
<style>
html, nav, ul, li, a, span{
font-family: regular;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
.nav, header{
display: block;
}
ol, ul{
list-style: none;
}
a{
text-decoration: none;
}
#header h1 {
left: 1.25em;
margin: 0;
position: absolute;
}
#header {
background: rgba(39, 40, 51, 0.965);
box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.25);
width: 100%;
height: 3.5em;
left: 0;
top: 0;
line-height: 3.5em;
position: fixed;
z-index: 100;
}
#header a, #header a:visited{
color: rgba(224, 224, 224, 0.986);
-o-transition: 0.5s;
-ms-transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
font-size: 125%;
}
#header nav{
position: absolute;
right: 1em;
top: 0;
}
#header nav ul li{
display: inline-block;
margin-left: 1em;
}
#header nav ul li:first-child:hover a {
background-color: red;
}
</style>
</head>
<body>
<header id="header">
<h1 id="logo">Random</h1>
<nav id="nav">
<ul>
<li>Home</li>
<li>News</li>
</ul>
</nav>
</header>
</body>
</html>

The problem is that 'a' is the first child to both 'li' elements which means you have to use :first-child on the 'li' then use the :hover on the 'a' element.
html, nav, ul, li, a, span{
font-family: regular;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
.nav, header{
display: block;
}
ol, ul{
list-style: none;
}
a{
text-decoration: none;
padding: 2px;
border-radius: 2px;
}
#header h1 {
left: 1.25em;
margin: 0;
position: absolute;
}
#header {
background: rgba(39, 40, 51, 0.965);
box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.25);
width: 100%;
height: 3.5em;
left: 0;
top: 0;
line-height: 3.5em;
position: fixed;
z-index: 100;
}
#header a, #header a:visited{
color: rgba(224, 224, 224, 0.986);
-o-transition: 0.5s;
-ms-transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
font-size: 125%;
}
#header nav{
position: absolute;
right: 1em;
top: 0;
}
#header nav ul li{
display: inline-block;
margin-left: 1em;
}
#header nav ul li:first-child a:hover {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header id="header">
<h1 id="logo">Random</h1>
<nav id="nav">
<ul>
<li>Home</li>
<li>News</li>
</ul>
</nav>
</header>
</body>
</html>

Changing the background color and text color of the navbar for every page in a website

I have created a landing page which has a black background for the navbar and has text in white color but I want to have a white background for the navbar with its text in black for the rest of the pages in a website.
Can anyone suggest how I can change the color for the remaining pages?
I've read that jQuery can help out in such a case but I have no experience with jQuery.
HTML:
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="menu">
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
</header>
</div>
CSS:
nav {
position: fixed;
width: 100%;
line-height: 60px;
animation: left-in 0.5s ease-in forwards;
animation-delay: 0%;
opacity: 0;
}
nav ul {
line-height: 15px;
list-style: none;
background: black;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: white
}
nav ul li {
display: inline-block;
padding: 16px 20px;;
}
nav ul li a {
text-decoration: none;
color: white;
font-size: 16px;
font-family: 'Roboto Slab', serif;
}
a:hover {
color: orange;
}
.menu-icon {
line-height: 30px;
width: 100%;
background: black;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#keyframes fade-in
{
from
{
opacity: 0;
}
to
{
opacity: 1;
}
}
#keyframes left-in
{
from
{
transform: translateX(-200px);
opacity: 0;
}
to
{
transform: translateX(0px);
opacity: 1;
}
}

Yes. You can use the CSS stylesheet that you are using (CSS in the HTML code); and for that specific page (landing page) you only have to inline it in the HTML element and it will override the CSS.
Like this:
CSS code for all pages
.nav {background:white;color:#000000;}
inline CSS code only on the landing page
<nav style="background:black;color:#FFFFFF;">

I for sure don't recommend the previous two answers as it is not preferrable to make two css files, and for sure in the SEO point of view inlining the style is not recommended
I suggest you add a class to the BODY tag that is only added for inside pages change your code to something like this:
<style>
nav {
position: fixed;
width: 100%;
line-height: 60px;
animation: left-in 0.5s ease-in forwards;
animation-delay: 0%;
opacity: 0;
}
nav ul {
line-height: 15px;
list-style: none;
background: black;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
.inside nav ul {
color: #000000;
background: #fff;
}
nav ul li {
display: inline-block;
padding: 16px 20px;;
}
nav ul li a {
text-decoration: none;
color: white;
font-size: 16px;
font-family: 'Roboto Slab', serif;
}
a:hover {
color: orange;
}
.menu-icon {
line-height: 30px;
width: 100%;
background: black;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes left-in {
from {
transform: translateX(-200px);
opacity: 0;
}
to {
transform: translateX(0px);
opacity: 1;
}
}
</style>
<body class="inside"> <!-- or replace it with (home) for your homepage or no class needed for homepage -->
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="menu">
<ul>
<li>About Me</li>
<li>Projects</li>
<li>Publications</li>
</ul>
</div>
</nav>
</header>
</div>
</body>

Add a space between underline and a nav item on hover

I would like the underline effect that appears on hover to have a padding/margin of app. 5px from the text, just to have some space between.
Here's the code and link to Codepen:
http://codepen.io/anon/pen/MbmBjp
Thank you!
* {
background-color: blue;
}
nav ul li {
display: inline-block;
padding-left: 35px;
font-size: 12px;
font-weight: bold;
}
/*Underline animation*/
li > a {
position: relative;
color: white;
text-decoration: none;
}
li > a:hover {
color: yellow;
}
li > a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
background-color: yellow;
visibility: hidden;
transform: scaleX(0);
transition: all 0.1s ease-in-out 0s;
}
li > a:hover:before {
visibility: visible;
transform: scaleX(1);
}
<nav class="menu" id="menu">
<ul>
<li>ABOUT</li>
<li>SERVICE</li>
<li>WORK</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>

Variant #01:
Increase or decrease bottom value in the following selector:
li > a:before {
bottom: -5px; /* Change in this value will increase or decrease gap */
}
* {
background-color: blue;
}
nav ul li {
display: inline-block;
padding-left: 35px;
font-size: 12px;
font-weight: bold;
}
/*Underline animation*/
li > a {
position: relative;
color: white;
text-decoration: none;
}
li > a:hover {
color: yellow;
}
li > a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -5px;
background-color: yellow;
visibility: hidden;
transform: scaleX(0);
transition: all 0.1s ease-in-out 0s;
}
li > a:hover:before {
visibility: visible;
transform: scaleX(1);
}
<nav class="menu" id="menu">
<ul>
<li>ABOUT</li>
<li>SERVICE</li>
<li>WORK</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>
Variant #02:
Set following css on <a>:
li > a {
display: inline-block;
vertical-align: top;
padding-bottom: 5px; /* Change in padding-bottom value will increase or decrease gap */
}
* {
background-color: blue;
}
nav ul li {
display: inline-block;
padding-left: 35px;
font-size: 12px;
font-weight: bold;
}
/*Underline animation*/
li > a {
display: inline-block;
vertical-align: top;
padding-bottom: 5px;
position: relative;
color: white;
text-decoration: none;
}
li > a:hover {
color: yellow;
}
li > a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
background-color: yellow;
visibility: hidden;
transform: scaleX(0);
transition: all 0.1s ease-in-out 0s;
}
li > a:hover:before {
visibility: visible;
transform: scaleX(1);
}
<nav class="menu" id="menu">
<ul>
<li>ABOUT</li>
<li>SERVICE</li>
<li>WORK</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>

http://codepen.io/anon/pen/PbmBpY
li > a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -5px;
background-color: yellow;
visibility: hidden;
transform: scaleX(0);
transition: all 0.1s ease-in-out 0s;
}
add bottom: -5px; to the li > a:before

Here's a codepen that solves it: http://codepen.io/anon/pen/zowLZp
Add a padding-bottom: 4px to the li > a rule, remove the height: 1px from the li > a:beforerule, and add aborder-bottom: 1px solid white` to that same rule.

Add this to your css : li > a:hover
li > a:hover {
color: yellow;
padding-bottom:5px;
}
Check below code snippet.
* {
background-color: blue;
}
nav ul li {
display: inline-block;
padding-left: 35px;
font-size: 12px;
font-weight: bold;
}
/*Underline animation*/
li > a {
position: relative;
color: white;
text-decoration: none;
}
li > a:hover {
color: yellow;
padding-bottom:5px;
}
li > a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
background-color: yellow;
visibility: hidden;
transform: scaleX(0);
transition: all 0.1s ease-in-out 0s;
}
li > a:hover:before {
visibility: visible;
transform: scaleX(1);
}
<nav class="menu" id="menu">
<ul>
<li>ABOUT</li>
<li>SERVICE</li>
<li>WORK</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>

Just change the value of bottom in the li > a:before selector to -5px.
If you do not want to use negative values you can use something like top: 20px and remove bottom: -5px.
* {
background-color: blue;
}
nav ul li {
display: inline-block;
padding-left: 35px;
font-size: 12px;
font-weight: bold;
}
/*Underline animation*/
li > a {
position: relative;
color: white;
text-decoration: none;
}
li > a:hover {
color: yellow;
}
li > a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -5px;
background-color: yellow;
visibility: hidden;
transform: scaleX(0);
transition: all 0.1s ease-in-out 0s;
}
li > a:hover:before {
visibility: visible;
transform: scaleX(1);
}
<nav class="menu" id="menu">
<ul>
<li>ABOUT</li>
<li>SERVICE</li>
<li>WORK</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>

try this
demo
li > a:hover {
color: yellow;
padding:10px 0;
}

add padding-bottom: 5px in below your css..
li > a:hover {
color: yellow;
padding-bottom: 5px;
}

Drop Down Menu is Overlapping my Nav Bar

I'm building a site for a client and I'm having trouble getting the drop down menu to appear clear below the navbar - instead it is overlapping the navbar, and if I increase the top margin of the drop down menu to push it below the navbar there is a gap between the drop down and the parent list item where the hover property to make it appear does not take affect.
I've created a fiddle of the navbar here - http://jsfiddle.net/s4dpby4v/1/
And you can view the live version here - http://japesfawcett.com/ps/index.html
HTML:
<div class="header">
<div class="logo">
<h1>PAM SHAW INTERIORS</h1>
</div>
<nav>
<ul>
<li>ABOUT</li>
<li class="has-drop">
WORK +
<ul class="drop-down">
<li style="padding-bottom: 0;">COMMERCIAL</li>
<li style="padding-right: 80px; padding-bottom: 0;">RESIDENTIAL</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
CSS:
.header {
width: 100%;
background-color: #fff;
margin: 0 auto;
height: 75px;
z-index: 9999;
}
.logo h1 {
float: left;
font-size: 20px;
letter-spacing: 4px;
width: 25%;
padding-top: 10px;
margin-top: 18px;
margin-left: 75px;
font-weight: 300;
}
.logo a {
text-decoration: none;
color: #000;
}
nav {
font-family: 'Lato', sans-serif;
width: 60%;
font-size: 14px;
font-weight: 300;
text-align: right;
letter-spacing: 4px;
float: right;
margin-top: 19px;
margin-right: 75px;
}
nav ul {
float: right;
list-style: none;
padding-top: -5px;
}
nav li {
padding-left: 15px;
padding-right: 10px;
padding-bottom: 15px;
display: inline-block;
}
nav ul li ul.drop-down {
width: 100%;
background: #fff;
display: none;
position: absolute;
z-index: 999;
padding: 5px 0 5px 0;
margin: 15px 0 0 0;
left: 0;
line-height: 2.5;
clear: both;
border-top: 1px solid #F1F1F1;
}
nav li:hover ul.drop-down {
display: block;
}
nav ul li ul.dropdown li {
display: block;
padding: 0;
margin: 0;
}
nav li a {
text-decoration: none;
color: #000;
display: inline-block;
}
nav li a:hover {
text-decoration: none;
color: #CCC;
-webkit-transition: all 800ms ease;
-moz-transition: all 800ms ease;
-ms-transition: all 800ms ease;
-o-transition: all 800ms ease;
transition: all 800ms ease;
}
Any guidance or help would be greatly appreciated!

.has-drop {position: relative;}
nav ul li ul.drop-down {width: auto;}
nav li li {width: 100%; text-align: center; box-sizing: border-box;}
Will clean up you drop down, you just need to remove the inline styles that you have on here to fix up the list styles.:
<li style="padding-bottom: 0;">COMMERCIAL</li>
<li style="padding-right: 80px; padding-bottom: 0;">RESIDENTIAL</li>
Here is my fiddle: http://jsfiddle.net/s4dpby4v/6/

You can check with this css
.has-drop {
padding-bottom: 30px;
}
nav ul li ul.drop-down
{
margin: 27px 0 0;
}

Button in CSS3 not clickable

I want to make some fancy social buttons with Font Awesome, CSS3 and lists in HTML. It should look like this. But now it is not possible to click on the anchor (a-tag).
How can I accomplish this?
ul {
list-style: outside none none;
}
ul li {
display: block;
float: left;
background-color: #099;
margin-right: 10px;
padding: 10px 0px;
text-align: center;
width: 40px;
opacity: 0.2;
transition: all 0.2s ease-in-out 0s;
}
li::before {
color: #FFF;
font-size: 35px;
}
ul li a {
color: transparent;
font: 0px/0 a;
white-space: nowrap;
}
ul li:hover {
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul id="menu-social" class="menu">
<li id="menu-item-googleplus" class="fa fa-google-plus menu-item menu-item-googleplus">
Google+
</li>
<li id="menu-item-facebook" class="fa fa-facebook menu-item menu-item-facebook">
Facebook
</li>
</ul>

Add position relative to the li elements and then stretch the anchor.
ul li {
display: block;
float: left;
background-color: #099;
margin-right: 10px;
padding: 10px 0px;
text-align: center;
width: 40px;
opacity: 0.2;
transition: all 0.2s ease-in-out 0s;
/* Add position */
position:relative;
}
ul li a {
color: transparent;
font: 0px/0 a;
white-space: nowrap;
/* Stretch a element */
position: absolute;
left:0;
top:0;
width:100%;
height: 100%;
}