Databases
StackOverflow2013
Postsdbo
POLI Visibility Not Tied to UL Height
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POLI Visibility Not Tied to UL Height
    text
    copied!<p>I've got a website I'm building for personal use. This website has a dropdown menu that is animated by CSS3 animations. I quite enjoyed the look and feel of the result, until I realize that the List Items inside the Unordered List weren't visible/invisible relative to the dropdown's height. The information I seek is a method of resolving this. It's very annoying, especially given the time I've invested into something that seems so simple...</p> <p>Pertinent HTML:</p> <pre><code>&lt;ul class="dMaster"&gt; &lt;li class="dChild"&gt;&lt;a href="index.php" class="bItem" id="homeItem"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li class="dChild" style="cursor: default;"&gt;About &lt;ul class="dMaster2"&gt; &lt;li class="dChild2"&gt;&lt;a href="about.php" class="bItem" id="gAboutItem"&gt;General&lt;/a&gt;&lt;/li&gt; &lt;li class="dChild2"&gt;&lt;a class="bItem" id="twItem" target="_blank"&gt;Twitter&lt;/a&gt;&lt;/li&gt; &lt;li class="dChild2"&gt;&lt;a class="bItem" id="ytItem" target="_blank"&gt;YouTube&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>Pertinent CSS:</p> <pre><code>@keyframes dropdown { from { height: 0px; } to { height: 77px; } } @-webkit-keyframes dropdown { from { height: 0px; } to { height: 77px; } } .dMaster { margin: 0; padding: 0; text-align: center; } .dChild { margin: 0; padding: 0; height: 19px; width: 60px; float: left; list-style: none; } .dChild:hover { color: #000; background: #C60; border: 1px solid #FFF; border-top: none; text-shadow: 1px 1px 5px #FFF; } .dMaster2 { padding: 0; position: absolute; min-width: 60px; text-align: center; background: #C60; border: 1px solid #FFF; margin: -2px 0 0 -1px; visibility: hidden; } .dChild2 { opacity: 0.5; padding: 2px 5px; list-style: none; -webkit-transition: opacity 0.4s; -moz-transition: opacity 0.4s; -o-transition: opacity 0.4s; } .dChild2:hover { opacity: 1.0; } ul li:hover ul { color: #FFF; visibility: visible; animation: dropdown 0.2s ease-out; -webkit-animation: dropdown 0.2s ease-out; } </code></pre> <p>I've tried for an hour or two with many different techniques without avail. If needed, there's a JSFiddle <a href="http://jsfiddle.net/tCWx2/3/" rel="nofollow">here</a>. Any help is greatly appareciated!</p> <p><em><strong>Side note:</strong> The dropdown menu is on the About. It may not be apparent at first, but the List Items are quite visible when the UL is extending downward.</em></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload