Oscar Oscar - 5 months ago 10
CSS Question

Menu with links floated at left and right but aligned at center in terms of height

Im trying to have a menu where I have some links floated at left and then I have a

div
with some links that I want floated at right.

I'm trying to do this with the code below and it is working, but the left links and right links are no aligned at the center of the menu in terms of
height
, do you know why?

And also the
:hover
effect is not occupying the entire
height
of the menu.

CODE:



.container {
width: 100%;
background: yellow;
float: left;
}
.content {
height: 50px;
}
.menu-list {
list-style: none;
}
.menu-list li {
float: left;
}
.menu-links {
float: right;
}
.menu-list li a {
color: #aaa;
text-decoration: none;
line-height: 50px;
font-weight: bold;
}
.menu-list li a:hover {
background: red;
}

<div class="container">
<div class="content">
<ul class="menu-list">
<li><a title="" href="">Home</a>
</li>
<li><a title="" href="">Home</a>
</li>
<li><a title="" href="">Home</a>
</li>
<li><a title="" href="">Home</a>
</li>
<li><a title="" href="">Home</a>
</li>
<li><a title="" href="">Home</a>
</li>
<li><a title="" href="">Home</a>
</li>
</ul>
<div class="menu-links">
<a href="">Link 1</a>
<a href="">Link 2</a>
</div>
</div>
</div>





JsFiddle

Answer

Try this one

.container{
    width:100%;
    background:yellow;
    float:left;
}

.content{
      height: 50px;
}

.menu-list{
  list-style:none;
  margin: 0;
    float: left;
}

.menu-list li{
   display: inline-block;
}

.menu-links{
    float: right;

}
.menu-links a{
    line-height: 50px;
}

.menu-list li a{
    color:#aaa;
    text-decoration: none;
    line-height: 50px;
    font-weight: bold;


}

.menu-list li a:hover{
    background:red;
    padding: 16px 0px;
}
<div class="container">
  <div class="content">
    <ul class="menu-list">
      <li><a title="" href="">Home</a></li>
      <li><a title="" href="">Home</a></li>
      <li><a title="" href="">Home</a></li>
      <li><a title="" href="">Home</a></li>
      <li><a title="" href="">Home</a></li>
      <li><a title="" href="">Home</a></li>
      <li><a title="" href="">Home</a></li>
    </ul> 
    <div class="menu-links">
      <a href="">Link 1</a> 
      <a href="" >Link 2</a>
    </div>
  </div>
</div>