Question

问题
如何在页面中心显示第二个菜单？

详情
我有两个菜单第一个菜单显示在页面顶部。
第二个菜单没有显示在页面中心（这是我的问题）。

如第一个菜单上方的第二个菜单显示下面的小提琴

实际上我需要在页面中心显示第二个菜单

第二个菜单代码

<div>
      <nav class="main-nav">
            <!--This in case we have more navs-->
            <ul class="nav-list">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li>
                    <a href="#">Services</a>
                    <ul class="dropdown">
                        <li><a href="#">Web Design</a></li>
                        <li><a href="#">Graphic Design</a></li>
                        <li><a href="#">Video Production</a></li>
                    </ul>
                </li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </div>

Answer 1

        <div class="con">
      <div>
         <nav class="main-nav">
            <!--This in case we have more navs-->
            <ul class="nav-list">
               <li><a href="#">Home</a></li>
               <li><a href="#">About</a></li>
               <li>
                  <a href="#">Services</a>
                  <ul class="dropdown">
                     <li><a href="#">Web Design</a></li>
                     <li><a href="#">Graphic Design</a></li>
                     <li><a href="#">Video Production</a></li>
                  </ul>
               </li>
               <li><a href="#">Blog</a></li>
               <li><a href="#">Contact</a></li>
            </ul>
         </nav>
      </div>

      <div class="container second-menu">
         <ul>
            <li><a href="#home">الرئيسيه</a></li>
            <li><a href="#news">نبذه عن</a><i></i></li>
            <li><a href="#contact">اتصل بنا</a></li>
            <li><a href="#contact2">اللغه</a></li>
            <li><a href="#contact3"> تسجيل دخول</a></li>
         </ul>
      </div>
    </div>


 $(function() {
   var heightOfPage = $(window).height();
   console.log(heightOfPage);
   $(".con").css("height", heightOfPage);
   $("li").has(".dropdown").hover(
     function() {
       $(this).find(".dropdown").slideDown();
     },
     function() {
       $(this).find(".dropdown").slideUp();
     }
   );




.con{
  position: relative;
}
.main-nav ul li{
  display: inline-block;
  position: relative;
  background: #000;
}
.main-nav ul li a{
  color: #fff;
  text-decoration: none;
  padding: 10px;
  display: inline-block;
}
.dropdown ul{
  padding: 0;
  margin: 0;
}
.dropdown{
  display: none;
  position: absolute;
  top: 40px;
  left: -30px;
  width: 200px;
}
dropdown ul li{
  width: 200px;
}
.second-menu ul li{
  display: inline-block;
  background: red;
  padding: 10px;
}
.second-menu ul li a{
  color: #fff;
}
.second-menu{
  position: absolute;
  top: 50%;
}

JsFiddle Link https://jsfiddle.net/y97coxjo/2/

您只需要计算Document的高度，并将该高度设置为容器，使其位置相对，将辅助菜单位置设置为绝对值50％

Answer 2

要在页面中心放置元素，请将其设为绝对（如果您希望它在滚动时保持在中心位置，则为静态）并将其垂直放置在中心位置：

#block{
   position: absolute;
   width: 100%;
   left: 0;
   height: 50px; //example
   top: 50%;
   margin-top: -25px; //half of height
}

然后您可以将菜单放在#block。

内

如何在页面中心显示第二个菜单？

2 个答案: