title: Separate design for child and parent menu in asp.net
body: <p>I have designed menu in asp.net with css. when i set the parent menu design, it reflect in child too. i have planed seperate design for child,. </p>
  
  <p>1) How can i stop the reflection in Child design as in parent.
  2) How can I design the Child menus.</p>
  
  <p>MY DESIGN (WHAT I WANT) -
  <img src="https://i.stack.imgur.com/QEikT.jpg" alt="enter image description here"></p>
  
  <p>I gave my code below</p>
  
  <p><strong>CSS-</strong></p>
  
  <pre><code> div.menu
          {
              height: 40px;
              width: 560px;
              background: #FDF378;          
              -webkit-border-radius: 15px;
              -moz-border-radius: 15px;
              border-radius: 15px;
              font-size:25px;   
              text-align:center;    
          }
  
          div.menu ul li
          {
              border-right-color:Blue;
              border-right-width:2px;
              border-right-style:groove;            
          }
  
           div.menu ul li:last-child {  
              border: none;
          }
  
          div.menu ul li:hover
          {
              border-top-style:solid;
              border-top-width:5px;
              border-top-color:Red;
          }
  </code></pre>
  
  <p><strong>XAML -</strong></p>
  
  <pre><code> &lt;asp:Menu ID="mainMenu" runat="server" Orientation="Horizontal" CssClass="menu" autopostback="true"&gt;
              &lt;Items&gt;
                  &lt;asp:MenuItem Text="Menu1" NavigateUrl="#"&gt;
                      &lt;asp:MenuItem Text="Menu1" NavigateUrl="#" /&gt;
                      &lt;asp:MenuItem Text="Menu2" NavigateUrl="#" /&gt;
                      &lt;asp:MenuItem Text="Menu3" NavigateUrl="#" /&gt;
                      &lt;asp:MenuItem Text="Menu4" NavigateUrl="#" /&gt;
                      &lt;asp:MenuItem Text="Menu5" NavigateUrl="#" /&gt;
                  &lt;/asp:MenuItem&gt;
                  &lt;asp:MenuItem Text="Menu2" NavigateUrl="#" &gt;
                      &lt;asp:MenuItem Text="Menu1" NavigateUrl="#" /&gt;
                      &lt;asp:MenuItem Text="Menu2" NavigateUrl="#" /&gt;
  
                  &lt;/asp:MenuItem&gt;
                  &lt;asp:MenuItem Text="Menu3" NavigateUrl="#" /&gt;
                  &lt;asp:MenuItem Text="Menu4" NavigateUrl="#" /&gt;
                  &lt;asp:MenuItem Text="Menu5" NavigateUrl="#" /&gt;
              &lt;/Items&gt;
          &lt;/asp:Menu&gt;
  </code></pre>
  
  <p><strong>OutPut (WHAT I GOT) -</strong></p>
  
  <p><img src="https://i.stack.imgur.com/yJrWc.jpg" alt="enter image description here"></p>