Menu css and javascript

Question

I'm a little confused right now. Firstly, the submenu's width and height looks distorted. Secondly, the javascript is not working. It does not hide the submenus and only appear when it's hover. The more funnier thing is that on my website the submenus don't even appear at all. I've been working on this for more than a day and I just can't seem to get it right.

#navigation ul li.current-menu-item a, 
#navigation ul li a:hover { background: rgba(255,255,255,0.05); }

#navigation ul li ul {
    position: absolute;
    top: 58px;
    left: 0px;
    width: 200px;
    border: none;
    z-index: 1000;
    background: #D32828;
}

JS fiddle: http://jsfiddle.net/UX94c/1/

Jonas Grumann · Accepted Answer · 2014-01-23 08:50:34Z

1

Is there a particular reason why you're using javascript? It looks like a normal dropdown menu to me, which can be achieved with pure css:

.main-navigation li .sub-navigation {display: none;}
.main-navigation li:hover .sub-navigation {display: block;}

*you'll have to use your correct classes, my example is just the general use

I created a fiddle with the basic usage: http://jsfiddle.net/YP5Dh/

edited Jan 23, 2014 at 8:50

answered Jan 23, 2014 at 8:45

Jonas Grumann

10.8k2 gold badges26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yooz · Accepted Answer · 2014-01-23 05:17:27Z

1

I fixed your Javascript, there was a syntax error and had the css :

.sub-menu{
  visiblity:hidden;
}

The design is odd, but it works.

http://jsfiddle.net/bQ9DA/1

edited Jan 23, 2014 at 5:17

answered Jan 23, 2014 at 3:41

Yooz

2,51823 silver badges31 bronze badges

1 Comment

Yooz Over a year ago

What do you mean it does not work? the sub-items do not appears? Which browser are you working with?

Collectives™ on Stack Overflow

Menu css and javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related