Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You should change your HTML in:</p> <pre><code>&lt;div class="sidebar"&gt; &lt;b style="color:#666;"&gt;Menu&lt;/b&gt; &lt;ul class="menu"&gt; &lt;li&gt;&lt;a href="#"&gt;Profile&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Friends&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Community Service&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Messages&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>and your CSS in:</p> <pre><code>.menu{ list-style:none; /* remove style from &lt;ul&gt; but leave a 40px margin on the left */ margin-left:-40px; /* this remove the 40px margin on the left */ } .menu li{ text-align: center; margin: 10px 0; /* this adds 10px top and bottom of each &lt;LI&gt; element */ } .menu a{ display: block; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); color: #d7d7d7; font: bold 16px Arial,Helvetica,Sans-serif; text-decoration: none; border-radius: 10px; background-color: #444; padding: 5px 10px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .menu a:hover{ border: double 6px #00F; color: #00F; background-color: #FFF; font: bold 20px Arial,Helvetica,Sans-serif; text-decoration: underline; text-align: center; } .sidebar{ width:220px; margin-top:8px; margin-left:3px; background-color:#CCC; border-radius:10px; padding:10px; clear:left; -moz-box-shadow: inset 0 0 5px 5px #888; -webkit-box-shadow: inset 0 0 5px 5px #888; box-shadow: inset 0 0 5px 5px #888; } </code></pre> <p>Using <code>&lt;ul&gt;</code> is better and semantically correct. For search engines it should be even better to wrap the <code>&lt;ul&gt;</code> with <code>&lt;nav&gt;</code></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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