Change sub navs structurs

Hi, How can i do yo have my second (and nexts levels) of subnav dropdowns displayer like that : https://cloudup.com/cinJ87wW2Mu

Hi Alexandra,

For the past week, I myself have been trying to implement this using only Beans and UIkit, but I found it to be problematic. UIkit doesn't seem capable of creating a dropdown within another dropdown. I've only been able to get a single-level dropdown to work.

The only solution I can think of is to style all the dropdowns manually with CSS.

A compromise is to let UIkit create the first-level dropdown for you. Then, style subsequent levels using CSS, like:

.tm-primary-menu ul ul li {
 position: relative;
}

.tm-primary-menu ul ul li ul {
  display: none;
  position: absolute;
 top: 0px;
 left: 200px;
  width: 250px;
 padding: 15px;
  background-color: #f5f5f5;
}

.tm-primary-menu ul ul li:hover > ul {
 display: block;
}

.uk-dropdown:focus {
  outline: none;
}

I'm curious if anyone else has a better solution to this problem.

Best of luck,

Charles

Hey guys,

As Charles correctly said, UIkit doesn't have the styling needed out of the box! The CSS provided works well on my side and is the best solution I can think of 😉

Have fun,

Thank you very much Charles !

I am going to test it 🙂

You're welcome! I'm glad I could be of help.