Каким методом можно сделать выпадающее горизонтальное меню таким образом, чтобы первый вариант находился под разделом, который выбран, а остальные были рядом с ним него? (картинка внизу покажет желаемое расположение)
Конечно, можно использовать padding, но тогда будет плавать расположение при изменении размеров окна.
<body>
<div class="container">
<ul class="menu">
<li class="home"><a href="#">HOME</a></li>
<li class="news"><a href="#">NEWS</a>
<ul class="op news">
<li><a href="#">Photo</a></li>
<li><a href="#">Video</a></li>
</ul></li>
<li class="economics"><a href="#">ECONOMICS</a>
<ul class="op economics">
<li><a href="#">Marketing</a>
<li><a href="#">Management</a></li>
</ul></li>
<li class="local"><a href="#">LOCAL</a>
<ul class="op local">
<li><a href="#">City</a></li>
<li><a href="#">Neighbours</a></li>
</ul></li>
<li class="sport"><a href="#">SPORT</a>
<ul class="op sport">
<li><a href="#">Football</a></li>
<li><a href="#">Basketball</a></li>
<li><a href="#">Tennis</a></li>
<li><a href="#">Swimming</a></li>
</ul></li>
<li class="culture"><a href="#">CULTURE</a>
<ul class="op culture">
<li><a href="#">Music</a></li>
<li><a href="#">Art</a></li>
<li><a href="#">Theater</a></li>
<li><a href="#">Architecture</a></li>
</ul></li>
<li class="travels"><a href="#">TRAVELS</a>
<ul class="op travels">
<li><a href="#">Amsterdam</a></li>
<li><a href="#">Bahamas</a></li>
<li><a href="#">Jamaica</a></li>
<li><a href="#">Las Vegas</a></li>
<li><a href="#">London</a></li>
<li><a href="#">Los Angeles</a></li>
<li><a href="#">Miami</a></li>
<li><a href="#">Montreal</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Rome</a></li>
</ul></li>
<li class="living"><a href="#">LIVING</a>
<ul class="op living">
<li><a href="#">Bring out</a></li>
<li><a href="#">your death</a></li>
</ul></li>
<li class="money"><a href="#">MONEY</a>
<ul class="op money">
<li><a href="#">To use</a></li>
<li><a href="#">To gain</a></li>
</ul></li>
<li class="technology"><a href="#">TECHNOLOGY</a>
<ul class="op technology">
<li><a href="#">New</a></li>
<li><a href="#">Old</a></li>
</ul></li>
<li class="more"><a href="#">MORE</a>
<ul class="op more">
<li><a href="#">About</a></li>
<li><a href="#">Contacts</a></li>
</ul></li>
<div></div>
</ul>
</div>
</body>