html - How to add style to link in this drop down menu -

I have this drop-down menu that I found on the site:

  Lt; Style & gt; Body {background: # E3CAA1;} ul (font size: 13px; Font-family: 'lucida grande', 'helvetia new', helvetica, ariel, non-serif; Text align: center; Display: Inline; Margin: 0; Padding: 15px 4px 17px 0; List style: none; -WebKit-box-shadow: 0 to 5 px RGBA (0, 0, 0, 0.15); -MOZ-BOX-SHADOW: 0 0 5 PX RGBA (0, 0, 0, 0.15); Box-shadow: 0 to 5 px RGBA (0, 0, 0, 0.15); } Ul li {font: bold 12px / 18px sans-serif; Display: Inline-block; Margin-right: -4 pixel; Status: Relative; Padding: 15px 20px; Background: #fff; Cursor: indicator; -WebKit-Infection: all 0.2S; -Mozy-infected: all 0.2 s; -M transition: all 0.2 s; -O-Infection: all 0.2 s; Infection: all 0.2 s; } Ul Lee: Hover {background: # 555; Color: #fff; } Ul Lee al [Padding: 0; Status: Completed; Top: 48px; Left: 0; Width: 150px; -WebKit-Box-Shadow: None; -Moz Box-Shadow: None; Box-Shadow: None; display none; Opacity: 0; Visibility: hidden; Webkit-transit: ambiguity 0.2S; -Mozy-infected: ambiguity 0.2S; -M-Infection: Opacity 0.2S; -O-Infection: Opacity 0.2S; -Management: Opacity 0.2S; } UL Li Ul Lee {background: # 555; Display area; Color: #fff; Lesson: 0-1px 0 # 000; } UL Lee UL Lee: Hover {background: # 666; } Ul li: hover ul (display: block; Opacity: 1; Visibility: visible; } & Lt; / Style & gt; & Lt; Div style = "text-align: right; padding: 20px 50px 150px;" & Gt; & Lt; Ul & gt; & Lt; Li & gt; Home and lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; About & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; Portfolio & lt; Ul & gt; & Lt; Li & gt; Web Design & lt; / Li & gt; & Lt; Li & gt; Web Development & lt; / Li & gt; & Lt; Li & gt; Drawing & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; Blogs & lt; / Li & gt; & Lt; Li & gt; Contact & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;  

When I tried to change the simple text to link effects, I did not apply it because I used this line css

  ul li a {text-decoration: none; Color: # 000; }  

and

  ul li: hover, ul li a: hover {background: # 555; Color: #fff; }  

Now it is working almost fine, but the hover effect of the link occurs only when I hover over the link, but I want the cursor to enter the block as soon as possible. , I.e. when the background & lt; Li & gt; Changes in Can you help me with this? Apart from this, I have the whole and lt; Li & gt; needs a block to work as a link, that is, the user is not obliged to click on the text only, but help anywhere inside the block.

Try changing your CSS:

  ul li: hover & Lt; Ul li a, ul li a: hover {background: # 555; Colof: #fff; }  

Before you modify it, the initial CSS works perfectly: