Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Help for my Nav Bar
    primarykey
    data
    text
    <p>I have prepared a fiddle of my nav bar:</p> <p><a href="http://jsfiddle.net/88r9G/" rel="nofollow">http://jsfiddle.net/88r9G/</a></p> <p>At the moment, the hover bottom-border is narrower than the active state and I can't see how to fix it and was wondering if the gurus here could offer some help?</p> <p><strong>HTML</strong></p> <pre><code>&lt;!-- Forgive the messy markup - wordpress output --&gt; &lt;div class="wpbook_header"&gt; &lt;div id="underlinemenu" class="clearfix"&gt; &lt;ul&gt; &lt;li class="page_item page-item-67 current_page_item"&gt;&lt;a id="load-home-page" href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li class="page_item page-item-69"&gt;&lt;a id="load-blog-list" href="#"&gt;The Blogs&lt;/a&gt;&lt;/li&gt; &lt;li class="page_item page-item-60"&gt;&lt;a id="load-authors-page" href="#"&gt;Meet the Bloggers&lt;/a&gt;&lt;/li&gt; &lt;li class="page_item page-item-2"&gt;&lt;a id="load-gallery" href="#"&gt;Gallery&lt;/a&gt;&lt;/li&gt; &lt;li class="page_item page-item-271"&gt;&lt;a id="load-faqs" href="#"&gt;FAQs&lt;/a&gt;&lt;/li&gt; &lt;li class="page_item page-item-168"&gt;&lt;a id="load-compform" href="#"&gt;Competition&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt;​ </code></pre> <p><strong>CSS</strong></p> <pre><code>#underlinemenu { font-family: arial, helvetica; padding: 0; margin: 0; padding-bottom: 30px; font-size: 14px; } #underlinemenu ul { float: left; font-weight: bold; width: 770px; height: 57px; background-color: #242129; margin: -1px 0 -30px 0; } #underlinemenu ul li { display: inline; float: left; color: white; padding: 21px 30px 0px 8px; } .current_page_item { color: white; padding: 21px 10px 15px 5px !important; margin: 0 30px 0 3px; border-bottom: 5px solid white; } #underlinemenu ul li a { color: white; font-weight: bold; text-decoration: none; padding: 5px; } #underlinemenu ul li a:hover { color: #408261; padding-bottom: 15px; border-bottom: 5px solid #408261; } </code></pre> <p>​</p> <p>Also, if anyone can give advice on how to turn this into a lava-lamp style menu (where the bottom-border animates to be under the hovered element) then that would be amazing but if not, I can save it for a later question.</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