A couple more problems with my horizontal subnav...but almost there

Question

So I've been working on what I was helped with yesterday and I'm so close. My code is much cleaner now. I have 2 issues that still need resolving. I've been trying all morning and can't seem to get it.

1. I need to control of the height of the subnav. I had to change the height in "ul li a" to 100% from pixels so at least now it just wraps around the text, which is ok, but I will probably need to change that height eventually and don't want to do it by increasing the font size.

2. • ANSWERED - I added a margin-down in % to the subnav and you'll see why based on the design. The problem with this is that once you slowly move the mouse over the white space the sub nav disappears. If you do it fast enough you can sometimes catch it. I had the same issue with the vertical spacers within the subnav but did some rearranging in the css and it seems to be fixed now. Any suggestions?

3. Can I have the single worded links center without compromising the vertical centering with the multi-worded links?

4. Is there a better way to add in "margins or buffers" instead of the "spacers" I'm using, or is this "okay"?

http://codepen.io/Compton/pen/iwKJm

--UPDATED CODEPEN--

http://codepen.io/Compton/pen/ufGCI

Thanks in advance.

Answer 1

The problem was caused by the margin you added to the .subnav class: while moving the mouse from the upper list item to the sub list, the mouse had to move over a gap of 0.333% space resulting in a lost focus (or lost hover-effect). I updated your code and removed the unnecessary spacers, the updated version can be found here: http://codepen.io/anon/pen/hzAaD Referring to your original code, change your CSS as follows:

 .subnav ul li {    
   margin: 0;
   margin-top: 3px;
 }
 .subnav {
   width:100%;
 }

Answer 2

For point four, you don't need to add an empty list item for every "space" between each list item, this is bad practice as a list item is meant to actually be used for something, not empty space!

Instead, why don't you simply amend your ul li class so that you add a margin-right property:

ul li {
    float:left;
    width: 14%;
    display:block;
    **margin-right: 5px;**
    text-align:center;
}

This will achieve the same effect as having those spaces so you can remove them from your html.