CssClass 不适用于我的 asp 菜单 - 附加所有代码答案

【问题标题】：CssClass is not working for my asp menu - all code attachedCssClass 不适用于我的 asp 菜单 - 附加所有代码
【发布时间】：2013-03-12 13:02:48
【问题描述】：

我将完全相同的 css 和 asp 代码复制并粘贴到另一个项目中，但 CSS 无法用于 asp:menu 控件，我无法弄清楚。此外，当我查看源代码时，菜单正在创建自己的样式块。

我很容易提供帮助，您只需复制并粘贴下面的整页代码和 CSS。非常感谢您的帮助。

这是完整的 aspx 页面：

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="testing.aspx.vb" Inherits="eCASVS2005.testing" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolKit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
<title></title>

<%="" %>

<link href="eCASScripts/cssMasterPage.css" rel="stylesheet" type="text/css" />
<% If False Then%> <!-- fix for seeing css in design view and handling url after deployed -->
<link href="<%= Page.ResolveUrl("~/eCASScripts/cssMasterPage.css")%>" rel="stylesheet" type="text/css" />
<% End If%>

</head>

<body>

<form id="Form1" runat="server" enctype="multipart/form-data" method="post">

<div class="page">
    <div class="header left">
        <div class="title left">
            <h1>
                MLG Dispatch Manager
            </h1>
        </div>
        <div class="left">
            <asp:Menu ID="NavigationMenu" 
            runat="server" 
            CssClass="myMenu" 
            EnableViewState="false" 
            IncludeStyleBlock="false" 
            Orientation="Horizontal">
                <Items>
                    <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                    <asp:MenuItem NavigateUrl="" Text="Dispatch">
                        <asp:MenuItem NavigateUrl="~/Dispatch/NewDispatchEntry.aspx" Text="New Entry" />
                        <asp:MenuItem NavigateUrl="~/Dispatch/SearchDispatchEntries.aspx" Text="Find Existing" />
                        <asp:MenuItem NavigateUrl="~/Dispatch/ViewDispatchHistory.aspx" Text="View History" />
                    </asp:MenuItem>
                    <asp:MenuItem NavigateUrl="" Text="Maintenance">
                        <asp:MenuItem NavigateUrl="~/Maintenance/EditTrailers.aspx" Text="Edit Trailers" />
                        <asp:MenuItem NavigateUrl="~/Maintenance/EditCarriers.aspx" Text="Edit Carriers" />
                        <asp:MenuItem NavigateUrl="~/Maintenance/EditDrivers.aspx" Text="Edit Drivers" />
                    </asp:MenuItem>
                    <asp:MenuItem NavigateUrl="~/UnderConstruction.aspx" Text="Help"/>
                </Items>
            </asp:Menu>
        </div>
        <div id="loggedInText" class="loginDisplay right" runat="server">
            logged in: [User Name]
        </div>
    </div>

</div>
</form>
</body>
</html>

这是完整的 CSS：

/* DEFAULTS
----------------------------------------------------------*/


body   
{
    background: #b6b7bc;
    font-size: .80em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
    height:100%;
}

a:link, a:visited
{
    color: #034af3;
}

a:hover
{
    color: #1d60ff;
    text-decoration: none;
}

a:active
{
    color: #034af3;
}

p
{
    margin-bottom: 10px;
    line-height: 1.6em;
}

table
{
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #666666;
    /* font-variant: small-caps; */
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}

h1
{
    font-size: 1.5em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2
{
    font-size: 1.5em;
    font-weight: 600;
}

h3
{
    font-size: 1.2em;
}

h4
{
    font-size: 1.1em;
}

h5, h6
{
    font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0px;
}

.state
{
    width:116px;
}


/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page
{
    width: 1020px;
    background-color: #fff;
    margin: 40px auto 0px auto;
    border: 1px solid #496077;
}

.widthFullPx
{
    width: 900px;
}

.header
{
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #4b6c9e;
    width: 100%;
}

.header h1
{
    font-weight: 700;
    margin: 0px;
    padding: 0px 0px 0px 20px;
    color: #f9f9f9;
    border: none;
    line-height: 2em;
    font-size: 1.5em;
}

.main
{
    padding: 0px 12px;
    /*min-height:500%;*/
    min-height:100%;
    margin-right: 8px;
    margin-top: 10px;
    margin-bottom: 8px;
}

.leftCol
{
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}

.footer
{
    color: #4e5766;
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
}

#headerSeparator
{
    background-color:White;
    width:1px;
    height:35px;
    margin:0px 0px 0px 10px;
}


/* TAB MENU   
----------------------------------------------------------*/

div.myMenu > ul > li
{ 
    display: inline-block;
    list-style: none; 
} 

div.myMenu ul li ul 
{ 
    display: none; 
}

div.hideSkiplink
{
    background-color:#3a4f63;
    width:100%;
}

div.myMenu
{
    padding: 5px 0px 5px 40px;
}

div.myMenu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.myMenu ul li a, div.myMenu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.myMenu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.myMenu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}

/* FORM ELEMENTS   
----------------------------------------------------------*/

fieldset
{
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}

bolFieldSet 
{
    background-color:Fuchsia;
    margin: 1em 0px 1 0;
    padding: 0em;
    border: 1px solid #ccc;
}

fieldset p 
{
    margin: 2px 12px 10px 10px;
}

fieldset.login label, fieldset.register label, fieldset.changePassword label
{
    display: block;
}

fieldset label.inline 
{
    display: inline;
}

legend 
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input.textEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

input.passwordEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

div.accountInfo
{
    width: 42%;
}

/* MISC  
----------------------------------------------------------*/

.hidden{display: none;}

.autowidth
{
    width:auto;
}

.width100pct
{
    width:100%;
}

.largetext
{
    font-size:large;
}

.medtext
{
    font-size:medium;
}

.clear
{
    clear: both;
}

.center
{
    text-align: center;
    vertical-align:middle;
}

.left /* floats left */
{
    float:left;
}

.right /* floats right */
{
    float:right;
}

就像我说的一样，这个完全相同的代码正在另一个项目中工作，我无法弄清楚这一点。每个都有相同的css版本，2.1。谢谢。 -泰勒

【问题讨论】：

检查元素，看看它的渲染效果！
我在您的 CSS 中找不到名为 menu 的类。 CSS 中唯一的东西是一个名为myMenu 的类。这可能是你问题的根源吗？
@sven - 我在写这篇文章的时候正在玩css，我编辑了它以再次匹配...... myMenu 应该是asp控件上的类，但不起作用......跨度>
我看到 div.myMenu，但我不确定 ASP 如何呈现 <asp:Menu ID="NavigationMenu"... 是否将其转换为 <div> 或 <nav> 标签？检查您实际呈现的 HTML。此外，在未来，发布所有内容可能会损害获得良好/快速响应。尽管人们会传递它，但它变得难以阅读。尝试更加集中注意力会有所帮助。
@jmbertucci 它通常呈现为一个 div 标签......但在这种情况下它呈现为一个表格......我做了进一步的研究并找到了一个解决方案。感谢您的所有帮助，每个人都非常感谢。

标签： asp.net css aspmenu

【解决方案1】：

感谢这里用户的一些指导，我发现了这个问题。检查菜单控件元素后，它呈现为<table>，而我曾经使用过此控件的所有其他项目都呈现为<div>

这是与其他有相同情况的人的链接：

http://forums.asp.net/t/1613711.aspx

对我来说简单的解决方案是将属性 RenderingMode="List" 添加到我的 asp:menu 中，它解决了我的问题。

感谢所有帮助过的人。

【讨论】：