Databases
StackOverflow2013
Postsdbo
POHow to use (top) margin with CSS3 drop down menu?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to use (top) margin with CSS3 drop down menu?
    text
    copied!<p>I am trying to create a drop down menu completely in CSS3. For the most part I have accomplished what I wanted, but for some reason I can't seem to add <code>margin-top: 10px;</code> to drop down menu, as I don't want it touching the main link. It seems to deactivate the hover when it hits the margin?</p> <p>I have posted a working example with no margin on jsFiddle: <a href="http://jsfiddle.net/J5QSv/" rel="nofollow">http://jsfiddle.net/J5QSv/</a></p> <p>This is with the <code>margin-top: 10px;</code>, and does not work: <a href="http://jsfiddle.net/RastaLulz/J5QSv/2/" rel="nofollow">http://jsfiddle.net/RastaLulz/J5QSv/2/</a></p> <p>As you can see, that works perfectly fine. However, when you uncomment <code>margin-top: 10px;</code> it no longer works.</p> <p>Do you know a way to fix this? or a work around?</p> <p>HTML</p> <pre><code>&lt;span class="LinksMenu"&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="#"&gt;Account&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Settings&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Logout&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/span&gt; </code></pre> <p>CSS</p> <pre><code>body { padding: 10px; background: #F3F3F3; } a:link,a:visited { color:#000; text-decoration:none } a:hover,a:active { color:#000; text-decoration:underline } .LinksMenu { margin:0; padding:0; clear: both; } .LinksMenu ul { margin:0; padding:0; } .LinksMenu li { margin:0; padding:0; list-style:none; float: left; position: relative; } .LinksMenu ul ul li a { margin: 0; padding: 10px; width: 100px; display: block; text-shadow: 0; color: #000; } .LinksMenu ul ul { /* margin-top: 3px; */ border: 1px solid #CCC; border-radius: 3px; background: #FFF; position: absolute; visibility: hidden; } .LinksMenu ul li:hover ul { visibility: visible; } </code></pre>
 

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