asp.net中子菜单和父菜单的分离设计答案

【问题标题】：Separate design for child and parent menu in asp.netasp.net中子菜单和父菜单的分离设计
【发布时间】：2014-03-19 12:43:58
【问题描述】：

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

1) 我怎样才能像父级一样停止子级设计中的反射。 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>

输出（我得到了什么）-

【问题讨论】：

我不确定您为什么将 XAML 标记添加到问题中。
xaml 标签是否错误？我不这么认为。
我想到的 XAML 是可扩展应用程序标记语言，它是 WPF、Silverlight 和 Windows 应用程序的主要标记语言。我在您的代码示例中没有看到任何 XAML。
好的，现在我已经删除了标签

标签： asp.net css

【解决方案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>

【讨论】：