я собрал менюшку чисто на CSS,
html---
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="tpl.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
</head>
<body>
<ul class="m">
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
<li><a href="#">Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a>
<ul>
<li><a href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
<li><a href="#">Item 3.1.3</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
<li><a href="#">Item 3.4</a></li>
</ul>
</li>
<li><a href="#">Item4</a>
<ul>
<li><a href="#">Item 4.1</a>
<ul>
<li><a href="#">Item 4.1.1</a></li>
<li><a href="#">Item 4.1.2</a></li>
<li><a href="#">Item 4.1.3</a></li>
</ul>
</li>
<li><a href="#">Item 4.2</a></li>
<li><a href="#">Item 4.3</a></li>
<li><a href="#">Item 4.4</a>
<ul>
<li><a href="#">Item 4.4.1</a></li>
<li><a href="#">Item 4.4.2</a></li>
<li><a href="#">Item 4.4.3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
css----
|
Код:
|
ul.m{margin:0;padding:0;list-style-type:none;font-size:100%;cursor:default;width:auto;}
ul.m li{margin:0;padding:0;list-style-type:none;font-size:100%;position:relative;text-align:left;cursor:pointer;width:8em;float:left;}
ul.m ul{margin:0;padding:0;list-style-type:none;font-size:100%;z-index:1020;cursor:default;width:8.2em;position:absolute;left:-1000em;border:1px solid #CCC;}
ul.m li:hover ul, ul.m li:focus ul{left:auto;}
ul.m li:hover ul ul, ul.m li:focus ul ul{left:-1000em;}
ul.m ul:hover, ul.m ul:focus{left:auto;}
ul.m ul li{width:8.2em;}
ul.m ul ul{position:absolute;margin:0 0 0 99%; top:0;}
ul.m ul:hover ul{left:-1000em;}
ul.m ul li:hover ul{left:auto;}
ul.m a{display:block;cursor:pointer;background-color:#EEE; padding:5px 10px;color:#333;text-decoration:none;}
ul.m a:hover,ul.m a:focus{background-color:#33C;color:#FFF;} |
эта штука работает во всех новых броузерах кроме IE,
скажите что лучше написать какую нибуть JS,
или что то придумать в CSS для IE,
и главное как это сделать.