Hello!
Current issue I'm dealing with. The plan is to make it with jquery so that the bottom grey bar slides out accordingly on menu pos hover. The thing is most of such sub-menus are on 100% width of page or have one defined length.
I was trying to make it in such a way:
<div id="menu">
<div id="m-bg-tl"></div>
<div id="m-bg-tc">
<ul id="top-nav">
<li><a href="#">USŁUGI</a>
<ul class="sub-nav" style="display:none;"> <!-- temp for testing -->
<li><a href="#">Informacje</a></li>
<li><a href="#">Wyślij przesyłkę</a></li>
<li><a href="#">Monitoruj przesyłkę</a></li>
</ul>
</li>
<li><a href="#">CENY I STREFY</a>
<ul class="sub-nav">
<li><a href="#">Import</a></li>
<li><a href="#">Eksport</a></li>
<li><a href="#">Opłaty dodatkowe</a></li>
<li><a href="#">Obliczanie ceny</a></li>
</ul>
</li>
<li><a href="#">FAQ</a></li>
<li><a href="#">KONTAKT</a></li>
<li><a href="#">O FIRMIE</a></li>
</ul>
</div>
<div id="m-bg-tr"></div>
</div>
#menu {
width:auto;
height:70px;
position:relative;
top:15px;
float:right;
}
#m-bg-tl, #m-bg-tr {
width:9px;
height:44px;
float:left;
}
#m-bg-tl { background:url('../img/m_bg_left.png'); }
#m-bg-tr { background:url('../img/m_bg_right.png'); }
#m-bg-tc {
background:url('../img/m_bg_center.png');
width:auto;
height:44px;
float:left;
}
ul#top-nav { line-height:43px; }
ul#top-nav li {
display:inline;
list-style:none;
position:relative;
}
ul#top-nav li a {
color:white;
font-size:1.1em;
padding:0 15px;
}
ul#top-nav li ul.sub-nav {
background:yellow;
line-height:1;
width:373px;
list-style:none;
position:absolute;
top:35px;
left:8px;
}
ul#top-nav li ul.sub-nav li { display:inline; }
ul#top-nav li ul.sub-nav li a {
font-size:1em;
color:#000;
padding:0 7px;
display:inline;
}
ul#top-nav li a:hover,
ul#top-nav li ul.sub-nav li a:hover {
color:#ff5f05;
}
If someone could guide me somehow, or at least point in the right direction. I usually make too much combinations and end up with 100 divs and spans.
Thanks in advance.
PS. I hope Polish letters won't be an issue.