0

私は ASP:Menu を使用しており、メニューを以下のように表示したいと考えています。CSS の適用方法と、どのような変更を加える必要があるかを提案してください。

製品

  • 在庫あり
  • 在庫切れ

注文

  • 注文書
  • 販売注文
    • バックオーダー
    • 請求書

ASP:メニューコードは以下の通りです。

<asp:Menu runat="server" ID="Navigator" MaximumDynamicDisplayLevels="0" StaticDisplayLevels="3" 
Orientation="Vertical" DataSourceID="RelativeSiteMapDataSource"   />

Update1: ASP:menu によって生成される現在の html を以下に示します。

<ul class="Menu"> 
<li class="Menu-Leaf"><a href="prodxeon/products.aspx"; class="Menu-Link" title="Products">Products</a></li>
<li class="Menu-Leaf"><a href="prodxeon/orders.aspx"; class="Menu-Link" title="Orders">Orders</a></li> 
    <ul>
        <li class="Menu-Leaf"><a href="http://pdxeon/po.aspx" class="Menu-Link" title="Purchase Orders">Purchase Orders</a></li>
        <li class="Menu-Leaf"><a href="http://pdxeon/so.aspx" class="Menu-Link" title="Sales Orders">Sales Orders</a></li>
            <ul>    
                <li class="Menu-Leaf"><a href="http://pdxeon/Bso.aspx" class="Menu-Link" title="Back Orders">Back Orders</a></li>               
                <li class="Menu-Leaf"><a href="http://pdxeon/iso.aspx" class="Menu-Link" title="Invoices">Invoices</a></li>
            </ul>
    </ul>

4

1 に答える 1

0

このCSSを使用できます。

ul.Menu {  margin:0 1.5em 1.5em 1.5em; }
ul.Menu li {     list-style-type:disc; }
ul.Menu ul {     margin:0 3em 1.5em 1.5em; }

HTMLが壊れていることに注意してください。

<li class="Menu-Leaf"><a href="http://pdxeon/so.aspx" class="Menu-Link" title="Sales Orders">Sales Orders</a></li>
     <ul>   <--- this should be before the </li>. Lists must be nested. Any tag outside </li> is illegal.

ネストされたリストは、次のパターンに従う必要があります。

<ul>
    <li>
       <ul>
           <li>...</li>
       </ul>
    </li>
</ul>

これは、.NETコントロールの問題の1つです。HTMLからの分離が多すぎて、HTMLが実際にどのように機能するかを理解していなくても、開発者が物事をすばやく行うための便利な方法を提供します。

于 2012-08-28T17:22:39.473 に答える