2012-06-19 3 views
0

:ASP.NET 정적 하위 클래스

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" staticdisplaylevels="2" 
    EnableViewState="False" IncludeStyleBlock="False" Orientation="Horizontal"> 
    <Items> 
     <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Homepage"> 
      <asp:MenuItem Text="New Element" Value="New Element"></asp:MenuItem> 
      <asp:MenuItem Text="New Element" Value="New Element"></asp:MenuItem> 
      <asp:MenuItem Text="New Element" Value="New Element"></asp:MenuItem> 
     </asp:MenuItem> 
     <asp:MenuItem NavigateUrl="~/About.aspx" Text="Info"/> 
    </Items> 
</asp:Menu> 

그건 단순한 정적 .NET 메뉴 제어 할 수 있습니다. staticdisplaylevels="2"을 사용하면 하위 메뉴가 맨 위에있는 메뉴 항목과 같은 행에 정적으로 표시됩니다. 하지만 하위 메뉴 항목이 상위 메뉴 항목 행 아래의 다른 행에 표시되기를 원합니다. 어떻게해야합니까? CSS로 배치 할 수있는 모든 하위 메뉴 항목에 CSS 클래스를 제공 할 수 있습니까?

<ul class="level1 static" tabindex="0" style="position: relative; width: auto; float: left;" role="menubar"> 

<li class="static" role="menuitem" style="position: relative; float: left;"> 
<a class="level1 static" href="Default.aspx" tabindex="-1">Homepage</a> 
</li> 

<li class="static" role="menuitem" style="position: relative; float: left;"> 
<a class="level2 static" href="#" tabindex="-1">New Element</a> 
</li> 

<li class="static" role="menuitem" style="position: relative; float: left;"> 
<a class="level2 static" href="#" tabindex="-1">New Element</a> 
</li> 

<li class="static" role="menuitem" style="position: relative; float: left;"> 
<a class="level2 static" href="#" tabindex="-1">New Element</a> 
</li> 

<li class="static" role="menuitem" style="position: relative; float: left;"> 
<a class="level1 static" href="About.aspx" tabindex="-1">Info</a> 
</li> 

</ul> 
+0

생성 된 HTML은 무엇입니까? – Styxxy

답변

0

이 아니, 스타일을 할 붙박이 재산이 없다 :

생성 된 HTML은 다음과 같다.

하지만 이와 같은 스타일을 사용할 수 있습니다. asp가 (테이블에서) 메뉴를 렌더링하는 방법을 감안하면 내부 테이블에 스타일을 추가 할 수 있습니다.

<style> 
    .menu{background: #eee;} 
    .menu table table {background: #ddd;} 
</style> 
1

당신은 당신의 스타일

.menu{} 
.menu table table { 
        margin-top:10px;} 

에 다음 코드를 사용하고 메뉴에서 위의 클래스를 추가 할 수 있습니다.

+0

이것은 나를 위해 일했습니다 .... –

관련 문제