WYM? paprasīja.

Demo:

https://exs.lv/mad182/menu/

Kods

CSS:

#menu {
  width: 800px;
  margin: 100px auto;
  padding: 0;
  list-style: none;
  background: #222;
  height: 50px;
}

#menu li {
  float: left;
  margin: 0;
  padding: 0;
  border-left: 1px solid #111;
}

#menu li a {
  float: left;
  height: 40px;
  padding: 10px 12px 0;
  color: #bbb;
  font-size: 11px;
  text-decoration: none;
}

#menu li a strong {
  display: block;
  font-size: 14px;
  color: #ccc;
}

#menu li a:hover {
  color: #eee;
  background: #333;
}

#menu li a:hover span {
  color: #fff;
}  

HTML:

<ul id="menu">
  <li>
    <a href="#">
      <strong>Home</strong>
      News and Updates
    </a>
  </li>  
  <li>
    <a href="#">
      <strong>Home</strong>
      News and Updates
    </a>
  </li>  
  <li>
    <a href="#">
      <strong>Home</strong>
      News and Updates
    </a>
  </li>     
  <li>
    <a href="#">
      <strong>Home</strong>
      News and Updates
    </a>
  </li>  
</ul>

https://exs.lv/mad182/menu/menu.txt

Laboja mad, labots 4x