Note that there are some explanatory texts on larger screens.

plurals
  1. POusing CSS psuedo-class :first-child
    primarykey
    data
    text
    <p>Trying to set up a menu so that I have border-left on each menu item but the border is excluded from the first item.</p> <p>site: <a href="http://www.rogersinternational.com" rel="nofollow">http://www.rogersinternational.com</a></p> <p>CSS:</p> <pre><code>#access { background: #414731; display: block; float: left; margin: 0 auto; width: 900px; height: 42px; text-transform: uppercase; } #access .menu-header, div.menu { font-size: 13px; margin-left: 14px; width: 900px; } #access .menu-header ul, div.menu ul { list-style: none; margin: 0; } #access .menu-header li, div.menu li { float: left; position: relative; } #access a { color: #a5af86; line-height: 38px; padding: 0 16px; text-decoration: none; border-left: 1px solid #5e6549; } #access a:first-child { border: none } #access ul ul { box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); display: none; position: absolute; top: 38px; left: 0; float: left; width: 180px; z-index: 99999; } #access ul ul li { min-width: 180px } #access ul ul ul { left: 100%; top: 0; } #access ul ul a { background: #414731; line-height: 1em; padding: 10px; width: 160px; height: auto; } #access li:hover &gt; a, #access ul ul :hover &gt; a { background: #414731; color: #fff; } </code></pre> <p>Menu:</p> <pre><code>&lt;div class="menu"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="http://www.rogersinternational.com/"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="http://www.rogersinternational.com/about"&gt;Company Profile&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="http://www.rogersinternational.com/products"&gt;Products&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="http://www.rogersinternational.com/solutions"&gt;Solutions&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="http://www.rogersinternational.com/photo-gallery"&gt;Photo Gallery&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="http://www.rogersinternational.com/technical-specs"&gt;Technical Specs&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="http://www.rogersinternational.com/contact"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>I can get it to recognize the psuedo-class in firebug, but the effect doesn't take place. Your help is appreciated.</p>
    singulars
    1. This table or related slice is empty.
    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