創建與使用MVC剃刀(CSHTML)子菜單項的菜單項。我已經使用ul和li正確編寫了html代碼。它很好。有一些格式問題。
但是,而不是水平菜單項目來臨垂直菜單項目和子菜單項目即將水平..我想水平菜單項目與垂直下拉菜單項如子菜單。
我在CSS中做錯了什麼?
CSHTML在剃刀:
<nav>
<ul id="menu" >
<li class="submenu">@Html.ActionLink("Admin", "Index", "Home")
<ul>
<li>@Html.ActionLink("Country", "Index", "Home")</li>
<li>@Html.ActionLink("State", "Index", "Home")</li>
<li>@Html.ActionLink("City", "Index", "Home")</li>
<li>@Html.ActionLink("Controls", "Index", "Home")</li>
</ul>
</li>
<li class="submenu">@Html.ActionLink("Masters", "Index", "Home")
<ul>
<li>@Html.ActionLink("Accessories", "Index", "Home")</li>
<li>@Html.ActionLink("Asset Type", "Index", "Home")</li>
<li>@Html.ActionLink("Asset", "Index", "Home")</li>
<li>@Html.ActionLink("Business Unit", "Index", "Home")</li>
</ul>
</li>
<li class="submenu">@Html.ActionLink("Acquire", "Index", "Home")
<ul>
<li>@Html.ActionLink("Acquire Assets", "Index", "Home")</li>
<li>@Html.ActionLink("Asset Status", "Index", "Home")</li>
<li>@Html.ActionLink("Audit", "Index", "Home")</li>
</ul>
</li>
<li class="submenu">@Html.ActionLink("Management", "Index", "Home")
<ul>
<li>@Html.ActionLink("Deploy", "Index", "Home")</li>
<li>@Html.ActionLink("Return", "Index", "Home")</li>
</ul>
</li>
<li class="submenu">@Html.ActionLink("Maintenance", "Index", "Home")
<ul>
<li>@Html.ActionLink("Upgrade", "Index", "Home")</li>
<li>@Html.ActionLink("Reports", "Index", "Home")</li>
</ul>
</li>
</ul>
</nav>
CSS:
ul#menu
{
font-size: 1.3em;
font-weight: 600;
margin: 0 0 5px;
padding: 0;
text-align: right;
}
ul#menu li
{
display: inline;
list-style: none;
padding-left: 5px;
margin: 0;
}
ul#menu li a
{
background: none;
color: #999;
text-decoration: none;
}
ul#menu li a:hover
{
color: #333;
text-decoration: none;
}
ul#menu, ul.menu ul
{
display: block;
margin: 0;
padding: 0;
}
ul#menu li
{
display: inline;
list-style: none;
margin: 0;
padding-right: 1.5em;
}
ul#menu li ul
{
visibility: hidden;
}
ul#menu li.submenu:hover ul
{
visibility: visible;
}
nav
{
margin-bottom: 5px;
}
ul#menu
{
margin: 0;
padding: 0;
text-align: center;
}
ul#menu li
{
margin: 0;
padding: 0;
}
你能不能設置一個小提琴?這將使測試更容易,看看發生了什麼。 – Jamie