Menu
Weird stuff happening here. See this tinkerbin page, if you may: http://tinkerbin.com/UZy6H6q4
Here's the html and css in case you can't see the tinkerbin.
<head>
<style>
ul{
overflow: hidden;
padding:0;
margin:0;
list-style-type:none;
background-color: pink;
}
ul a{
text-decoration: none;
color: white;
}
li{
float: left;
height: 30px;
line-height: 30px;
width: 90px;
margin-right: 5px;
background-color:red;
text-align:center;
-webkit-transition: all .6s linear;
}
#case2 li{
background: none;
}
#case2 li:hover, li:hover{
background-color: lightblue;
}
</style>
</head>
<body>
<!-- CASE #1 -->
<ul id="case1">
<a href=""><li>Home</li></a>
<a href=""><li>Blog</li></a>
<a href=""><li>About</li></a>
<a href=""><li>Contact</li></a>
</ul>
<!-- CASE #2 -->
<ul id="case2">
<a href=""><li>Home</li></a>
<a href=""><li>Blog</li></a>
<a href=""><li>About</li></a>
<a href=""><li>Contact</li></a>
</ul>
</body>
So , the problem:
-the transition doesn't work on CASE #1.
-removing the "background-color" from the li element (as I did on CASE #2) makes it work, but in a weird way - when you take back the cursor from over the li element, before the background color fades back to transparent, it first becomes black.
I've tested doing the usual of having the "a" tag nested inside the li, and not the other way around - works fine, as I, for some reason expected. But since, according to the specs, I can have the "li" wrapped in an "a" tag, then why does it not work. Am I missing something?
Oh, and I'm using Chrome - possibly relevant.
677
putting li inside a is invalid. If you try validating your html then it won't be validated as it doesn't follow the right markup. Anchor tags() are stand-alone tags whereas li's are list tags and they are immediate child elements of ul or ol. Hope this helps. :)
Refer w3schools.com for more info.
53
Put a tag inside li
check this: http://tinkerbin.com/5kMLVVKk
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
