css хоризонтално меню

хоризонтално меню и подменю

css + <ul>

Принципно постановката е ясна -
Менюто изглежда горе-долу така:

 <ul>

            <li class="menu">item 1</li>

                <ul>

                    <li class="submenu">sub 1.1</li>

                    <li class="submenu">sub 1.2</li>

                </ul>

            <li class="menu">item 2</li>

                  <ul>

                    <li class="submenu">sub 2.1</li>

.................



.menu {

 display:inline;

...

}



.submenu {

 display:inline;

...

}

Проблемът - търси се начин подменютата да не се появяват точно под елемента от главното меню, който ги отваря, а по-наляво (за надясно проблем няма, спокойно ги местя надясно, но не успявам наляво) ,
а по възможмост, да са центрирани спрямо елемента от главното меню. Това последното май ще е по-трудно.

За съжаление, ако менютата бяха с <div> или таблични, нямам проблем да го направя, но ми сервираха такива списъчни и май ще е доста трудно да ги сменя,
та за това търся workaround.

Някакъв по-пълен код има ли шанс да покажеш?

Малко лирично допълнение - за нещо такова (като структура) ли става въпрос в твоя случай?

Цинична поезия

Ами самото меню си е това, като съм изпуснал само href

 <ul>

            <li class="menu"><a href="ldpsdp">item 1</a>

                <ul>

                    <li class="submenu"><a href="ldpsdp">sub 1.1</li>

                    <li class="submenu"><a href="ldpsdp">sub 1.2</li>

                </ul>

            </li>

            <li class="menu"><a href="ldpsdp">item 2</а>

                  <ul>

                    <li class="submenu"><a href="ldpsdp">sub 2.1</а></li>

                    <li class="submenu"><a href="ldpsdp">sub 2.1</а></li>   

                 </ul>

              </li>

    </ul>

css-a:

#menu  ul li, ul.submenu li{display:block;float:left;margin:0px 5px;}



#menu  ul li a{display:block;float:left;color:#FFFFFF;text-decoration:none;height:25px}



#menu  ul li a {display:inline-table;padding:0 0px 0 0px;width:auto;background:#72706f;height:25px;}



#menu  ul li a {display:inline-table;padding:0 0px 0 0px;width:auto;background:#72706f;height:25px;}





#menu  ul li:hover ul  {display:block; float:left; color: #72706f; padding: 0px; margin-top:28px; font-size: 13px; height:25px;  font-weight:bold;width:100%} 





#menu  ul li:hover ul li a{ display:block;float:left; height:25px; width:100%;}





#menu  ul li ul li a:link, #menu  ul li ul li a:visited  , #menu  ul li ul li a:active{

position:relative; 

color:#72706f;

background-image: none;

background:none; 

/* left:-100px; */

top:-3px;

text-align:center;

}

Хм
мисля, че поне половината от тези css-и са излишни

Няма защо да остиляваш LI-тата, Всичко се прави с линковете. Това, което ти предлагам е да играеш с margin-left . Задай отрицателна стойност. Пробвах на FF и Chrome - върви без грешка. Мисля, че някога съм давал отрицателни марджини и на IE 6, 7, 8 и пак вървяха. Тук съм напускал CSS в LI-та само за демото.


<style>
#ulMenu {border:0px; padding:0px; margin:40px; list-style:none;}
#ulMenu li {float:left; margin:5px;}
#ulMenu li a {display:block; width:200px; background:#ddd;}
#ulMenu li ul {border:0px; padding:0px; margin:0px; list-style:none;}
#ulMenu li ul li {}
#ulMenu li ul li a {display:block; width:200px; background:#ddd; margin-left:-40px;}
</style>

<ul id="ulMenu">
<li>
<a href="#">item 1</a>
<ul>
<li><a href="#">sub 1.1</li>
<li><a href="#">sub 1.2</li>
</ul>
</li>
<li>
<a href="#">item 2</а>
<ul>
<li><a href="#">sub 2.1</а></li>
<li><a href="#">sub 2.1</а></li>
</ul>
</li>
</ul>

p.s. Пу да се е*. Две изречения без грешка не мога да напиша.

croesus - благодаря!