Я использую в своем проекте библиотеку Bootstrap и хочу сделать выпадающее меню сперва вниз, а потом вправо. Вниз меню выпадает, а вот вправо нет.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Инвентаризация резервуарного парка</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
</head>
<body class="grad" onload="menuInit();">
<style>
.grad {
background-image: url(/Image/fon7.png);
background-repeat: round;
}
/*-------------------------------------------------*/
a.button9 {
position: relative;
display: inline-block;
color: black;
font-weight: bold;
text-decoration: none;
text-shadow: rgba(255,255,255,.5) 1px 1px, rgba(100,100,100,.3) 3px 7px 3px;
user-select: none;
padding: 1em 2em;
outline: none;
border-radius: 3px / 100%;
background-image: linear-gradient(45deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.8), rgba(255,255,255,.0) 70%), linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 90%, rgba(255,255,255,.3)), linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)), linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)), linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5)), linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5));
background-repeat: no-repeat;
background-size: 200% 100%, auto, 100% 2px, 100% 2px, 100% 1px, 100% 1px;
background-position: 200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);
box-shadow: rgba(0,0,0,.5) 3px 10px 10px -10px;
}
a.button9:hover {
transition: .5s linear;
background-position: -200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px);
}
a.button9:active {
top: 1px;
}
</style>
@*-----------------------------------------------------------*@
<style>
</style>
@*------------------------------------------------------------*@
<style>
.grad {
background-image: url(/Image/fon.jpg);
/*background-repeat: round;*/
}
li {
display: block;
transition-duration: 0.5s;
}
li:hover {
cursor: pointer;
}
ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
</style>
@*-----------------------------------------------------------*@
<style>
</style>
@*-----------------------------------------------------------*@
@*<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a type="button" class="button9" href="/Home/Index/">Главная</a></li>
<li> </li>
<li><a type="button" class="button9" href="/Home/Calc/">Калькулятор</a></li>
<li> </li>
<li><a type="button" class="button9" href="/Home/GradTables/">Градуировочные таблицы</a></li>
<li> </li>
<li><a type="button" class="button9" href="/Home/AktInvent/">Акты инвентаризации</a></li>
<li> </li>
<li><a type="button" class="button9" href="/Home/NormInformation/">Нормативная информация</a></li>
<li> </li>
<li class=flyout><a type="button" class="button9" href="/Home/Kom/">Комиссия</a></li>
<li> </li>
<li><a type="button" class="button9" href="/Home/Resursy/">Ресурсы</a></li>
<li> </li>
<li><a type="button" class="button9" onclick="Reference()">Справка</a></li>
</ul>
</div>
</div>
</div>*@
@*-----------------------------------------------------------------------------------*@
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a type="button" class="button9" href="/Home/Index/">Главная</a></li>
<li> </li>
<li><a type="button" class="button9" href="/Home/Calc/">Калькулятор</a></li>
<li> </li>
<li><a type="button" class="button9" href="/Home/GradTables/">Градуировочные таблицы</a></li>
<li> </li>
<li><a type="button" class="button9" href="/Home/AktInvent/">Акты инвентаризации</a></li>
<li> </li>
<li><a type="button" class="button9" href="/Home/NormInformation/">Нормативная информация</a></li>
<li> </li>
<li>
<a type="button" class="button9" href="/Home/Kom/">Филиалы</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1" style="font-size:140%; font-family:'Times New Roman'">
<li>
<a href="/Home/NormInformation/">Мозырь</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1" style="font-size:100%; font-family:'Times New Roman'">
<li><a href="/Home/NormInformation/">Резервуары</a></li>
<li><a href="/Home/NormInformation/">Подписанты</a></li>
<li><a href="/Home/NormInformation/">Ресурсы</a></li>
</ul>
</li>
<li>
<a href="/Home/NormInformation/">Новополоцк</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1" style="font-size:100%; font-family:'Times New Roman'">
<li><a href="/Home/NormInformation/">Резервуары</a></li>
<li><a href="/Home/NormInformation/">Подписанты</a></li>
<li><a href="/Home/NormInformation/">Ресурсы</a></li>
</ul>
</li>
</ul>
</li>
<li> </li>
<li><a type="button" class="button9" href="/Home/Resursy/">Ресурсы</a></li>
<li> </li>
<li><a type="button" class="button9" onclick="Reference()">Справка</a></li>
</ul>
</div>
</div>
</div>
@*-----------------------------------------------------------------------------------*@
@*----------------------------------------------------------------------------------*@
<div class="container body-content">
@RenderBody()
<hr />
<footer style="text-align:center">
<p>© @DateTime.Now.Year Инвентаризация нефти в резервуарном парке ЛПДС "Мозырь"</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
<script src="~/Scripts/inventariz.js"></script>
</body>
</html>
