Vysúvacie CSS menu

11.23.2008 · Posted in Navigácia

vmenu

CSS:

.tien { width: 200px; float: left; background-color: #f5f5f5;}

.tien .menu { position: relative; left: -5px; top: -5px;}

.obsah { background-color: #fff; border: solid 1px #9d9da1;}

.obsah ul { background: url(men.png) repeat-y 0 0 transparent; list-style: none;}

.obsah ul li { color: #aca899; padding: 2px 0 0 35px;}

.obsah ul li a {padding: 2px 0 2px 0; cursor: default; color: #000; width: 158px; display: block; text-decoration: none;}

.obsah ul li a:hover { background-color: #f0f0f0;}

.obsah ul li#podmenu { background: url(sipka.png) no-repeat 0 55% transparent; }

.obsah ul li#podmenu .tien { display: none;}

.obsah ul li#podmenu:hover {background-color: #f0f0f0;}

.obsah ul li#podmenu:hover .tien { display: block; position: absolute; left: 180px; top: 40px;}

<ul>
<li><a href="#">Položka 1</a></li>
<li><a href="#">Položka 2</a></li>
  <li id="podmenu">

   <a href="#">Položka 3</a>

   <ul>

    <li><a href="#">Podmenu 1 položky 3</a></li>

    <li><a href="#">Podmenu 2 položky 3</a></li>

    <li><a href="#">Podmenu 3 položky 3</a></li>

    <li><a href="#">Podmenu 4 položky 3</a></li>

   </ul>

  </li>
  <li><a href="#">Položka 4</a></li>

  <li><a href="#">Položka 5</a></li>

</ul>

Prezrieť.

Podobné články:

Tags: css menu, vysúvacie css menu

camo says:

December 3, 2008 at 17:27

Využívaš vlastnosť display:none. Ja by som to robil cez visibility, alebo cez z-index. Ešte som vysúvacie menu nikdy nerobil, tak neviem aká je podpora v prehliadačoch, tak ak môžeš pridaj nejaké údaje o podpore a o iných možnostiach.

viktor says:

December 3, 2008 at 17:37

visibility nefunguje korektne vo vsetkych prehliadacoch a keby som to robil cez z-index, musel by som to pod nieco schovat, pretoze z-index je vlastne na prekryvanie pozicovanych divov. ak najdes lepsie riesenie, mozes ho kludne zrealizovat, poslat a ja ho tu uverejnim.