1
我試圖建立一個下拉菜單，到目前爲止，我發現了一個非常漂亮的菜單，但它列出了它的項目水平並水平顯示其子項目。顯示菜單水平垂直下降？
我希望我的項目是彼此相鄰，然後如果它有一個子菜單，這些項目下降。
這裏是我的菜單：
<link rel="stylesheet" type="text/css" href="../../Content/Menu.css" />
<div class="float-right">
<nav>
<ul class="menu" style="float: left;">
<li class="item1"><a href="#" class="">Home</a>
<ul style="display: block; ">
<li class="subitem1" >@Html.ActionLink("Home", "Index", "Home", new { @class = "active" })</li>
<li class="subitem2">@Html.ActionLink("Contact", "Contact", "Home")</li>
<li class="subitem3">@Html.ActionLink("About", "About", "Home")</li>
</ul>
</li>
<li class="item2">@Html.ActionLink("Login", "Login", "Home")</li>
</ul>
</nav>
</div>
樣式表
body {
font-size: 100%;
background:#32373d;
}
a {
text-decoration: none;
}
ul, ul ul {
margin: 0;
padding: 0;
list-style: none;
}
#wrapper {
width: 220px;
margin: 100px auto;
font-size: 0.8125em;
}
.menu {
width: 225px;
height: auto;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}
.menu > li > a {
background-color: #616975;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));
background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864');
border-bottom: 1px solid #33373d;
-webkit-box-shadow: inset 0px 1px 0px 0px #878e98;
-moz-box-shadow: inset 0px 1px 0px 0px #878e98;
box-shadow: inset 0px 1px 0px 0px #878e98;
width: 100%;
height: 2.75em;
line-height: 2.75em;
text-indent: 2.75em;
display: block;
position: relative;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 600;
color: #fff;
text-shadow: 0px 1px 0px rgba(0,0,0,.5);
}
.menu ul li a {
background: #fff;
border-bottom: 1px solid #efeff0;
width: 100%;
height: 2.75em;
line-height: 2.75em;
text-indent: 2.75em;
display: block;
position: relative;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.923em;
font-weight: 400;
color: #878d95;
}
.menu ul li:last-child a {
border-bottom: 1px solid #33373d;
}
.menu > li > a:hover, .menu > li > a.active {
background-color: #35afe3;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));
background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
border-bottom: 1px solid #103c56;
-webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
-moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
box-shadow: inset 0px 1px 0px 0px #6ad2ef;
}
.menu > li > a.active {
border-bottom: 1px solid #1a638f;
}
.menu > li > a:before {
content: '';
background-image: url(../images/sprite.png);
background-repeat: no-repeat;
font-size: 36px;
height: 1em;
width: 1em;
position: absolute;
left: 0;
top: 50%;
margin: -.5em 0 0 0;
}
.item1 > a:before {
background-position: 0 0;
}
.item2 > a:before {
background-position: -38px 0;
}
.item3 > a:before {
background-position: 0 -38px;
}
.item4 > a:before {
background-position: -38px -38px;
}
.item5 > a:before {
background-position: -76px 0;
}
.menu > li > a span {
font-size: 0.857em;
display: inline-block;
position: absolute;
right: 1em;
top: 50%;
background: #48515c;
line-height: 1em;
height: 1em;
padding: .4em .6em;
margin: -.8em 0 0 0;
color: #fff;
text-indent: 0;
text-align: center;
-webkit-border-radius: .769em;
-moz-border-radius: .769em;
border-radius: .769em;
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
text-shadow: 0px 1px 0px rgba(0,0,0,.5);
font-weight: 500;
}
.menu > li > a:hover span, .menu > li a.active span {
background: #2173a1;
}
.menu > li > ul li a:before{
content: '▶';
font-size: 8px;
color: #bcbcbf;
position: absolute;
width: 1em;
height: 1em;
top: 0;
left: -2.7em;
}
.menu > li > ul li:hover a,
.menu > li > ul li:hover a span,
.menu > li > ul li:hover a:before {
color: #32373D;
}
.menu ul > li > a span {
font-size: 0.857em;
display: inline-block;
position: absolute;
right: 1em;
top: 50%;/
background: #fff;
border: 1px solid #d0d0d3;
line-height: 1em;
height: 1em;
padding: .4em .7em;
margin: -.9em 0 0 0;
color: #878d95;
text-indent: 0;
text-align: center;
-webkit-border-radius: .769em;
-moz-border-radius: 769em;
border-radius: 769em;
text-shadow: 0px 0px 0px rgba(255,255,255,.01));
}
什麼財產在我的樣式表導致我的菜單列出這樣嗎？
有沒有辦法來覆蓋每一個導致你做這個菜單的菜單？
編輯
HTML列表：
<div class="float-right">
<nav>
<ul class="menu" style="float: left;">
<li class="item1"><a href="#" class="">Home</a>
<ul style="display: block; ">
<li class="subitem1" ><a class="active" href="/?Length=4">Home</a></li>
<li class="subitem2"><a href="/Home/Contact">Contact</a></li>
<li class="subitem3"><a href="/Home/About">About</a></li>
</ul>
</li>
<li class="item2"><a href="/Home/Login">Login</a></li>
</ul>
</nav>
</div>
請發表您呈現的HTML代碼，而不是你的freemarker模板（或者不管它是什麼東西開始用「@」） –
這就是你如何創建MVC – Pomster
好了一個鏈接，但的jsfiddle不解碼春天MVC代碼。打開你的頁面，點擊查看源代碼，然後張貼;） –