MVC 3プロジェクトでHTML5 & CSS3を使用していますが、ナビゲーションバーに問題があります。ユーザーは、リンクにカーソルを合わせるとユーザーがHOMEページにいるときにナビゲーションバーの "HOME"リンクが選択されるようにするにはどうすればよいですか?
ピンクのサブメニューが表示されます。
これは私のナビゲーションバー方法です。そして、そのすべてがCSS3なしのjavascriptで行われました。
私がしたいことは、誰かが自分のWebアプリケーション "HEM"( "HOME")を訪問したときに、それが自動的に画像のように選択されるべきことです。また、ユーザーが「ADMIN」と同じように移動すると、そこにピンクのサブメニューが常に表示されます。
どうすればできますか?以下れる
ul#nav {
position:relative;
float: left;
width: 961px;
margin: 0;
padding: 0;
list-style: none;
/* gradient */
background: url(../../Content/img/nav-tile.gif) repeat-x;
}
ul#nav li {
display: inline;
}
ul#nav li a {
float: right;
font: bold 12px verdana,arial,tahoma,sans-serif;
line-height: 40px;
color: #fff;
text-decoration: none;
margin: auto;
padding: 0 35px;
}
/* APPLIES THE ACTIVE STATE */
ul#nav .current a, ul#nav li:hover > a {
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #330000;
background: #dd006b;
}
/* THE SUBMENU LIST HIDDEN BY DEFAULT */
ul#nav ul {
display: none;
}
/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */
ul#nav li:hover > ul {
position: absolute;
display: block;
width: 961px;
height: 30px;
position: absolute;
margin: 40px 0 0 0;
/* gradient */
background: #dd006b url(../img/menu-child.png) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(#dd006b), to(#a1014e));
background: -moz-linear-gradient(top, #dd006b, #a1014e);
background: linear-gradient(-90deg, #dd006b, #a1014e);
}
ul#nav li:hover > ul li a {
float: left;
font: bold 12px verdana,arial,tahoma,sans-serif;
line-height: 30px;
color: #fff;
text-decoration: none;
margin: 0;
padding: 2 30px 0 0;
background: #dd006b url(../img/menu-child.png) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(#dd006b), to(#a1014e));
background: -moz-linear-gradient(top, #dd006b, #a1014e);
background: linear-gradient(-90deg, #dd006b, #a1014e);
}
ul#nav li:hover > ul li a:hover {
text-decoration: none;
text-shadow: none;
}
と "HEM" 別名 "HOME" のためのMVCの私のレイアウト:事前に
<li>@Html.ActionLink("HEM","Index","Home")
<ul></ul>
</li>
おかげ
これは私のCSSです!
それが動的に組み込まれている場合、それはとにかく李に.currentクラスを追加しないのですか? – Deadlykipper
あなたは何を意味するのか分かりません:/ – Obsivus