Дмитрий

https://jsfiddle.net/soledar10/f9v920mw/

.sub-menu - top: 100%; + padding-top: 10px (используйте нужное значение)
https://jsfiddle.net/soledar10/LmrfrwLj/

1) задать точные размеры для logo
2) background: url() no-repeat center center;
3) box-shadow - удалить

как вариант https://jsfiddle.net/kv8a15u0/

не получается потому что position: fixed - по своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.

1) удалите position: fixed для .menu
2) ul > li - position: relative;
3) submenu - position: absolute; top: 100%; left: 0;

https://jsfiddle.net/soledar10/h4h7c5pm/

как вариант - https://jsfiddle.net/soledar10/rnrf3rn8/
или так - jsfiddle.net/soledar10/ezvbhxL0

img это строчный элемент, и поэтому к нему применяется свойство vertical-align. В большинстве браузерах это свойство по умолчанию - baseline.

xiper.net/collect/html-and-css-tricks/content/img-...

1) display: block для .c-head img https://jsfiddle.net/5pb37kbk/
2) font-size: 0; или line-height: 0; для .c-head https://jsfiddle.net/soledar10/1jen5wef/
3) vertical-align: bottom; для .c-head img https://jsfiddle.net/soledar10/jozyjhqf/

.menu:after {  
  left: 0;
  border-width: 0 0 10px 10px;
border-color: transparent transparent #222 transparent;
}

или

.menu:after {
  border-width: 0 0px 10px 10px;
  border-bottom-color: #222;
  left: 0;
}

https://jsfiddle.net/soledar10/5xt2pLfd/
https://jsfiddle.net/soledar10/64Lvvn7m/