带有填充的菜单项的悬停问题

时间:2012-04-01 10:42:54

标签: c# asp.net css menu hover

以下是我正在处理的示例代码:

    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>Untitled Page</title>
    <style type="text/css">
        .menu
        {
            border: 1px solid #C0C0C0;
            color: #FFFFFF;
            background-color: #66A6CC;
            font-family: Cambria;
            text-align: justify;
            font-size: medium;
            width: 200px;
            padding:8px;
            padding-left:0px;
            text-indent:10px;
            display:inline-table;
        }
        .menu:hover
        {
            background-color: #FFFFA6;
            color: #000000;
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="float:left; margin:10px;">
        <asp:Menu ID="Menu1" runat="server" StaticMenuItemStyle-CssClass="menu" >
            <Items>
                <asp:MenuItem Text="Menu row" Value="menurow"  
                    NavigateUrl="Default2.aspx" ></asp:MenuItem>
                <asp:MenuItem Text="Menu row" Value="menurow1" 
                    NavigateUrl="Default2.aspx" ></asp:MenuItem>
                <asp:MenuItem Text="Menu row" Value="menurow2" 
                    NavigateUrl="Default2.aspx" ></asp:MenuItem>
            </Items>
        </asp:Menu>
    </div>
    </form>
</body>
</html>

我有悬停问题。 Here it is.

整个细胞应该变成黄色,但由于填充不会这样做。

编辑:我删除了填充但同样的事情又发生了。我认为这是因为显示类型。我尝试了大多数显示类型,但它们不方便菜单。

解决方案:Chrome在渲染某些组件时出现问题。有在线解决方案,请谷歌“ASP.NET chrome菜单问题”。

2 个答案:

答案 0 :(得分:1)

我通过复制HTML代码来实现它。我唯一改变的是在“.menu:hover”类中添加了一个缺少的右括号。

我在Firefox和Internet Explorer 8中测试了该页面。

填充不应该导致黄色悬停的任何问题。您使用的浏览器是什么?

答案 1 :(得分:1)

这是你的代码输出在我的chrome中,填充18px:

enter image description here