子菜单背景色未覆盖整个文本

Question

我无法让背景颜色覆盖子菜单的文本...这是快照 我的代码如下：

<asp:Menu ID="Menu1" runat="server" orientation="Horizontal" CssClass="menusetting" BorderColor="#0070C0" BorderStyle="Solid" Font-Names="Arabic Typesetting" DisappearAfter="20000" Font-Size="Large">
    <StaticHoverStyle BackColor="#999999" Width="100%" />
    <DynamicHoverStyle BackColor = "#FF99FF" Width="100%" />
    <DynamicMenuItemStyle BackColor = "#66CCFF" Width="100%" />
        <Items>
            <asp:MenuItem NavigateUrl="Nav1" Text="Home" Value="0"></asp:MenuItem>
            <asp:MenuItem NavigateUrl="Nav2" Target="_blank" Text="TAU Realtime Trading Account" Value="10"></asp:MenuItem>
            <asp:MenuItem NavigateUrl="Nav3" Text="Create Trial Account" Value="Create Trial Account"></asp:MenuItem>
            <asp:MenuItem Text="Log on" Value="Log on" NavigateUrl="Nav4"></asp:MenuItem>
            <asp:MenuItem NavigateUrl="Nav5" Text="Contact Us" Value="9997"></asp:MenuItem>
            <asp:MenuItem Text="Product Overview" Value="Product Overview">
                    <asp:MenuItem NavigateUrl="Nav6" Target="_blank" Text="Kaizen (Trade Setup)" Value="30"></asp:MenuItem>
                    <asp:MenuItem NavigateUrl="Nav7" Target="_blank" Text="TAU Presentation" Value="9995"></asp:MenuItem>
                    <asp:MenuItem NavigateUrl="Nav8" Text="ULTRA Elements" Value="10" Target="_blank"></asp:MenuItem>
                    <asp:MenuItem NavigateUrl="Nav9" Text="ULTRA Events" Value="20" Target="_blank"></asp:MenuItem>
                    <asp:MenuItem NavigateUrl="Nav10" Text="ULTRA Options" Value="40"></asp:MenuItem>
                    <asp:MenuItem NavigateUrl="Nav11" Target="_blank" Text="ULTRA Presentation" Value="9996"></asp:MenuItem>
            </asp:MenuItem>
        </Items>
    </asp:Menu>

CSS 如下：

.menusetting
{
    float: right !important;
    width: 100%;
}

Answer 1

这可能是由于float 属性，它改变了元素的流动方式和浏览器的大小。

如今，除了在图像或其他元素周围重排文本之外，浮动通常不是最佳实践。几乎可以肯定还有另一种定位菜单的方法不会导致此问题。