Question

问题

在布局_Layout.cshtml中放置垂直菜单时，

设计布局已损坏在左中心一侧 problems in wrong design 见上图

此菜单没有任何问题，但它与主要布局视图混淆如上图

注意：垂直菜单（css，html，jquery）工作但问题与布局混淆

我在代码中的操作如下

在_Layout.cshtml

的标题部分

    <head>
        <script src="~/scripts/jquery-1.10.2.js"></script>
        <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/DataTables/css/StyleSheet1.css" rel="stylesheet" />
        <script>
            $(document).ready(function () {
                $("#nav1 li").hover(
                  function () {
                      $(this).find('ul').slideDown();
                  },
                  function () {
                      $(this).find('ul').slideUp();
                  });
            });
        </script>

HTML CODE

 <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>

                </button>

          <ul id="nav1">  
            <li><a href="#">Menu Heading 1</a>  
            <ul>  
              <li><a href="#">Stage1</a></li>  
              <li><a href="#">Stage2</a></li>  
              <li><a href="#">Stage3</a></li>  
              <li><a href="#">Stage4</a></li>  
            </ul>  
            </li>    
        </ul>  


                    </div>

                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav"></ul>
                    </div>
                </div>
            </div>

            <div class="container body-content">

                    @RenderBody()
                    <hr />
                    <footer>
                        <p>&copy; @DateTime.Now.Year - Future Academy University</p>
                    </footer>
                </div>

            <script src="~/Scripts/jquery-1.10.2.min.js"></script>
            <script src="~/Scripts/bootstrap.min.js"></script>
</body>

CSS StyleSheet1.css

ul,  
li,  
a {  
  padding: 0px;  
  margin: 0px;  
}  

#nav1 a {  
  color: #FFFFFF;  
}  

#nav1 li ul li a:hover {  
  background-color: #394963;  
}  

div ul li ul {  
  background-color: #4a5b78;  
  list-style: none  
}  

#nav1 > li > a {  
  background-color: #343434;  
  padding: 16px 18px;  
  text-decoration: none;  
  display: block;  
  border-bottom: 2px solid #212121;  
  background: linear-gradient(top, #343434, #111111);  
}  

#nav1 li ul li a {  
  padding: 10px 0;  
  padding-left: 30px;  
  text-decoration: none;  
  display: block;  
}  

div {  
  background-color: #000000;  
  background-color: #343434;  
  width: 280px;  
}  
/* Hide Dropdowns by Default */  
#nav1 li ul {  
  display: none;  
}

如何将垂直菜单添加到布局视图_Layout.cshtml的左中心

0 个答案: