Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>First off, your markup is all out of whack. You're nesting list items inside your anchor tags under your unordered list in your submenu and that is wrong, so we can start by fixing that.</p> <pre><code>&lt;li&gt; &lt;a class="category-top" href="index.php?main_page=index&amp;amp;cPath=1"&gt;Dinnerware&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="index.php?main_page=index&amp;amp;cPath=11"&gt;Appetizer / Dessert / Salad&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="index.php?main_page=index&amp;amp;cPath=9"&gt;Bowls&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="index.php?main_page=index&amp;amp;cPath=40"&gt;Bread &amp; Butter&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="index.php?main_page=index&amp;amp;cPath=12"&gt;Buffet / Charger Plates&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="index.php?main_page=index&amp;amp;cPath=10"&gt;Cups / Mugs&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="index.php?main_page=index&amp;amp;cPath=7"&gt;Dinner Plates&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="index.php?main_page=index&amp;amp;cPath=6"&gt;Dinnerware Sets&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; </code></pre> <p>After that is done, you need to properly target your submenu items, currently you're using something like this:</p> <pre><code>#navCatTabsDropdown * li ul { ... } </code></pre> <p>Which i can't even comprehend how its working, so you can fix that by eliminating that asterisk sign.</p> <p>And now on to your issue. Your submenu is not properly positioning itself under your menu item because it does not have a <code>top</code> reference from where to open from. You can fix that by adding <code>top:100%</code> to your submenu, this way it will open up exactly <code>100%</code> away from your menu item, this way the submenu will position itself exactly below your menu item automatically.</p> <pre><code>#navCatTabsDropdown li ul { top: 100%; } </code></pre> <p>Here is a jsFiddle with your code and all the fixes in place: <a href="http://jsfiddle.net/vaGDF/2/" rel="nofollow">http://jsfiddle.net/vaGDF/2/</a>, though i would suggest you start from the top and rewrite your menu properly. Here is a simple menu i made for another answer such as this one that you can use as base: <a href="http://jsfiddle.net/andresilich/pc8wN/1/" rel="nofollow">http://jsfiddle.net/andresilich/pc8wN/1/</a></p>
 

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