How to vertically align the top and main menus?

Question

I have two menus: one is at the very top, and the other is right below it. I can not get the two menus to align correctly on each other's right. I want to align the last menu items of each of them vertically.

Here is the link: http://bit.ly/1KJjaOZ

CSS

#header-text {
  float: left;
  border-radius: 25px;
  border: 1px solid #CCC;
  padding: 0 1em 2.35em 1em;
  width: 15.30em;
  height: 2em;
  margin: 0 0 0 560px;
}
.top-menuv2 ul {
  list-style-type: none;
  margin: 10px 20px 0 90px;
  font-size: 0.80em;
  float: none;
}
.top-menuv2 li {
  display: inline-block;
  position: relative;
}
.top-menuv2 ul li {
  display: inline;
  margin-left: 20px;
  font-family: 'Open Sans Bold', sans-serif;
  line-height: 1.8;
}

Answer 1

You must rebuild your codes. Adding a huge margin to a specific div is not a good solution. Since your top menu is right-aligned, why not use it float: right;?

. , html css .

HTML:

<div class="top-navigation top-menuv2">
  <ul>
    <li><a href="/testEnvironment/contacts/">Contacts</a></li>
    <li><a href="/testEnvironment/our-partners/">Our Partners</a></li>
    <li><a href="/testEnvironment/careers/">Careers</a>
      <ul>
        <li><a href="/testEnvironment/careers/vacancies/">Vacancies</a></li>
        <li><a href="/testEnvironment/careers/corporate-culture/">Corporate Culture</a></li>
      </ul>
    </li>
  </ul>
  <div id="header-text">
    <div class="header-text cc">&nbsp;Customer Service 02 753 57 11</div>
  </div>
</div>

:

.top-menuv2 ul {
  list-style-type: none;
  margin: 15px 63px 0px 10px;
  font-size: 0.8em;
  float: right;
}

#header-text {
  border-radius: 25px;
  border: 1px solid #CCC;
  padding: 0px 1em 2.35em;
  width: 15.3em;
  height: 2em;
  float: right;
  margin: 10px 0px 0px;
}

div, , . , !

Answer 2

, , :

.top-navigation.top-menuv2 ul {
    text-align: right;
    padding-right: 42px;
}

Answer 3

you can use this class.

.top-menuv2 {
   display: inline-block;
   margin: 10px 0 0 0;
 }
 .top-menuv2 ul {
   list-style-type: none;
   margin: 10px 20px 0 30px;
   font-size: 0.80em;
   float: none;
   display: inline-block;
 }

Answer 4

try adding margin left 14px to div-search-icon. (before doing this, return the menu to its previous position)