Display a LI that is held under a different parent

Issue

I currently have a navigation that is based on the bellow image. (sorry about the terrible sketch) I have a tab along the top called "films" that is also classed as a department. I would like the tab "films" to open the sub cat films located in the department tab as though the mouse was hovered over that.

Currently the department "films" is a list item under an ordered list of department and has an ID of MM05. The tab "films" is again another li in an unordered list for the top bar that originally had its own drop down.

Not sure how I can get around this!

Solution

This is sadly not possible just using CSS as "Cascading" means that you can only go downwards with your selectors.

You would have to use Javascript for this.

This would look something like this

<script>
  var linkToOpenDropDown=document.getElementbyId("filmLink");
  var dropDown=document.getElementbyId("dropDownList");
  linkToOpenDropDown.onmouseover=function() {
    dropDown.style.visibility='visible';
  };
  linkToOpenDropDown.onmouseout=function() {
    dropDown.style.visibility='hidden';
  };
</script>

Answered By - user2611844