0

Hi I need to create a multi-dimensional drop-down menu. But my hover selection don't work. I don't know how to use selector from other class div parent to other class div parent. Look at the code in style. Javascript solution is welcome

<style>
    body {
        margin: autp;
    }

    #container {
        display: table;
    }

    #lcontainer {
        padding: 0 10px 0 10px;
        display: table-cell;
    }

    #rcontainer {
        padding: 0 10px 0 10px;
        display: table-cell;
    }

    .rvcontainer {
        display: none;
    }

    .lvcontainer:hover #rcontainer>.rvcontainer {
        display: block;
    }
</style>

<div id="container">
    <div id="lcontainer">
        <div class="lvcontainer">
            Country
        </div>
        <div class="lvcontainer">
            Genre
        </div>
    </div>
    <div id="rcontainer">
        <div class="rvcontainer">
            Japan
            <br> Korea
            <br> American
            <br>
        </div>
        <div class="rvcontainer">
            Comedy
            <br> Mystery
            <br> Horror
            <br>
        </div>
    </div>
</div>

Javascript solution but the problem the class don't work.

<script>
    var lvcontainer = document.getElementsByClassName('lvcontainer');
    var rvcontainer = document.getElementsByClassName('rvcontainer');
    for(i=0; i<1; i++){
    lvcontainer[i].addEventListener("mouseover", function(){
        rvcontainer[i].style.display = "block":
    }, FALSE);
    }
    </script>
daivd rush
  • 87
  • 6
  • https://stackoverflow.com/questions/5210033/using-only-css-show-div-on-hover-over-a contains an answer using CSS only. I find that interesting and have just found it because of your question. – Gunnar Mar 21 '18 at 08:34
  • @Gunnar i try any combinator but don't work. how to exactly select lvcontainer with rvcontainer inside different parent. – daivd rush Mar 21 '18 at 08:39

1 Answers1

0

For me is not very clear what is exactly your problem. But, to make a drop down menu on multiple levels you must use like this:

In html:

<ul>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a>
    <ul>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 2</a>
        <ul>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 3</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

And is css can be like this: 

li > ul {
  display: none;
}
li:hover > ul {
  display: block;
}
li a:hover {
  color: pink;
}
li ul li a:hover {
  color: green;
}
li ul li ul a:hover {
  color: yellow;
}

Is this case I choose to change color, but of course you can change any css property you want. You can see a demo here

Carnaru Valentin
  • 1,690
  • 17
  • 27
  • I already see such drop down menu. the multi will display right after left menu. what i want is like https://us.blackberry.com/. its like a container split to 2div with float. so it can hold much more content. – daivd rush Mar 21 '18 at 09:11
  • You can easily transform my example into one like it's in yours. But you must know CSS. For me it seems you try to copy some DOM elements but don't know how to link them. Check [this](https://tympanus.net/codrops/2009/09/11/42-jquery-navigation-based-techniques/) old article, or search yourself for something similar. – Carnaru Valentin Mar 21 '18 at 09:16
  • my code only left 1 step how to selector that. with display: block to rvcontainer. – daivd rush Mar 21 '18 at 09:23
  • your answer will like this https://codepen.io/3ncrypter/pen/wBMbqL. with this kind drop down menu. it will add more space to down if list too much. – daivd rush Mar 21 '18 at 09:24
  • David, I copy your code and isn't works. Make a plnkr, to see exactly your problem. Also on the body in css is typo margin: autp; // auto – Carnaru Valentin Mar 21 '18 at 09:29
  • How can u know the problem is there's problem. if u want to know the real change display: none inside rvcontainer to block; u will know what i want to achieve when lvsub-menu get hover. – daivd rush Mar 21 '18 at 09:35
  • Ok, I get it. Let me test. – Carnaru Valentin Mar 21 '18 at 09:46
  • Is javascript a solution? – Carnaru Valentin Mar 21 '18 at 09:50
  • it's fine javascript solution. i tried to post other. but i need to w8 60 minutes. but my javascript class not workr ` ` – daivd rush Mar 21 '18 at 09:52
  • Yes, the problem is the visible item are nested in
    . If you delete this, you can use this selector ~
     – Carnaru Valentin Mar 21 '18 at 10:01
  • I know that kind drop down menu. but can use logic how long the menu will down? drop down that i want achieve like web blackberry. or like i says. change display to block. – daivd rush Mar 21 '18 at 10:16