mikelamar

I think I might made it work!

I know I am repeating myself:
There is a quick fix. You don't need PHP or SMTP or js, just a bit of HTML. You don't need to get someone to do it for you. just go to formspree.io and follow the instructions.  It's free, it's easy and it works well.

Sort of. Your parent div with a width of 100% is likely in the center, but you just can't see it because it spans full width. It won't center the child items automatically, the way this is usually done is to wrap them in a smaller container like in my example above. If you want the text to be centered inside of that, you can use text-align. I've updated my example here to show how that works https://codepen.io/anon/pen/JyKoxv.

You've spelt clearfix wrong on your div tag.

They are pretty straightforward. Add classes and don't use element or ID selectors.

Here's a basic example I just knocked up, hope it helps illustrate how to build such a menu


HTML

<nav> <ul class="nav clearfix"> <li class="nav__item"> <a href="" class="nav__link">Fruit</a> </li> <li class="nav__item"> <a href="" class="nav__link">Meat</a> </li> <li class="nav__item"> <a href="" class="nav__link">Veg</a> </li> <li class="nav__item has-popout"> <a href="" class="nav__link">Fish</a> <ul class="nav-popout"> <li class="nav__item nav-popout__item"> <a href="" class="nav__link">Salmon</a> </li> <li class="nav__item nav-popout__item"> <a href="" class="nav__link">Tuna</a> </li> <li class="nav__item nav-popout__item"> <a href="" class="nav__link">Haddock</a> </li> </ul> </li> <li class="nav__item"> <a href="" class="nav__link">Household</a> </li> </ul> </nav> CSS
.nav, .nav-popout { margin: 0; padding: 0; list-style: none; } .nav__item, .nav-popout__item { padding: 0; } .nav__item { float: left; } .nav__item:hover > .nav__link, .nav__item:focus > .nav__link { background: #bbb; } .nav__link { display: block; padding: 10px 20px; background: #ccc; text-decoration: none; } .nav__item.has-popout { postition: relative; } .nav__item.has-popout > a::after { content: ' ▼' } .nav__item.has-popout:hover > a::after, .nav__item.has-popout:focus > a::after{ content: ' ▲' } .nav-popout { transform: scale(1, 0); transform-origin: 50% 0; transition: transform 0.2s; } .nav__item.has-popout:hover > .nav-popout , .nav__item.has-popout:focus > .nav-popout { transform: scale(1); } .nav-popout__item { float: none; } https://codepen.io/anon/pen/RgWeyb
Without wanting to sound condescending if you learn how CSS selectors and the box model works then almost everything with regards to CSS will make sense
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model

There's quite a lot of reading and theory involved but it's well worth taking the time to learn - then things like nav menus will become a doddle and CSS actually becomes a joy to work with!

It works but with a magic number, but I think it's the only way to do what the OP wants. It will break if the title were to change - number of chars, font-size, letter-spacing etc.
 
I'd encourage a change in design.

That would be the :hover pseudo-class. You style the a element , not the li. I can't remember why. So something like
#navigation a:hover { color: magenta; background-color: green; }

It's because your title is inside of a span which has a default display of inline meaning it's width will be only as wide as it's content. You need to ensure the text is in a block level element - like a heading or set the display property to block.

try codepen?

I suppose what you are after is the dropdown effect. No JavaScript is used for that. It is done with CSS transitions on hover
I grabbed the transition effect from the page and used it in a simpler example here:
 
https://jsfiddle.net/Nillervision/9eywnra6/
 
It should be enough to get you started

I think you need to create better box hierarchy. You need one container (div or span) for the gray boxes and another container for the text box.
 
Centering text in box is simple as: text-align:center;
 
One good idea when asking for help is to use online front-end playground like codepen.io. Instead of making screenshots, you can show the problem with code and receive an answer with code.
 
You can also try some front-end framework like Bootstrap. It can make the things a lot easier. The downside is that you need to learn how to use it first.
 
Alex

How easy or complicated does this need to be?
 
For example, the simple solution is to use a table. not very sophisticated but it will work.
 
If you need something a little posher then try floats: http://css.maxdesign.com.au/floatutorial/ (see tutorial 9)
 
Or CSS columns: https://css-tricks.com/guide-responsive-friendly-css-columns/
 
Or even masonry: http://w3bits.com/css-masonry/
 
Are the boxes fixed width and height or do they need to be responsive (ie adjust for different screen resolutions)?