To jest mój pierwszy post, a zatem witam wszystkich.
Mój problem polega na tym iż chciałem by na stronie, której menu główne ma taki układ:
po najechaniu na link PROJECTS pojawiało się menu zawierające odnośniki do kolejnych projektów dokładnie pod menu głównym w taki mniej więcej sposób:
Tylko że aby uzyskać dokładnie taki efekt musiałem wklepać następujący kod
HTML:
<ol>
<li><a href="index.html#textcontainer" class="link">Bio</a></li>
<li><a href="blog.html#textcontainer" class="link">Blog</a></li>
<li>
<a href="#" class="link">Projects</a>
<ul>
<li><a href="projekt1.html" class="link" >Projekt 1</li>
<li><a href="projekt2.html" class="link">Projekt 2</li>
<li><a href="projekt3.html" class="link">Projekt 3</li>
</ul>
</li>
<li><a href="projekt2.html" class="link">Projekt 2</a></li>
<li><a href="projekt3.html" class="link">Projekt 3</a></li>
<li><a href="contact.html#textcontainer" class="link">Contact</a></li>
</ol>
CSS:
ol
{
margin: 0;
padding: 0;
list-style-type: none;
height: 35px;
line-height: 200%;
display: inline-block;
}
ol > li
{
float: left;
padding: 0 20px;
}
ol > li > ul
{
position: absolute;
padding: 0;
margin: 0 -140px;
list-style-type: none;
display: none;
}
ol >li > ul > li
{
float: left;
position: relative;
padding: 20px 80px 0 0;
margin: 0;
}
ol > li:hover > ul
{
display: block
}
Jak widzicie w ul musiałem ustawić ujemny margines, co samo w sobie nie wydaje mi się szczególnie profesjonalne. Jeżeli jednak ustawiam margin: 0 wówczas odnośnik Projekt 1 ustawia się dokładine pod odnośnikiem PROJECTS co wygląda koszmarnie (i przez wzgląd na dobro waszego odczucia estetyki nie będe wstawiał screena :) ). Co więcej, żeby w ogóle uzyskać ul w postaci blokowej pod ol musiałem nadać mu position: absolute, w pzypadku gdy robiłem relative całe menu głowne na prawo od PROJECTS odsuwało się w prawą stronę o tyle ile zajmowało menu z ul.
Zastanawiam się więc czy da się do zrobić lepiej używając samego css (bez js) oraz czy dało by się tę sprawę załatwić tak, ażeby nie trzeba było zmieniać ustawień paddingu i marginesów za każdym razem gdy do rozwijanego menu będę chciał dodać kolejny odnośnik.
Będę wdzięczny za uwagi i sugestie :)