Question

我正在开发ASP.Net中的自定义菜单控件。

我已经在ASP.Net webform c＃上为菜单创建了一个单独的新项目，最终获得了我想要的输出。

欲望输出

现在，当我将菜单控件css和其他HTML代码放在VB.Net上运行的应用程序中时，所有自定义css都消失了，ASP.Net默认的CSS Classes覆盖了它。以下是我目前的输出：

这是我的主页代码：

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
<asp:Menu
        ID="Menu"
        runat="server"
        DataSourceID="SiteMapDataSource1"
        Orientation="Horizontal"
        OnMenuItemDataBound="OnMenuItemDataBound"
        IncludeStyleBlock="false"
        StaticEnableDefaultPopOutImage="false"
        CssClass="AHMenu">
        <LevelSubMenuStyles>
            <asp:SubMenuStyle CssClass="AHlevel1" />
            <asp:SubMenuStyle CssClass="AHlevel2" />
            <asp:SubMenuStyle CssClass="AHlevel3" />
            <asp:SubMenuStyle CssClass="AHlevel4" />
            </LevelSubMenuStyles>
            <LevelMenuItemStyles>
            <asp:MenuItemStyle CssClass="AHlevel1Style" />
            <asp:MenuItemStyle CssClass="AHlevel2Style" />
            <asp:MenuItemStyle CssClass="AHlevel3Style" />
            <asp:MenuItemStyle CssClass="AHlevel4Style" />
            </LevelMenuItemStyles>
</asp:Menu>

在浏览器视图源中，我的所有CSS都消失了，并使用默认CSS覆盖。如下图所示：

这是我的CSS：

#Menu > ul.AHlevel1 > li:hover {
  background-color: white;
}

#Menu > ul.AHlevel1 > li:hover a.AHlevel1Style {
  color: black !important;
}

.AHMenu {
  float: none !important;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1965b0;
}

.AHMenu * {
  float: none !important;
}

.AHMenu a:hover {
  text-decoration: none;
}

.AHMenu .AHlevel1Style {
  cursor: pointer;
  color: white;
}

.AHMenu .AHlevel2Style, .AHMenu .AHlevel3Style, .AHMenu .AHlevel4Style {
  color: #1965b0;
}

.AHMenu .AHlevel4Style {
  cursor: pointer;
}

.AHMenu .AHlevel1 {
  order: 0;
  margin-bottom: 0;
  padding: 0;
  width: inherit !important;
}

.AHMenu .AHlevel1 li {
  display: inline-block;
  position: static !important;
  padding: 12px;
}

.AHMenu .AHlevel2 {
  /*display: block !important;*/
  background: white;
  width: inherit !important;
  padding: 0 40px;
  border: 1px solid #1965b0;
  border-top: none;
  /*border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;*/
  height: 250px;
}

.AHMenu .AHlevel2 li {
  display: inline-block;
  position: relative !important;
  width: 200px;
  padding: 12px 0;
  padding-bottom: 0;
}

.AHMenu .AHlevel3 {
  display: block !important;
  padding: 0;
  background: white;
  left: 0 !important;
  top: 70px !important;
  border-bottom: 2px solid #1965b0;
}

.AHMenu .AHlevel3 li {
  font-weight: 700;
  font-family: calibri;
  font-size: 19px;
  display: inline-block;
  position: initial;
  width: auto;
  margin: 6px 0;
  padding: 0;
}

.AHMenu .AHlevel4 {
  display: block !important;
  padding: 0;
  background: white;
  left: 22px !important;
  top: 38px !important;
}

.AHMenu .AHlevel4 li {
  font-family: calibri;
  font-size: 14px;
  display: inline-block;
  position: initial;
  width: auto;
  padding: 0;
  margin: 0;
  font-weight: 300;
  white-space: nowrap;
}

.AHMenu .AHlevel4 li:before {
  content: "►";
  display: block;
  float: left;
  width: 1.2em;
  color: #1965b0;
}

#AHMenu::after {
  content: '';
  flex-grow: 1;
  order: 0;
}

ASP.Net菜单上的自定义CSS不适用

0 个答案: