Databases
StackOverflow2013
Postsdbo
POTrying to implement CSS dropdown menu
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTrying to implement CSS dropdown menu
    text
    copied!<p>I'm trying to implement a CSS dropdown menu but whenever I do so, the <code>&lt;h1&gt;</code> and <code>&lt;p&gt;</code> tags wrap around the drop down menu boxes.</p> <p>Can anyone suggest a solution to this? I'm only just learning CSS now and would appreciate any input.</p> <p>Thanks</p> <pre><code>&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Untitled Document&lt;/title&gt; &lt;link rel="stylesheet" href="css.css"/&gt; &lt;/head&gt; &lt;body&gt; &lt;div id= "container"&gt; &lt;img src="images/title.jpg"/&gt; &lt;div id="navigation"&gt; &lt;ul class="navbar"&gt; &lt;li&gt; &lt;a href="#"&gt;Home&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;HTML5&lt;/a&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="#"&gt;Tutorial 1&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;Tutorial 2&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;Tutorial 3&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;CSS3&lt;/a&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="#"&gt;Tutorial 1&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;Tutorial 2&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;Tutorial 3&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;Links&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt;Contact&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="content"&gt; &lt;h2&gt;Home Page&lt;/h2&gt; &lt;p&gt;This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph.&lt;/p&gt; &lt;/div&gt; &lt;div id="footer"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>and the CSS is:</p> <pre><code>@charset "utf-8"; /* CSS Document */ #container{ width:800px; background-color:#00FF00; border:1px solid black; height:1000px; z-index:-9; margin:auto; } #logo{ background-color:#FF0033; border:#000 1px; width:800px; height:200px; overflow:hidden; } #navigation{ background-color:#FFF; border:#000 1px; width:800px; height:30px; } #content{ background-color:#6F3; border:#000 1px; width:780px; height:400px; margin:10px; } #footer{ background-color:#FF0; border:#000 1px; width:800px; height:100px; } .navbar { /*border-right: 1px solid #54879D;*/ height: 40px; margin: 0 0 0 0; padding: 0; } .navbar li { background-color: #366B82; float: left; font: bold 12px/1.2em Arial,Verdana,Helvetica; height: auto; list-style: none outside none; margin: 20 0; padding: 0; text-align: center; width: 160px; } .navbar a { /* border-left: 1px solid #54879D;*/ border-right: 1px solid #1F5065; color: #FFFFFF; display: block; padding: 10px 10px; text-decoration: none; } .navbar li:hover, a:hover { background-color: #54879D; } .navbar li ul { display: none; height: auto; margin: 0; padding: 0; } .navbar li:hover ul { display: block; } .navbar li ul li { background-color: #54879D; } .navbar li ul li a { border-color: #74A3B7 #1F5065 #1F5065; border-left: 1px solid #1F5065; border-right: 1px solid #1F5065; border-style: solid; border-width: 1px; } .navbar li ul li a:hover { background-color: #366B82; } </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