I wonder why jQuery doesn't allow "+" sign. Here is an example of how it works with "1" and "3" but not with "2+". Just mouse-over the text above every div.
<div id="div-2+"></div>
JSFiddle
$('a.hover').mouseover(function() {
dataI = $(this).data('i');
$('div#div-' + dataI).addClass('h');
});
$('a.hover').mouseout(function() {
dataI = $(this).data('i');
$('div#div-' + dataI).removeClass('h');
});
a {
display: inline-block;
width: 100px;
margin: 60px 20px 60px 0;
text-align: center;
}
div {
display: inline-block;
width: 100px;
height: 100px;
margin-right: 20px;
background-color: #ddd;
}
div.h {
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="hover" data-i="1">DIV 1</a>
<a class="hover" data-i="2+">DIV 2+</a>
<a class="hover" data-i="3">DIV 3</a>
<br />
<div id="div-1"></div>
<div id="div-2+"></div>
<div id="div-3"></div>
Most-likely because the plus sign is the adjacent CSS selector, which causes the Sizzle selector library jQuery uses to assume you mean an adjacent selector.
One way around this would be to use an attribute selector, that selects the id attribute. Although many people would argue putting a plus sign in the id is a bad idea.
Working Example:
$('a.hover').mouseover(function() {
dataI = $(this).data('i');
$('div[id="div-' + dataI + '"]').addClass('h');
});
$('a.hover').mouseout(function() {
dataI = $(this).data('i');
$('div[id="div-' + dataI + '"]').removeClass('h');
});
a {
display: inline-block;
width: 100px;
margin: 60px 20px 60px 0;
text-align: center;
}
div {
display: inline-block;
width: 100px;
height: 100px;
margin-right: 20px;
background-color: #ddd;
}
div.h {
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="hover" data-i="1">DIV 1</a>
<a class="hover" data-i="2+">DIV 2+</a>
<a class="hover" data-i="3">DIV 3</a>
<br />
<div id="div-1"></div>
<div id="div-2+"></div>
<div id="div-3"></div>
Note, "workaround"
Try utilizing css
a {
display: inline-block;
width: 100px;
margin: 60px 20px 60px 0;
text-align: center;
}
div {
display: inline-block;
width: 100px;
height: 100px;
margin-right: 20px;
background-color: #ddd;
}
a.hover[data-i="1"]:hover ~ div[id$="1"],
a.hover[data-i="2+"]:hover ~ div[id$="2+"],
a.hover[data-i="3"]:hover ~ div[id$="3"] {
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<a class="hover" data-i="1">DIV 1</a>
<a class="hover" data-i="2+">DIV 2+</a>
<a class="hover" data-i="3">DIV 3</a>
<br />
<div id="div-1" class="hover"></div>
<div id="div-2+" class="hover"></div>
<div id="div-3" class="hover"></div>
#Alexander O'Mara does a nice job of explaining why it doesn't work and shows a decent work-around.
Another work-around is to escape the plus sign by preceding it with a backslash.
dataI = dataI.replace('+', '\\+');
jsfiddle
From the jQuery documentation for Selectors:
To use any of the meta-characters ( such as
!"#$%&'()*+,./:;<=>?#[]^`{|}~ ) as a literal part of a name, it must
be escaped with with two backslashes: \\. For example, an element with
id="foo.bar", can use the selector $("#foo\\.bar"). The W3C CSS
specification contains the complete set of rules regarding valid CSS
selectors. Also useful is the blog entry by Mathias Bynens on CSS
character escape sequences for identifiers.
Also note that document.querySelector() throws the following error when given the selector #div-2+:
SyntaxError: An invalid or illegal string was specified.
jsfiddle
Related
I am working on my own website and not good with codes yet. When I am scrolling down I want to appear another content of the navbar and when I am on the top, original navbar is appearing. I want this to be done in pure JavaScript with no libraries or framewokrs. Please see codes below and I know that codes are not organised. I will do that later on.
var nav = document.querySelector("nav");
var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear")
window.onscroll = function(){
if(document.body.scrollTop > 70){
hide.style.display = "block";
appear.style.display = "none"
} else {
hide.style.display = "none";
appear.style.display = "block"
}
}
nav{
list-style-type: none;
text-align: center;
background-color: #3FA9A5;
position: sticky;
top: 0;
}
.hide{
font-size: 70px;
font-family: 'Long Cang', cursive;
display: block;
}
.appear{
height: 70px;
display: none;
}
.appear img{
width: 210px;
}
ul{
margin: 0 auto;
padding: 0;
}
body{
margin: 0;
}
.container{
max-width: 1080px;
width: 95%;
margin: 10px auto;
display: grid;
grid-template-columns: 25% 50% 25%;
}
.text{
text-align: center;
}
.profile {
border: 1px solid black;
padding: 0 10px 20px 10px;
}
#main{
width: 100%;
}
.post{
margin-left: 4.165%;
}
#image{
width: 100%;
}
#post-divide{
margin-left: 10px;
margin-right: 10px;
}
.comments{
width: 100%;
margin-top: 68.5px;
padding-bottom: 293.5px;
border: 1px solid black;
}
h2{
text-align: center;
}
.center{
grid-column: 2;
}
<link rel="stylesheet" type="text/css" href="test.css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Long+Cang&display=swap" rel="stylesheet">
<title>test</title>
</head>
<body>
<nav>
<ul>
<li class="hide">Unknown</li>
<li class="appear"><img src="cat.png"></li>
</ul>
</nav>
<div class="container">
<div class="col-1">
<div class="profile text">
<img id="main" src="https://data.whicdn.com/images/86629641/superthumb.jpg?t=1384568664">
<hr>
<p>12 posts</p>
<p>instagram</p>
<button>Subscribe!</button>
</div>
</div>
<div class="col-1">
<div class="post">
<h2>TITLE</h2>
<div>
<img id="image" src="https://i.pinimg.com/originals/76/d4/8c/76d48cb2928845dfcfab697ac7cbcf1c.jpg">
</div>
<hr id="post-divide">
</div>
</div>
<div class="col-1">
<div class="comments text"></div>
</div>
<div class="col-1 center">
<div class="post">
<h2>TITLE</h2>
<div>
<img id="image" src="https://i.pinimg.com/originals/76/d4/8c/76d48cb2928845dfcfab697ac7cbcf1c.jpg">
</div>
<hr id="post-divide">
</div>
</div>
<div class="col-1">
<div class="comments text"></div>
</div>
</div>
I think I should add something to the JS code but don't know why
Would be thankful if you would advise me how could I write HTML/CSS code so I do not have to create 2 navbars if it is possible
The following instruction:
document.querySelector("hide");
Will query for elements like:
<hide></hide>
Since plain selectors without prefix (div, header, span) will query for the whole element tags, not for classes or attrbitues.
Maybe you meant to query for the class, using the .:
document.querySelector(".hide");
var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear")
So you should use class selector
You are using "hide" and "appear" as selectors but they do not exist in your HTML.
Use ".hide" and ".appear" in your querySelector instead.
var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear");
Since both navbars have a static data, I would suggest to keep both of them and follow with answers of guys, that suggested to update querySelector param. Or you can hide/show the data inside of navbar (in your case it's only ul element) and leave the whole navbar always visible. So you can put classes appear/hide on ul element instea of navbar and then in JS get them with document.querySelector('.navbar .hide') and document.querySelector('.navbar .appear').
Using framework/library will definitely simplify it.
However, if you still want to have only one navbar in pure js/html/css (or it's data just dynamic) I would probably do like this:
HTML:
<nav class="navbar">
<ul>
<li><img src="cat.png"></li>
</ul>
</nav>
somewhere in JS:
var navbarUl = document.querySelector('.navbar ul');
window.onscroll = function() {
if (document.body.scrollTop > 70) {
navbarUl.innerHtml = '';
navbarUl.appendChild(getTopNavbarHTML);
} else {
navbarUl.innerHtml = '';
navbarUl.appendChild(getNavbarHTML);
}
}
getNavbarHTML and getTopNavbarHTML - will return documentFragment with li elements, see for details https://www.w3schools.com/jsref/met_document_createdocumentfragment.asp
But changing DOM during a scroll event can drastically decrease performance of a web app
I'm using Slide of bootstrap jquery and css, It runs normal and no problem happens.
this is my source:
<div id="photos" class="tabcontent">
<div id="ninja-slider">
<div>
<div class="slider-inner">
<ul>
<li><a class="ns-img" href="<%=request.getContextPath()%>/resources/images/car1.jpg"></a></li>
<li><a class="ns-img" href="<%=request.getContextPath()%>/resources/images/ban-xe-honda-civic.jpg"></a></li>
<li><a class="ns-img" href="<c:out value="${product.thumbnail3}"/>"></a></li>
<li><a class="ns-img" href="<c:out value="${product.thumbnail4}"/>"></a></li>
<li><a class="ns-img" href="<c:out value="${product.thumbnail5}"/>"></a></li>
</ul>
<div class="fs-icon" title="Expand/Close"></div>
</div>
</div>
</div>
this is my css:
#ninja-slider .ns-img {
background-color: rgba(0,0,0,0.3);
background-size: contain;
border-radius: 3px;
cursor: default;
display: block;
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
padding-top: 67%;
}
#ninja-slider .slider-inner {
width: 727px;
margin: -2px auto;
font-size: 0px;
position: relative;
box-sizing: border-box;
}
When I check and run on firebug on browsers, it seem auto generated some line at tag:
<ul style="overflow: hidden; padding-top: 50%; height: 0px;">
How Can I remove those lines auto generated or Can I change: padding-top:50% to padding-top:67%
Or any solution for me to fix the problem..
you can use !important for that.
<ul class="myul" style="overflow: hidden; padding-top: 50%; height: 0px;">
too override inline style you can do this
.myul {
padding-top: 67% !important;
}
or you can use javascript solution provide by #Renzo Calla
As #Terry said those inline styles might be added by the library, if you still want to overwrite them you can use the jquery css
$('#ninja-slider ul').removeAttr('style');
$('#ninja-slider ul').css("color","blue");
Based on this answer:
https://stackoverflow.com/a/38194916/2894798
In that case, I have to suggest you an easy and dirty way:
add in your css
#ninja-slider ul{
padding-top: 67%!important;
}
That will fix the problem.
If you will provide js in that page, i will provide an answer editing what is setting that css in ul element to padding-top:67% without overriding it.
What I want to do:
I want to add a "walkingMan" image under an element when its class is changed to activeCell. I know how to do it when the image is added to the front or back of the element using pseudo class, but as far as I know, there isn't something like :below that I can use to achieve the same effect. Is there a way in css I can use to micmic this?
What I have done:
I have added image below every upper cell and make it visible when the class is changed to activeCell. But I hope to find a more simple solution.
What it looks like:
Code: Simplified Code Example
You can use a single pseudo element on the .cell element and place a background image on it when it's active.
let activeIndex = 0;
const cells = [...document.querySelectorAll('.cell')];
setInterval(() => {
cells.forEach(cell => {
cell.classList.remove('activeCell')
});
cells[activeIndex].classList.add('activeCell');
activeIndex = activeIndex === cells.length - 1 ? 0 : (activeIndex + 1);
}, 300)
.cell {
display: inline-block;
border: 1px solid black;
margin-bottom: 1.2em;
}
.activeCell {
background-color: lightgrey;
position: relative;
}
.activeCell::after {
content: "";
position: absolute;
width: 1em;
height: 1em;
top: 1.3em;
left: calc(50% - .5em); /* Center the stickman. Position it half of its width before the parent center*/
background-image: url('https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png');
background-size:cover; /* Scale the stickman to completely cover the background area. */
}
<div>
<div class='top'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>
What about this: https://jsfiddle.net/147prwy5/3/
HTML
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
CSS
.cell {
display: inline-block;
}
.cell a {
border: 1px solid black;
}
.cell.active a {
background-color: lightgrey;
}
.cell img {
width: 20px;
height: 20px;
display: none;
}
.cell.active img {
margin-top: 5px;
width: 20px;
height: 20px;
display: block;
}
I've never been a fan of the ::before and ::after pseudo classes mainly because I've personally noticed some oddities when trying to position things in Chrome vs IE (damn it IE!). Since most people here are going to give a solution using these pseudo classes (because that's somewhat what you asked) I thought I'd give a different solution using flexbox and more divs.
Not the most optimal for download size but I do like that it's not absolute positioning elements and if the squares get bigger or smaller it's pretty easy to handle that as a scss variable at the top of the file. This all uses only two values, your padding between boxes and the size of the boxes so it should be easy to update and maintain.
Anyway, have fun! Awesome question by the way :-)
.blocks {
display: flex;
}
.block {
flex: 0 0 20px;
margin: 0px 5px;
display: flex;
flex-direction:column;
}
.block > .square {
flex: 0 0 20px;
margin: 5px 0px;
background: grey;
}
.block > .space {
flex: 0 0 20px;
margin: 5px 0px;
}
.block.activeCell > .space {
background: green;
}
<div class="blocks">
<div class="block activeCell"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
</div>
<div class="blocks">
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
</div>
Using jQuery you can toggle the class upon clicking with this:
$('.cell').click(function() { //catch clicks on .cell
$('.cell').removeClass('activeCell'); //remove class "activeCell" from all
$(this).addClass('activeCell'); //add class "activeCell" to .cell clicked
});
Apply position: relative; to .top and .bottom:
.top,
.bottom {
position: relative;
}
And use the psuedoclass :before to create a image under the .activeCell
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
And remove this:
.walkingMan {
width: 20px;
height: 20px;
display: inline-block
}
And this:
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" class='walkingMan'/>
And to add space between the divs .top and .bottom put a <br> between them.
$('.cell').click(function() {
$('.cell').removeClass('activeCell');
$(this).addClass('activeCell');
});
.cell {
display: inline-block;
border: 1px solid black;
cursor: pointer;
}
.top,
.bottom {
position: relative;
}
.activeCell {
background-color: lightgrey;
}
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
<div class='top'>
<a class='cell activeCell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<br>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>
add .RunManActive Class for Active element
//clicking add active Class
$(".RunMan").click(function() {
$(".RunMan").removeClass('RunManActive');
$(this).toggleClass('RunManActive');
});
//timing add active Class
var i=0;
var $elm=$(".Animate");
setInterval(function(){
$elm.removeClass('RunManActive');
$elm.eq(i).toggleClass('RunManActive');
i=$elm.length<=i?0:i+1;
}, 1000);
.RunMan{
width:35px;
height:35px;
background-color:lightgray;
border:3px solid #fff;
float:left;
position: relative;
}
.RunManActive{
background-color:#eee;
border:3px solid lightgray;
}
.RunManActive > div{
width:35px;
height:35px;
position: absolute;
background-image:url(http://www.iconsfind.com/wp-content/uploads/2013/11/Objects-Running-man-icon.png);
background-size:cover;
top:100%;
margin-top:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="RunMan"><div></div></div>
<div class="RunMan RunManActive"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<br><br><br><br><br><br>
<div style=" width:100%">
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan "><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>
You can do something like this, using CSS only. With :target selector you can apply a style to the element you need to hide / show.
.container {
display: inline-block;
width: 100px;
height: 200px;
}
.link {
display: block;
width: 100px;
height: 100px;
background: #ccc;
}
.walking-man {
display: none;
width: 100px;
height: 100px;
background: red;
}
#p1:target {
display: block;
}
#p2:target {
display: block;
}
#p3:target {
display: block;
}
#p4:target {
display: block;
}
height: 90px;
float: left;
}
.walking-man img {
width: 100%;
}
.walkin-man:target {
display: block;
}
<div class="container">
<div id="p1" class="walking-man"></div>
</div>
<div class="container">
<div id="p2" class="walking-man"></div>
</div>
<div class="container">
<div id="p3" class="walking-man"></div>
</div>
<div class="container">
<div id="p4" class="walking-man"></div>
</div>
Please view the code here.. JS Fiddle. There is a peculiar problem that a blue colored underscore is appearing right after the first image. Why is this happening? Note that just removing the href makes it disappear. Very peculiar problem. What should be done?
HTML:
<body>
<div id="top-bar">
<a target="_blank" href="https://twitter.com/x">
<img class="twitter" src="images/twitter.png">
</a>
<a target="_blank">
<img class="twitter" src="images/twitter.png">
</a>
<a target="_blank" href="https://www.facebook.com/x">
<img id="fb" src="images/fb.png"
onmouseover="this.src='images/fb-hover.png'"
onmouseout="this.src='images/fb.png'">
</a>
</div>
</body>
CSS:
#top-bar {
height: 50px;
min-height: 50px;
max-height: 50px;
background-color: #166330;
}
body {
margin: 0;
padding: 0;
background-image: url(images/bg.png);
background-size: 100%;
color: white;
}
.twitter {
margin-left: 30px;
margin-top: 10px;
margin-right: 10px;
min-height: 30px;
min-width: 30px;
max-height: 30px;
max-width: 30px;
}
#fb {
min-height: 30px;
min-width: 30px;
max-height: 30px;
max-width: 30px;
}
There are two ways.
1] Remove all the white spaces between <a> <img/> and </a> tags.
2] Add text-decoration:none; to the <a> elements.
That's a blank inside your a tag.
If you write it without blanks like this, no "underscore" appears. E.g. something like:
<a target="_blank" href="https://twitter.com/x"><img class="twitter"
src="images/twitter.png"></a>
So the "underscore" is actually a link with a blank text and the browser displays links with an underscore, even if the text is just a white-space.
simple.. just use this
a{
text-decoration:none;
}
user style="text-decoration:none" in tag A
<a style="text-decoration:none" href=....
Not sure if what i am trying to do is going to work, but i want to insert inside a li two div that will run some script for some links that are inside them. A bit confusing, i know, i cant explain it in a better way.
Take a look at my code:
Inside the body of HTML
<ul>
<li> TEST </li>
<li> TEST 2
<ul>
<li>
<div id="dock2" class="dock">
<div class="dock-container2" style="left: 760px; width: 400px;">
<ul>
<li><a class="dock-item2" href="#" style="width: 40px; left: 0px;"><span style="display: none;">Home</span><img alt="home" src="Inc/Images/dock/home.png"/></a> </li>
<li><a class="dock-item2" href="#" style="width: 40px; left: 40px;"><span style="display: none;">Contact</span><img alt="contact" src="Inc/Images/dock/email.png"/></a></li>
<li><a class="dock-item2" href="#" style="width: 40px; left: 80px;"><span style="display: none;">Portfolio</span><img alt="portfolio" src="Inc/Images/dock/portfolio.png"/></a></li>
<li><a class="dock-item2" href="#" style="width: 40px; left: 120px;"><span style="display: none;">Music</span><img alt="music" src="Inc/Images/dock/music.png"/></a></li>
<li><a class="dock-item2" href="#" style="width: 40px; left: 160px;"><span style="display: none;">Video</span><img alt="video" src="Inc/Images/dock/video.png"/></a></li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li> TEST 3 </li>
</ul>
The script that is running inside the div, also in the body of HTML
<script type="text/javascript">
$(document).ready(function(){
$('#dock2').Fisheye({
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>
And finally the CSS
.dock {
position: relative;
height: 50px;
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
background:url(Inc/Images/dock/dock-bg2.gif);
padding-left: 20px;
}
a.dock-item {
display: block;
width: 40px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.dock-item span {
display: none;
padding-left: 20px;
}
/* dock2 - bottom */
#dock2 {
width: 100%;
bottom: 0px;
position: absolute;
left: 0px;
}
.dock-container2 {
position: absolute;
height: 50px;
background:url(Inc/Images/dock/dock-bg.gif);
padding-left: 20px;
}
a.dock-item2 {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
width: 40px;
color: #000;
bottom: 0px;
position: absolute;
text-align: center;
text-decoration: none;
}
.dock-item2 span {
display: none;
padding-left: 20px;
}
.dock-item2 img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
So what i am actually trying to do, is put inside a list a dock that acts like OS X, moving the mouse over the icons making them to zoom, though with the above code the zoom doesn't work.
If i move the part of the dock outside the list and put it somewhere in the body, everything works as it should, but inside the list no animation.
I am not sure at all if this is possible, having an animation running inside a li, any help is really appreciated.
P.S I also have an another CSS that is about the li style, but i thing its irrelevant to the question so i didn't include it.
Edit: Added it on jsfiddle. Link: http://jsfiddle.net/UTw84/3/
The dock i am trying to make is this one: http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html
Note: on jsfiddle it doesn't show the icons, probably because there is no path for them.
Edit 2: The problem was/is with CSS. i made some changes and its working better now. http://jsfiddle.net/UTw84/7/
http://jsfiddle.net/UTw84/4/
Is this what you want ?
I just added something to your CSS selector :
#main-list ul li > ul {
display: none;
position: absolute;
text-align: center;
}
The last CSS selector was overriding the :hover selector.
EDIT :
I see.
http://jsfiddle.net/UTw84/5/
It works here but when you want to put a "left" property to the main-dock, it breaks everything.