All geek questions in one place

Vertical menu CSS UL LI

<%@ Page Language="C#" AutoEventWireup="true" Theme="SF" CodeBehind="ULLITest.aspx.cs" Inherits="ClickDoors_WebApp.ULLITest" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> #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; } </style> </head> <body> <form id="form1" runat="server"> <div> <ul id="Menu"> <li><a href="#">Internal Doors</a></li> <li><a href="#">Prefinished Internal Doors</a></li> <li><a href="#">External Doors</a></li> <li><a href="#">Internal Pair [French Doors]</a></li> <li><a href="#">External Pair [French Doors]</a></li> <li><a href="#">Custom Size Doors</a></li> <li><a href="#">Door Frames</a></li> <li>Test</li> </ul> </div> </form> </body> </html>

When I am above it, the background color immediately changes, but the font color remains the same until I hang the text.

In short, I want my menu to be similar to the stackoverflows menu (tag user questions ....)

Any help would be appreciated.

+4
source share
4 answers

I would do it like this:

  • Set the <a> tags to display:block

  • Remove padding from your <li> (make it padding:0px )

  • Re-add padding for <a> padding:7px 10px 7px 10px; tags padding:7px 10px 7px 10px;

  • Add background-color:#ffcc00; in #Menu a:hover

  • Get #Menu li:hover of #Menu li:hover

+5
source

you must add #Menu li:hover a {color:White;} . When li is set, white will be set to a .

Demo: http://jsfiddle.net/Nceef/

+3
source

Give these css properties:

 #Menu a {display:block} #Menu a:hover,active {color:#text-color;background:#background-color;}
+1
source 
 #Menu li { border-bottom:1px solid #eeeeee; } #Menu li a:hover { color:White; background-color:#ffcc00; } #Menu a:link { color:#717171; text-decoration:none; display:block; padding: 7px 10px; }

The only drawback of this method is your list items in which the anchors will not be inserted correctly.

Demo

http://jsfiddle.net/loktar/F6UGv/

+1
source

Source: https://habr.com/ru/post/1341830/

More articles:


All Articles