asp.net中的子菜​​单和父菜单分开设计

Question

我在asp.net中用css设计了菜单。当我设置父菜单设计时，它也反映在孩子身上。我为孩子计划了单独的设计。

1）如何在父设计中停止Child设计中的反射。 2）如何设计子菜单。

我的设计（我想要的） -

我在下面提供了我的代码

CSS -

 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;
        }

XAML -

 <asp:Menu ID="mainMenu" runat="server" Orientation="Horizontal" CssClass="menu" autopostback="true">
            <Items>
                <asp:MenuItem Text="Menu1" NavigateUrl="#">
                    <asp:MenuItem Text="Menu1" NavigateUrl="#" />
                    <asp:MenuItem Text="Menu2" NavigateUrl="#" />
                    <asp:MenuItem Text="Menu3" NavigateUrl="#" />
                    <asp:MenuItem Text="Menu4" NavigateUrl="#" />
                    <asp:MenuItem Text="Menu5" NavigateUrl="#" />
                </asp:MenuItem>
                <asp:MenuItem Text="Menu2" NavigateUrl="#" >
                    <asp:MenuItem Text="Menu1" NavigateUrl="#" />
                    <asp:MenuItem Text="Menu2" NavigateUrl="#" />

                </asp:MenuItem>
                <asp:MenuItem Text="Menu3" NavigateUrl="#" />
                <asp:MenuItem Text="Menu4" NavigateUrl="#" />
                <asp:MenuItem Text="Menu5" NavigateUrl="#" />
            </Items>
        </asp:Menu>

OutPut（我的意思） -

Answer 1

以下是构建第二级下拉菜单的CSS代码。

首先你必须建立一个子菜单，然后你必须隐藏它，并且在悬停时你可以使它们可见。这是工作Demo。

/*NEw lines Added to make a Submenu */

div.menu ul li ul
{padding:0 margin:0 -webkit-border-radius: 15px; border-radius: 15px;
-moz-border-radius: 15px;background: gold; width:150px; display:none; position:absolute; right:0; }

div.menu ul li ul li{border-bottom:1px solid black;border-right-style:none;  }

div.menu ul li ul li:hover{ border:0 none;}
div.menu ul li:hover >ul {display:block;}

这是一个虚拟HTML代码。

<div class="menu">
    <ul>
      <li>Menu 1</li>
      <li>Menu 2</li>
      <li>Menu 3</li>
      <li>Menu 4</li>
      <li>Menu 5 
      <ul>
         <li>Sub Menu 5.1</li>
         <li>Sub Menu 5.2</li>
         <li>Sub Menu 5.3</li>
      </ul>
      </li>
    </ul>   
  </div>