CODEWITHSUNDEEP
javascriptjqueryhtmlcsswordpress
D. WONG
D. WONG

Reputation: 59

Menu css and javascript

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/

Upvotes: 0

Views: 70

Answers (2)

Jonas Grumann
Jonas Grumann

Reputation: 10786

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/

Upvotes: 1

Yooz
Yooz

Reputation: 2518

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

Upvotes: 1

Related Questions