Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Pseudo-classes not working for main navigation links
    primarykey
    data
    text
    <p>Code:</p> <pre><code>a:link { color: #111111; } a:visited { color: #1b3a57; } a:hover { color: #f3371c; } </code></pre> <p>I have heaps of links on my site. And these states are working fine with, for example, the Footer text (links) and general body links. But the main navigation links and sub header links do not change state.</p> <p>I have tested in IE 5+, Chrome, Opera, Safari, Maxthon, and FireFox but I get the same result.</p> <p>What could cause this type of behaviour?</p> <p><hr/> Update:</p> <p>Header code:</p> <pre><code>#Header { width: 100%; height: 120px; background-image: url('/Shared/Assets/Images/OrangeDot.png'); background-position: center bottom; background-repeat: repeat-x; } #Header #MainLogo { float: left; } </code></pre> <p>Sub Header code:</p> <pre><code>#SubHeader { width: 100%; height: max-content; } #SubHeader ul { float: left; margin: 20px 0 0 0; } #SubHeader ul li img { line-height: 1.5em; margin: -.30em 0; } #SubHeader ul li { padding: 0 10px 0 10px; } #SubHeader ul li a { font-size: small; /*color: #f3371c;*/ } </code></pre> <p><hr/> HTML Mark-up:</p> <pre><code> &lt;ul id="MainNavigation" class="HorizontalMenu WithBullets"&gt; &lt;li&gt;&lt;a class="HighlightedMenuOption" href="@Href("~/Home")"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Protected/Account/")"&gt;Sign In | Register&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Support/")"&gt;Support&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/")"&gt;About Us&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/")"&gt;Contact Us&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="SubHeader"&gt; &lt;div id="categories" class="s_nav"&gt; &lt;ul&gt; &lt;li id="menu_home"&gt; &lt;a href="@Href("~/Home")"&gt;Home&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt; &lt;div class="s_submenu"&gt; &lt;h3&gt;Categories&lt;/h3&gt; &lt;ul class="s_list_1 clearfix"&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;span class="clear border_eee"&gt;&lt;/span&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt; &lt;div class="s_submenu"&gt; &lt;h3&gt;Categories&lt;/h3&gt; &lt;ul class="s_list_1 clearfix"&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;span class="clear border_eee"&gt;&lt;/span&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt; &lt;div class="s_submenu"&gt; &lt;h3&gt;Categories&lt;/h3&gt; &lt;ul class="s_list_1 clearfix"&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;span class="clear border_eee"&gt;&lt;/span&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt; &lt;div class="s_submenu"&gt; &lt;h3&gt;Categories&lt;/h3&gt; &lt;ul class="s_list_1 clearfix"&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;span class="clear border_eee"&gt;&lt;/span&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;Tek Screws&lt;/a&gt; &lt;div class="s_submenu"&gt; &lt;h3&gt;Categories&lt;/h3&gt; &lt;ul class="s_list_1 clearfix"&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="@Href("~/Shared/Products/")"&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;span class="clear border_eee"&gt;&lt;/span&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&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.
 

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