Note that there are some explanatory texts on larger screens.

plurals
  1. POwhy isn't my drop down menu displaying as block?
    primarykey
    data
    text
    <p>I had to rearrange a few things in my CSS and now my drop down menus don't display as block. The drop down menu is made through jquery, but I know the code is correct. Now it's either and html or a css problem. I'll post the css and if the html is needed let me know, I will add it.</p> <p>HTML:</p> <pre><code>&lt;nav id="navigation"&gt; &lt;ul class="navList"&gt; &lt;li&gt;&lt;a class="navLink" href=""&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li id="navLink1"&gt;&lt;a class="navLink" href=""&gt;Services&lt;/a&gt;&lt;/li&gt; &lt;ul class="dropDown" id="dropDown1"&gt; &lt;li&gt;Pricing&lt;/li&gt; &lt;li&gt;Examples&lt;/li&gt; &lt;li&gt;Additional Services&lt;/li&gt; &lt;/ul&gt; &lt;li id="navLink2"&gt;&lt;a class="navLink" href=""&gt;Info&lt;/a&gt;&lt;/li&gt; &lt;ul class="dropDown" id="dropDown2"&gt; &lt;li&gt;About Us&lt;/li&gt; &lt;li&gt;Our Portfolio&lt;/li&gt; &lt;/ul&gt; &lt;li&gt;&lt;a class="navLink" href=""&gt;FAQ's&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; </code></pre> <p>CSS:</p> <pre><code> #navigation{ width: 100%; height: 50px; padding-bottom: 0px; } .navList li{ list-style: none; text-align: left; display: inline; float: left; padding: 5px; margin-right: 25px; font-size: 20px; border-radius: 15px; } .navList li:hover{ background-color: #3399FF; } .navLink{ text-decoration: none; color: black; text-shadow: 2px 2px 5px white; } .dropDown{ position: absolute; z-index: 1; background-color: rgba(46, 184, 230, .9); border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; padding: 0px; border-left: 2px solid lightgray; border-right: 2px solid lightgray; } .dropDown li{ list-style: none; text-align: left; padding: 5px; } .dropDown li:hover{ background-color: #3399FF; } #dropDown1{ top: 185px; left: 272px; display: none; } #dropDown2{ top: 185px; left: 382px; display: none; } </code></pre> <p><a href="http://jsfiddle.net/Sd37W/" rel="nofollow">here is my jsfiddle if it helps</a></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. 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