StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>UPDATED</strong></p> <p>Using some jQuery:</p> <p><a href="http://jsfiddle.net/fZgS9/3/" rel="nofollow">http://jsfiddle.net/fZgS9/3/</a></p> <p><strong>JS</strong></p> <pre><code>$(function() { var nav = $('#nav'); var search = nav.find('li.search'); search.on('mouseover', function(event) { search.children().addClass('show'); }); nav.on('mouseleave', function(event) { search.children().removeClass('show'); }); }); </code></pre> <p>This is the basic idea (without js):</p> <p><a href="http://jsfiddle.net/fZgS9/1/" rel="nofollow">http://jsfiddle.net/fZgS9/1/</a></p> <p><strong>HTML</strong></p> <pre><code><ul id="nav"> <li class="search"> <div> <input type="text"/> </div> </li> </ul> </code></pre> <p><strong>CSS</strong></p> <pre><code>#nav { list-style: none; margin: 0; padding: 0; font-size: 50px; height: 1em; background-color: #09A065; position: fixed; top: 0; right: 0; left: 0; } #nav > li.search { margin: 0; padding: 0; float: right; width: 1em; height: 1em; background-color: #ccc; position: relative; } #nav > li.search > div { position: absolute; top: 100%; right: 0; background-color: #ccc; display: none; } #nav > li.search:hover > div { display: block; } #nav > li.search:hover:before { position: absolute; top: 0; right: 0; width: 2000em; height: 1em; background: red; content: ""; } </code></pre> <p>The key is to play with position relative/absolute and display none/block, and the li:hover affects the inner div using child selector.</p> <blockquote> <p>I want that the search panel will remain even if the user is hovering on the menu nav itself...</p> </blockquote> <p>Tricky, but done using a pseudo element, you can hide it with opacity, but it will cover the rest of the menu... hummm... use JS...</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