Question

我的超级菜单在菜单的一半时表现正常。另一半被推向右边太多了。这里有CSS专家知道为什么吗？我正在我的项目中使用bootstrap。

css不是硬编码的，我的代码来自firebug

这是了解asp.net

的真实代码

<asp:Repeater ID="ParentRepeater" runat="server" OnItemDataBound="ParentRepeater_OnItemBound">
    <HeaderTemplate>
        <ul id="mega-menu-1" class="nav navbar-nav mega-menu">
            <li><a href="<%: FriendlyUrl.Href("~/Default") %>">Hem</a></li>
    </HeaderTemplate>
    <ItemTemplate>
        <li><a href="#"><%# DataBinder.Eval(Container.DataItem, "ParentCatName") %></a>
            <asp:Repeater ID="ParentCatRepeater" runat="server" OnItemDataBound="ChildRepeater_OnItemBound">
                <HeaderTemplate>
                    <ul>
                </HeaderTemplate>
                <ItemTemplate>
                    <li><a href="<%# FriendlyUrl.Href("~/Category", DataBinder.Eval(Container.DataItem, "CategoryID")) %>"><%# DataBinder.Eval(Container.DataItem, "CategoryName") %></a>
                        <asp:Repeater ID="ChildRepeater" runat="server">
                            <HeaderTemplate>
                                <ul>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <li>
                                    <%-- <asp:HyperLink ID="Linkproduct" NavigateUrl="" runat="server"><%# DataBinder.Eval(Container.DataItem, "ProductName") %></asp:HyperLink>--%>
                                    <a href="<%# FriendlyUrl.Href("~/Product", DataBinder.Eval(Container.DataItem, "ProductID")) %>"><%# DataBinder.Eval(Container.DataItem, "ProductName") %></a>

                                </li>
                            </ItemTemplate>
                            <FooterTemplate>
                                </ul>
                            </FooterTemplate>
                        </asp:Repeater>
                    </li>

                </ItemTemplate>
                <FooterTemplate></ul></FooterTemplate>
            </asp:Repeater>
        </li>
    </ItemTemplate>
    <FooterTemplate>
        </ul>
    </FooterTemplate>
</asp:Repeater>

Answer 1

因为你的html中有style=值硬编码。

您的HTML：

<li class="dc-mega-li"><a href="#" class="dc-mega">Penslar<span class="dc-mega-icon"></span></a>

    <div class="sub-container mega" style="left: 311px; margin-left: -141px; top: 50px; z-index: 1000;">

应该是：

<li class="dc-mega-li"><a href="#" class="dc-mega">Penslar<span class="dc-mega-icon"></span></a>

    <div class="sub-container mega">

http://jsfiddle.net/jdc1dmvn/11/

一般的经验法则是不惜一切代价避免使用style属性。

Answer 2

在你的css你需要更改左css属性，因为在半菜单中你得到left: 0;而在下半部分超过300px; plesse check .sub-container和内联样式

Answer 3

你不应该对它进行硬编码。但问题在于引导程序。

如果您从此css行中删除position: relative，它将有效。

.nav>li {  //bootstrap.min.css : line 5
position: relative;
display: block;
}

或者您可以将其添加到您自己的css文件中（如果它在引导后加载），否则您可能需要使用!important

.nav > li{
    position:static;
}

超级菜单css错误

3 个答案: