Kanonier8

Если я все правильно понял, то вам нужно видео в качестве бэкграунда?
Если так, то можно решить это таким образом codepen.io/anon/pen/aJLBPM?editors=1100

Ну разумеется для таких кейсов вы можете использовать media query

header {
	background: url(./mobile_bg.jpg);
}
@media screen and (min-width: 750px) {
	header { 
		background: url(./tablet_bg.jpg);
	}
}
@media screen and (min-width: 992px) {
	header { 
		background: url(./desktop_bg.jpg);
	}
}

Попробуйте вот так

#menu ul li:hover > ul {
  left: 287px;
}

#menu ul li > ul {
  position: absolute;
  background-color: #2E2E2E;
  top: 0;
  left: 34px;
  text-align: left;
  padding-left: 4px;
  min-width: 200px;
  z-index: -1;
  margin-top: 37px;
  height: 368px;
  -webkit-transition: left .5s .2s ease-in;
  -moz-transition: left .5s .2s ease-in;
  -ms-transition: left .5s .2s ease-in;
  transition: left .5s .2sease-in;
}

Для начала как вам уже сказали, если занимаетесь версткой давно пора задуматься над покупкой Full HD монитора, на том что сейчас имеете вам далеко не продвинуться.

А это то что вы можете попробовать:

- в Google Chrome установи в режиме эмуляции нужную тебе ширину экрана, как минимум 1600px
- Можешь просто увеличить масштаб страницы до 75%
- Используй принципы резиновой верстки
- Верстай по принципу Mobile first (сначала мобильные)