CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Aleš Hriberšek
Aleš Hriberšek

Reputation: 59

Hiding menu items in css

I have a program that automatically generates a tree. It looks like

<li class="linamesystem">Alternator</li>
   <ul class="boxfornamegroupsparts">
      <li class="linamegroup"><a href="#top(1)">Alternator2</a></li>
      <li class="linamegroup"><a href="#top(2)">Krmilnik alternatorja (regler)</a></li>
  </ul>

Alternator -> Alternator2
           ->Krmilnik

What would be the css code for hovering Alternator parent and showing linamegroup childs?

Or should I do it with javascript?

Upvotes: 0

Views: 74

Answers (3)

Adi
Adi

Reputation: 727

I have created a similar jsfiddle for you, illustrating a horizontal menu with submenus. The trick is to initially hide linamegroup and display it when linamesystem is hovered.

.linamegroup { display: none;}

.linamesystem:hover .linamegroup { display: block; }

Upvotes: 0

Giacomo Cerquone
Giacomo Cerquone

Reputation: 2479

Probably this is just a piece of code that you have. The real one should be something like this:

<ul>
<li></li>
<li>
   <ul>
     <li></li>
   </ul>
</li>
</ul>

Anyway to achieve what you wanna do, just use this css:

.linamesystem:hover .boxfornamegroupsparts {
  display:block;
}

Upvotes: 1

A. Wolff
A. Wolff

Reputation: 74420

This could be CSS rules to use:

.boxfornamegroupsparts {
   display: none;
}

.linamesystem:hover + .boxfornamegroupsparts {
    display: block;
}

EDIT: as pointed by Paulie_D, this is invalid HTML markup, ul cannot/shouldn't be direct child of other ul element.

Upvotes: 3

Related Questions