CODEWITHSUNDEEP
htmlmenunavigationhovernav
MOTIVECODEX
MOTIVECODEX

Reputation: 2752

HTML navigation problems

I've got this navigation code that works great, but I can't figure out the most inner part.

ul -> li -> span -> ul -> li -> ul -> li -> ul -> li this last ul, li block

So basically, when someone hovers over work, I want the Freelance work to appear, else hidden, just like My portfolio. But which part is wrong in this code? Freelance work appears all the time.

jsfiddle code here

Thanks

Upvotes: 0

Views: 55

Answers (1)

jonosma
jonosma

Reputation: 339

I'd recommend using some jquery. You should also look in to using classes and id's, they come in handy when dealing with nested code -> http://jsfiddle.net/hNneu/

jQuery:

$("#work-id").hover(
  function () {
    $('#freelance-work-id').show();
  },
  function () {
    $('#freelance-work-id').hide();
  }
);

HTML:

<li id="work-id"><a href="work.html">Work</a>
     <ul id="freelance-work-id">
         <li>
             <a href="#">Freelance work</a>
         </li>
     </ul>
</li>

CSS: 

#freelance-work-id {
    display:none;
}

Upvotes: 1

Related Questions