How to show second menu in center of page? - html

Question

Problem
How to show second menu in center of page ?
Details
I have two menus.
The first menu show at the top of the page.
The second menu not show on center of page (this is my problem).
As fiddle below second menu display above first menu
actually i need to show second menu in center of page
my fiddle
second menu code
<div>
<nav class="main-nav">
<!--This in case we have more navs-->
<ul class="nav-list">
<li>Home</li>
<li>About</li>
<li>
Services
<ul class="dropdown">
<li>Web Design</li>
<li>Graphic Design</li>
<li>Video Production</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</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>Home</li>
<li>About</li>
<li>
Services
<ul class="dropdown">
<li>Web Design</li>
<li>Graphic Design</li>
<li>Video Production</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="container second-menu">
<ul>
<li>الرئيسيه</li>
<li>نبذه عن<i></i></li>
<li>اتصل بنا</li>
<li>اللغه</li>
<li> تسجيل دخول</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/
All you need is to calculate the height of Document and set that height to a container making its position relative and the secondary menu position absolute with top 50%

Answer 2

To have element in the center of page, make it absolute (or static if You want it to stay in center even when scrolling) and position it vertically in center:
#block{
position: absolute;
width: 100%;
left: 0;
height: 50px; //example
top: 50%;
margin-top: -25px; //half of height
}
Then You can put the menu inside that #block.