css menu

[hoho]

Luudzu paliidziet ar css, jau kuru dienu nevaru izlabot lai straadaatu IE < 7.

Onmouseover paraadaas menu ar divaam kolonaam, nosaukumi ir linki uz kategorijaam, kad pele ir visu navigaacijai jaamaina kraasa un viss, mozilaa viss straadaa, ie9 arii, bet ie6, ie7 navigaacija leekaa:

 

css:

#menu { padding-bottom: 0; display: inline; background: url(/images/bgmenu.gif) 157px 0 no-repeat; width: 314px; margin-left: -10px; margin-top: -10px }

#menu li { padding-left: 10px; padding-top: 10px }

#menu li li { font: 11px Arial; text-transform: uppercase }

#menu a { color: #fff; text-decoration: none }

#menu a:hover, #menu a.current { color: #c0a062;display: inline;}

#menu img { width: 147px; height: 147px }

 

#menu li ul { float: left; position: absolute; left: -999em; padding: 21px 23px; margin-left: 37px; margin-top: -95px; width: 293px; background: #7a7a7a; z-index: 999; wid\th/* */: 257px }

#menu li li { float: left; height: auto; width: 257px; padding: 0; color: #c0a062 }

 

#menu li:hover ul{ left: auto; margin-left: auto; margin-right: auto;}

#menu li.iehover ul { left: auto; margin-left: auto; margin-right: auto; }

 

#menu .one {

float: left;

width: 50%;

}

#menu .two {

float: left;

width: 50%;

}

 

html:

<ul id='menu'>

<li><a href='/team/'><img src='/images/cat_img1.gif' alt='' /></a>

<ul>

<li class='one'><a href='/#/'>aaaa</a></li>

<li class='two'><a href='/#e/'>ssss</a></li>

<li class='one'><a href='/#/'>dddd</a></li>

<li class='two'><a href='/#/'>ffff</a></li>

<li class='one'><a href='/#/'>gggg</a></li>

<li class='two'><a href='/#'>hhhh</a></li>

<li class='one'><a href='#'>jjjj</a></li>

<li class='two'><a href='#'>kkkk</a></li>

</ul></li></ul>

[2easy]

labāk to menu nopozicionē ar konkrētām top,left vērtībām

tiem browseriem, kas to atbalsta, to izdara :hover brīdī, bet pārējiem piešķir klasi (ar tām pašām vērtībām), izmantojot js onmouseover,onmouseout