从 asp.net 菜单中删除项目符号答案

【问题标题】：Removing bullets from asp.net menu从 asp.net 菜单中删除项目符号
【发布时间】：2014-07-02 07:00:57
【问题描述】：

我似乎无法摆脱菜单中的项目符号。谁能帮帮我？
母版页代码：

<asp:Menu ClientIDMode="Static" ID="main_menu" runat="server" Orientation="Horizontal">
       <StaticItemTemplate>
       <div class="nav_style">
            <asp:Label runat="server" Text='<%# Eval("Text") %>' /> 
       </div>
       </StaticItemTemplate>
   <Items>
       <asp:MenuItem NavigateUrl="~/home.aspx" Text="home" />
       <asp:MenuItem NavigateUrl="~/what-it-can-do.aspx" Text="what it can do" />
       <asp:MenuItem NavigateUrl="#" Text="pricing" />
       <asp:MenuItem NavigateUrl="#" Text="news & events" />
       <asp:MenuItem NavigateUrl="#" Text="partner with us" />
   </Items>
</asp:Menu>

这是我的 CSS 代码：

.nav_style
        {
            list-style-type:none;
            background-color:#242C32;
            border-radius:3px;
            color:#F5F5F5;           
            border-top:6px solid #242C32;
            border-bottom:6px solid #242C32;
            border-left:12px solid #242C32;
            border-right:12px solid #242C32;
            font:13px calibri;
        }

这是生成的 HTML：

<div id="main_menu">
    <ul class="level1">
        <li><a class="level1 selected" href="home.aspx">
                            <div class="nav_style">
                            <span>home</span> 
                            </div>
                        </a></li><li><a class="level1" href="what-it-can-do.aspx">
                            <div class="nav_style">
                            <span>what it can do</span> 
                            </div>
                        </a></li><li><a class="level1" href="#">
                            <div class="nav_style">
                            <span>pricing</span> 
                            </div>
                        </a></li><li><a class="level1" href="#">
                            <div class="nav_style">
                            <span>news & events</span> 
                            </div>
                        </a></li><li><a class="level1" href="#">
                            <div class="nav_style">
                            <span>partner with us</span> 
                            </div>
                        </a></li>
    </ul>
</div>

编辑
似乎没有任何答案对我有用，还有其他建议吗？谢谢。

【问题讨论】：

想法：将CssClass 的Menu 分配给nav_style。重新定义样式为nav_style ul(css)

标签： html css asp.net menu master-pages

【解决方案1】：

自己设法做到了。在我的 css 文件中，为整个页面的项目符号设置了背景

background:url('../img/blue_bullet.png')

所以我添加到我的 css 中

.nav_style li
     {
         background:none;
     }

【讨论】：

【解决方案2】：

重新定义css样式为：

.nav_style ul
{
    ...
}

从 div 中删除 nav_style 类。而是在 Menu 标记中使用 CssClass = "nav_style"。

【讨论】：

【解决方案3】：

仅供参考，刚刚开始，没有提到任何工作。检查呈现的 html 显示一个表格单元格被附加到我的列表项（整个菜单是一个表格呈现的结构）并使用项目符号图标作为来自 webkit 的背景图像。要覆盖它，请指定您自己的项目符号，在我的情况下，这没什么。所以我制作了一个 2x2px 白色 png 文件并指定了“静态弹出图像 url”(StaticPopoutImageURL) 控件属性，该属性用作子弹单元格的背景。菜单控件布局代码如下：

 <asp:Menu ID="MyMenu" runat="server"
                DisappearAfter="100"
                StaticDisplayLevels="1"
                Orientation="Vertical"
                StaticPopoutImageURL="/Images/White2x2px.png"
                CssClass="my anchor/ul styles">
                .....
    </asp:Menu>

希望这对某人有所帮助，因为我无法在任何地方找到答案。吉姆

【讨论】：

【解决方案4】：

试试这个：

#main_menu ul
{
    list-style:none;
}

【讨论】：

【解决方案5】：

试试这个用css重置它：

#main_menu *
{
   list-style: none; 
}

Demo

【讨论】：

【解决方案6】：

对于您生成的 HTML，以下块应该可以让您摆脱项目符号。

.level1
{
    list-style:none;
}

一种更通用的方法是使用以下内容来定位生成的<ul>：

#main_menu ul
    {
        list-style:none;
    }

一个工作示例：http://jsfiddle.net/U2Vgf/1/

【讨论】：