toepiphacoon
New Member
I want to create a drop down menu view based on the following HTML / CSS :\[code\]<!DOCTYPE html><html> <head> <style> html * { margin: 0; padding: 0; } body { color: #FFF; } #panel, #content { position: absolute; top: 0; bottom: 0; } #panel { left: 0; width: 750px; background: #333; z-index: 100; padding-top: 200px; padding-left: 250px; } #content { background: #000; left: 250px; right: 0px; } #panel > nav { margin-bottom: 100px; } .Dropdown { position: relative; /* Has to be set, can be overriden */ } .Dropdown > ul { position: absolute; display: none; list-style-type: none; } .Dropdown:hover > ul { display: block; } .Dropdown > ul, /* On the right by default */ .Dropdown.Right > ul { /* Deploys on the right side of the label */ top: 0; left: 100%; } .Dropdown.Bottom > ul { /* Deploys below the label */ top: 100%; left: 0; } </style></head><body> <div id="panel"> <nav class="Dropdown Right" style="width: 200px;"><!-- so it can appear on jsfiddle --> <div class="Label Parent">Label</div> <ul> <li> <div class="Label">Entry</div> </li> <li> <div class="Label">Entry</div> </li> <li> <div class="Label">Entry</div> </li> <li> <nav class="Dropdown Right"> <div class="Label Parent">Label</div> <ul> <li> <div class="Label">Entry</div> </li> <li> <nav class="Dropdown Right"> <div class="Label Parent">Label</div> <ul> <li> <div class="Label">Entry</div> </li> <li> <div class="Label">Entry</div> </li> <li> <div class="Label">Entry</div> </li> <li> <div class="Label">Entry</div> </li> </ul> </nav> </li> <li> <div class="Label">Entry</div> </li> <li> <div class="Label">Entry</div> </li> </ul> </nav> </li> </ul> </nav> </div> <div id="content"> </div></body>\[/code\]I would like a developper to be able to extend this drop down CSS to add, for example, a transition between 0 and 1 opacity.Actually it is not possible with this code because the property display conflicts with the transition one. Adding opacity 0 on the non-hover and opacity 1 on the hover will not work because of that display property.I've read somewhere on this web site that i could use height 0 and height auto instead of display none and display block (respectivly) but it didn't work either.Any ideas about how to add transitions please ?Thanks for your help !