Databases
StackOverflow2013
Postsdbo
PODrop-down with CSS
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODrop-down with CSS
    text
    copied!<p>I got a reallly simple drop-down menu but got a problem with the submenus width.</p> <p>See it here: <a href="http://dl.dropbox.com/u/70953/SOSfrontpage.html" rel="nofollow noreferrer">http://dl.dropbox.com/u/70953/SOSfrontpage.html</a></p> <p>My HTML is:</p> <pre><code>&lt;div id="navigation"&gt; &lt;div id="menu-dropdown"&gt; &lt;ul class="menu"&gt; &lt;li class="menu_punkt"&gt;&lt;a href="http://itu.dk/people/lfel/Web-kodning/SOSfrontpage.html"&gt;Frontpage&lt;/a&gt;&lt;/li&gt; &lt;li class="menu_punkt"&gt;&lt;a href="http://itu.dk/hvem_er_vi_menu/hvem_er_vi.html"&gt;Who are we?&lt;/a&gt;&lt;/li&gt; &lt;li class="menu_punkt"&gt;&lt;a href="http://itu.dk/oplev_sos_menu/oplev_sos.html"&gt;This is a test&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="http://itu.dk/people/lfel/Web-kodning/xxx.html"&gt;Your profile&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="http://itu.dk/people/lfel/Web-kodning/xxx.html"&gt;New profile&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="menu_punkt"&gt;&lt;a href="http://itu.dk/sos_profil_menu/sos_profil.html"&gt;SOS Profile&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="http://itu.dk/people/lfel/Web-kodning/din_profil.html"&gt;Your profile&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="http://itu.dk/people/lfel/Web-kodning/ny_bruger.html"&gt;New user&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt;&lt;li class="menu_punkt"&gt;&lt;a href="http://itu.dk/log_ind.html"&gt;Log ind&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>and my CSS is:</p> <pre><code>/*horisontal navbar*/ #menu-dropdown { list-style: none; position: absolute; top: 600px; } #menu-dropdown ul li { float:left; list-style-type: none; font-size: 0.8em; } #menu-dropdown li ul { position: absolute; display: none; background-color:#cdc3a2; padding: 0px; margin-bottom:1px; } #menu-dropdown ul ul li { clear: both; } #menu-dropdown ul li a { display: block; padding: 10px; color:#102B47; text-decoration:none; font-family:Verdana, Geneva, sans-serif; font-size: 1em; } #menu-dropdown ul li a:hover { background-color: #cdc3a2; } #menu-dropdown li:hover ul, li.over ul { display: block; } </code></pre> <p>You can see my problem here: <a href="http://dl.dropbox.com/u/70953/SOSfrontpage.html" rel="nofollow noreferrer">http://dl.dropbox.com/u/70953/SOSfrontpage.html</a></p> <p>Regards - Mestika</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