title: Custom CSS on ASP.Net menu not applying
body: <p>I am working on a custom menu control in ASP.Net.</p>
  
  <p>I've created a separate new project on ASP.Net webform c# for menu and finally get the desire output which I want.</p>
  
  <p><strong>Desire Output</strong></p>
  
  <p><a href="https://i.stack.imgur.com/hK1Th.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hK1Th.png" alt="enter image description here"></a></p>
  
  <p>Now when I put menu control css and other HTML code in my running application which is on VB.Net then all custom css was gone and ASP.Net default CSS Classes override it. Below is my current output:</p>
  
  <p><a href="https://i.stack.imgur.com/OFwsv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OFwsv.png" alt="enter image description here"></a></p>
  
  <p>Here is my masterpage code:</p>
  
  <pre><code>&lt;asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" /&gt;
  &lt;asp:Menu
          ID="Menu"
          runat="server"
          DataSourceID="SiteMapDataSource1"
          Orientation="Horizontal"
          OnMenuItemDataBound="OnMenuItemDataBound"
          IncludeStyleBlock="false"
          StaticEnableDefaultPopOutImage="false"
          CssClass="AHMenu"&gt;
          &lt;LevelSubMenuStyles&gt;
              &lt;asp:SubMenuStyle CssClass="AHlevel1" /&gt;
              &lt;asp:SubMenuStyle CssClass="AHlevel2" /&gt;
              &lt;asp:SubMenuStyle CssClass="AHlevel3" /&gt;
              &lt;asp:SubMenuStyle CssClass="AHlevel4" /&gt;
              &lt;/LevelSubMenuStyles&gt;
              &lt;LevelMenuItemStyles&gt;
              &lt;asp:MenuItemStyle CssClass="AHlevel1Style" /&gt;
              &lt;asp:MenuItemStyle CssClass="AHlevel2Style" /&gt;
              &lt;asp:MenuItemStyle CssClass="AHlevel3Style" /&gt;
              &lt;asp:MenuItemStyle CssClass="AHlevel4Style" /&gt;
              &lt;/LevelMenuItemStyles&gt;
  &lt;/asp:Menu&gt;
  </code></pre>
  
  <p>In browser view source all my CSS gone and override with default CSS. As shown below:</p>
  
  <p><a href="https://i.stack.imgur.com/6J8Zr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6J8Zr.png" alt="enter image description here"></a></p>
  
  <p>Here is my CSS:</p>
  
  <pre><code>#Menu &gt; ul.AHlevel1 &gt; li:hover {
    background-color: white;
  }
  
  #Menu &gt; ul.AHlevel1 &gt; 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;
  }
  </code></pre>