html - Banner getting ignored -

html - Banner getting ignored -

i want set navigation under banner, when seek goes behind banner (it pretends isn't there. solved removing position: absolute; when banner wont on top left anymore.

<img class="banner" src="images/banner.png"> <nav class="navigation"> <ul> <li><a href="#">home</a></li> <li><a href="#">prijzen</a></li> <li><a href="#">examen</a></li> <li><a href="#">leerlingen</a></li> </ul> </nav>

css:

.banner { width: 100%; top: 0; left: 0; position: absolute; } .navigation { }

i suggest utilize container banner , menu this:

html

<div class="navcont"> <div class="banner">banner</div> <nav class="navigation"> <ul> <li><a href="#">home</a></li> <li><a href="#">prijzen</a></li> <li><a href="#">examen</a></li> <li><a href="#">leerlingen</a></li> </ul> </nav> </div>

css

.banner { width: 100%; height: 50px; position: relative; background: yellow; float: left; } .navigation{ float:left; }

also suggest utilize position:relative , float instead of position:absolute.

take example:

fiddle

html css