Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS UL LI Vertical Menu
    text
    copied!<pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" Theme="SF" CodeBehind="ULLITest.aspx.cs" Inherits="ClickDoors_WebApp.ULLITest" %&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head runat="server"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; #Menu { padding:0; margin:0; list-style-type:none; font-size:13px; color:#717171; width:100%; } #Menu li { border-bottom:1px solid #eeeeee; padding:7px 10px 7px 10px; } #Menu li:hover { color:White; background-color:#ffcc00; } #Menu a:link { color:#717171; text-decoration:none; } #Menu a:hover { color:White; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;form id="form1" runat="server"&gt; &lt;div&gt; &lt;ul id="Menu"&gt; &lt;li&gt;&lt;a href="#"&gt;Internal Doors&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Prefinished Internal Doors&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;External Doors&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Internal Pair [French Doors]&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;External Pair [French Doors]&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Custom Size Doors&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Door Frames&lt;/a&gt;&lt;/li&gt; &lt;li&gt;Test&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>When i hover over it background-color is changed immediately but font color remains same until i hover over text.</p> <p>In short i want my menu to behave similar to stackoverflows menu (Questions Tags Users....)</p> <p>Any help will be appreciated.</p>
 

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