Links inside of larger clickable areas (CSS Only)

Question

Here\'s a good article on creating links inside of larger clickable areas:

http://css-tricks.com/links-inside-of-larger-clickable-areas/

This solution requir

Answer 1

Doesn't seem too difficult to me (JSFiddle).

HTML:

    Clickable
    

        

            

                Clickable
            
            

                Clickable
            
            

                Clickable
            
            

                Clickable
            
        
    

​

CSS:

a { color: #f4ebd4; font-family: sans-serif; text-decoration: none; text-transform: uppercase; font-size: 0.8em; }

header { text-align: center; }

header > a { display: block;  line-height: 100px; }

header > a, header > a + nav { background: #4b885c; }
a:hover, a:hover + nav { background: blue; }

nav ul { display: table; width: 100%; }
nav li { display: table-cell; }
nav a { display: block; background: #a51d2c; padding: 10px 20px; margin: 10px; }
​