title: Show/hide div using css
body: <pre><code>#editor-tags, #editor-smileys{
      display: none;
  }
  
  #editor-bold:hover #editor-tags {
      display: inline-block;
  }
  
  #editor-smiley:hover #editor-smileys {
      display: inline-block;
  }
  
                                  &lt;div id="editor"&gt;
                                      &lt;img src="data/img/buttons/bold.png" alt="bold" title="Open tags" class="point" id="editor-bold"&gt; 
                                      &lt;img src="data/img/smileys/happy.gif" alt="smileys" title="open smiley menu" class="point" id="editor-smiley"&gt;
  
                                      &lt;div id="editor-tags"&gt;
                                          &lt;span id="editor-insert-b"&gt;&lt;b&gt;[b][/b]&lt;/b&gt;&lt;/span&gt;
                                          &lt;span id="editor-insert-i"&gt;&lt;i&gt;[i][/i]&lt;/i&gt;&lt;/span&gt;
                                          &lt;span id="editor-insert-u"&gt;&lt;u&gt;[u][/u]&lt;/u&gt;&lt;/span&gt;
  
                                          &lt;span id="editor-insert-img"&gt;[img][/img]&lt;/span&gt;
                                          &lt;span id="editor-insert-url"&gt;[url][/url]&lt;/span&gt;
                                      &lt;/div&gt;
  
                                      &lt;div id="editor-smileys"&gt;
                                          &lt;span id="editor-insert-happy.gif"&gt;&lt;img src="data/smileys/happy.gif" alt="happy"&gt;&lt;/span&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
  </code></pre>
  
  <p>Hello again stackoverflow!</p>
  
  <p>Im making my own forum software, and im now doing the editor.
  Well i wanna make the tags and the smileys in a nice menu, only, it doesn't come up?
  Help please!</p>
  
  <p>Greetings</p>
  
  <p><strong>edit</strong></p>
  
  <pre><code>#editor {
      display: block;
  }
  
  #editor li ul {
      display: none;
  }
  
  #editor li:hover ul {
      display: block;
  }
  
  #editor {
      list-style-type:none;
  }
  #editor li.a { float: left; }
  #editor li.a ul { list-style-type:none; }
  #editor li.a ul li.b { display: block; }
  
  
  
  
  &lt;ul id="editor"&gt;
                                          &lt;li class="a"&gt;
                                              &lt;img src="data/img/buttons/bold.png" alt="bold" title="Open tags" class="point" id="editor-bold"&gt;
                                              &lt;ul&gt;
                                                  &lt;li id="editor-insert-b"&gt;&lt;b&gt;[b][/b]&lt;/b&gt;&lt;/li&gt;
                                                  &lt;li id="editor-insert-i"&gt;&lt;i&gt;[i][/i]&lt;/i&gt;&lt;/li&gt;
                                                  &lt;li id="editor-insert-u"&gt;&lt;u&gt;[u][/u]&lt;/u&gt;&lt;/li&gt;
  
                                                  &lt;li id="editor-insert-img"&gt;[img][/img]&lt;/li&gt;
                                                  &lt;li id="editor-insert-url"&gt;[url][/url]&lt;/li&gt;
                                              &lt;/ul&gt;
                                          &lt;/li&gt;
  
                                          &lt;li class="a"&gt;
                                              &lt;img src="data/img/smileys/happy.gif" alt="smileys" title="open smiley menu" class="point" id="editor-smiley"&gt;
                                              &lt;ul&gt;
                                                  &lt;li id="editor-insert-happy.gif"&gt;&lt;img src="data/smileys/happy.gif" alt="happy"&gt;&lt;/li&gt;
                                              &lt;/ul&gt;
                                          &lt;/li&gt;
                                      &lt;/ul&gt;
                                      &lt;br&gt;
                                      &lt;br&gt;
  </code></pre>
  
  <p>It doesn't work properly because verything underneath gets moved. Help?</p>