Home/ Questions/Q 4014588
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T09:30:54+00:00

<%@ Page Language=C# AutoEventWireup=true Theme=SF CodeBehind=ULLITest.aspx.cs Inherits=ClickDoors_WebApp.ULLITest %> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0

  • 0
<%@ 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 hover over it background-color is changed immediately but font color remains same until i hover over text.

In short i want my menu to behave similar to stackoverflows menu (Questions Tags Users….)

Any help will be appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’d do it like this:

    1. Set your <a> tags to display:block

    2. Remove the padding from your <li>‘s (make it padding:0px)

    3. Re-add the padding to your <a> tags padding:7px 10px 7px 10px;

    4. Add background-color:#ffcc00; to #Menu a:hover

    5. Get rid of #Menu li:hover

    • 0