Expanding hovered items

This is a nice way of highlighting the menu items a user is hovering over.  It expands the current (potential) selection and reduces the sizes of the other items.  It is all done with CSS and HTML.

First, let's set up the HTML:

<div id= "title"><h1>Projects Home</h1></div> 
<div id= "nav">
  <ul>
    <li><a href="">Project 1</a></li>
    <li><a href="">Project 2</a></li>
    <li><a href="">Project 3</a></li>
  </ul>  
</div>

This is simply a title with 3 menu items in an unsorted list.

And the CSS?  Not much more to it.  

ul{margin: 4% auto;
   padding:0;
   width: 100%;
   list-style-type: none;
   overflow: auto;}
li{box-sizing: border-box;
   text-align: center;
   display: inline-block;
   float:left;
   width: 33.33%; //3 menu items so I'm splitting the page with into 3
   padding: 2% 0;
   margin: 0%;
ul:hover > li:hover{width: 37.33%;
                    -webkit-transition: all 300ms ease-in-out;
                    -moz-transition: all 300ms ease-in-out;
                    -ms-transition: all 300ms ease-in-out;
                    -o-transition: all 300ms ease-in-out;
                    transition: all 300ms ease-in-out;}
ul:hover > li{width: 31.33%;
              -webkit-transition: width 300ms ease-in-out;
              -moz-transition: width 300ms ease-in-out;
              -ms-transition: width 300ms ease-in-out;
              -o-transition: width 300ms ease-in-out;
              transition: width 300ms ease-in-out;}

Above is the CSS required to get it working but without particularly beautifying the page layout.  The JSFiddle link has a little more formatting in place - it is pretty ugly but that is to highlight how the it works.

Take a look at this JSFiddle for a working example.

Example Work

Here is a random example of some of our work.