Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I fix my navigation menu bar
    primarykey
    data
    text
    <p>In my navigation bar, My active button along with my hover button does not align inside with my navigation bar. can someone help me with this? </p> <p>Here is the link where I am testing this with:</p> <p><a href="http://jsfiddle.net/3qPbE/63/" rel="nofollow">http://jsfiddle.net/3qPbE/63/</a></p> <p>CSS:</p> <pre><code>&lt;style type="text/css"&gt; .cl{clear:both;} #navi{ background:#0082c8; position:relative; margin-top:0; list-style:none; height:50px; } #navi &gt; li{ float:left; margin:0 20px; position:relative; padding:14px 0; } #navi li a, .subnavi li a{ color:white; text-decoration:none; display:block; line-height:29px; padding:0 13px; font-size:16px; font-family:arial; text-shadow: 0px 2px 2px #034e9f; filter: dropshadow(color=#034e9f, offx=0, offy=2); } #navi &gt; li:hover &gt; a, #navi li a.active{ background-color:#009; height:50px; line-height:29px; display:block; } .subnavi{ position:absolute; display:none; top:50px; background:#0082c8; padding:10px 0; white-space:nowrap; list-style:none; } #navi li:hover .subnavi{ display:block; } #navi .subnavi li{ margin:0;} #navi .subnavi li a{ display:block; font-size:13px; padding:0 15px; border-radius:0; line-height:27px;} #navi .subnavi li a:hover{ padding:0 15px; border-radius:0; border-left:0; border-right:0; line-height:25px;} &lt;/style&gt; </code></pre> <p>Here is the HTML:</p> <pre><code>&lt;body&gt; &lt;ul id="navi"&gt; &lt;li&gt;&lt;a href="" class="active"&gt;Home Owners&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Proffesionals&lt;/a&gt; &lt;ul class="subnavi"&gt; &lt;li&gt;&lt;a href=""&gt;LInk 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;LInk 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;LInk 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;LInk 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;LInk 1&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Why Ventilate?&lt;/a&gt;&lt;/li&gt; &lt;div class="cl"&gt;&lt;/div&gt; &lt;/ul&gt; &lt;/body&gt; </code></pre>
    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