http://jsfiddle.net/msbyuva/QPQqs/
こんにちは、を使用して形成されたメニューがあります
<ul class="topnav">
<li>@Html.ActionLink("Configuration", "Configuration", "Home")</li>
<li>@Html.ActionLink("Reporting", "Reporting", "Home")
<ul class="subnav">
<li>@Html.ActionLink("Pipeline", "Pipeline", "Pipeline", null, new { target = "_blank", Url = "http://storespipeline/stores/" })</li>
<li>D2C OBI Reports</li>
<li>@Html.ActionLink("Device Utilization", "DeviceUtilization", "DeviceUtilization")</li>
<li>@Html.ActionLink("Display Audit", "DisplayAudit", "DisplayAudit")</li>
<li>@Html.ActionLink("TrueVUE Reports", "TrueVUE", "TrueVUE")</li>
</ul>
</li>
<li>@Html.ActionLink("Admin", "Admin", "Home")</li>
</ul>
CSS:
ul.topnav { リストスタイル: なし; パディング: 10px; マージン: 0; フロート: 左; 幅: 100%; 背景: #f6f6f6; フォントサイズ: 1em; 色: 黒; } ul.topnav li {フロート: 左; マージン: 0; パディング: 0 15px 0 0; 位置: 相対; } ul.topnav li a { パディング: 5px 0px 0px 0px; 色: 黒; 表示: 表; テキスト装飾: なし; フロート: 左; } ul.topnav li a:hover { text-decoration: underline; フォントの太さ: 太字; }
ul.topnav li span.subhover
{
}
ul.topnav li ul.subnav
{
list-style: none;
position: absolute;
left: 0px;
top: 25px;
background: #f6f6f6;
margin: 0;
padding: 0px 0px 0px 0px;
height: auto;
display: none;
float: left;
min-width: 100px;
width: auto;
}
ul.topnav li ul.subnav li
{
margin: 0px;
padding: 4px 10px 0px 10px;
height: auto;
line-height: 100%;
}
html ul.topnav li ul.subnav li a
{
float: left;
width: 150%;
margin: 0px;
padding: 0px 0px 0px 0px;
text-align: left;
}
html ul.topnav li ul.subnav li a:hover
{
}
</style>
リンクの例 -- Display Audit -- をクリックすると、ページが読み込まれると、メニュー リンクがページ コンテンツの下に表示されます... 画像で確認できます (最後の 2 つのリンクはページ コンテンツの下に表示されます)。 .... ページ コンテンツの上にメニュー リンクを表示するにはどうすればよいですか??
私はIE7、CSS 2.1を使用しています