StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POresponsive - strange menu
text
Body
copied!<p>I am in the process of drafting website that you can also use it on mobile. Menu I have a little trouble as you can see here.</p> <p>Problemes its here:</p> <p><a href="http://billedeupload.dk/?v=auFEW.png" rel="nofollow">http://billedeupload.dk/?v=auFEW.png</a></p> <p>The image on the right describe how it looks when I look at mobile, and the text on the left is how it looks when I look at the computer right moment</p> <p><strong>CSS</strong></p> <pre><code> .menu{ height:42px; background:#333; border-bottom:solid 3px red; } .menu ul{ margin:0; padding:0; float:left; list-style:none; } .menu ul li{ position:relative; float:left; } .menu ul li a{ display:block; height:42px; padding:0 15px; font:15px/45px 'Anaheim', sans-serif; color:#fff; text-transform:uppercase; text-decoration:none; -webkit-transition:background 190ms ease-in, color 190ms ease-in; -moz-transition:background 190ms ease-in, color 190ms ease-in; -ms-transition:background 190ms ease-in, color 190ms ease-in; -o-transition:background 190ms ease-in, color 190ms ease-in; transition:background 190ms ease-in, color 190ms ease-in; } .menu ul:hover li.active > a{ background:#333; color:#fff; } .menu ul li.active > a, .menu ul li:hover > a, .menu ul li.active:hover > a{ background:red; color:#FFF; } .menu ul li a:active, .menu ul li.active a:active{ color:#CCC; } </code></pre> <p><strong>Mobil style here</strong></p> <pre><code>.menu { width: 95%; } .menu li { clear: both; padding: 5px 15px; } .menu li a{ text-decoration: none; color: #ffffff; } </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