Переделать вертикальное меню в горизонтальное

TOOX · 04.02.2012, 23:00

Здравствуйте!
Помогите пожалуйста сделать из данного вертикального меню горизонтальное.

Код 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=windows-1251" />
<title>Menu</title>
 
<link href="style.css" rel="stylesheet" type="text/css" />
 
    <script type="text/javascript">
    startList = function() {
      if (document.all&&document.getElementById) {
            navRoot = document.getElementById("nav");
            for (i=0; i<navRoot.childNodes.length; i++) {
                  node = navRoot.childNodes[i];
                  if (node.nodeName=="LI") {
                        node.onmouseover=function() {
                              this.className+=" over";
                        }
                        node.onmouseout=function() {
                              this.className=this.className.replace(" over", "");
                        }
                  }
            }
      }
    }
    window.onload=startList;
    </script>
 
</head>
 
<body>
    <div id="left-menu">
        <ul id="nav">
            <li><a href="#">01</a></li>
            <li><a href="#">02</a>
                <ul>
                    <li><a href="#">02_1</a></li>
                    <li><a href="#">02_2</a></li>
                </ul>
            </li>
            <li><a href="#">03</a>
                <ul>
                    <li><a href="#">03_1</a></li>
                    <li><a href="#">03_2</a></li>
                    <li><a href="#">03_3</a></li>
                </ul>
            </li>
            <li><a href="#">04</a></li>
        </ul>
    </div>
 
</body>
</html>

Код CSS

#left-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 228px;
    border-bottom: 1px solid #ddd;
}
#left-menu ul li {
    position: relative;
}
#left-menu li ul {
    position: absolute;
    left: 227px;
    top: 0;
    display: none;
}
#left-menu ul li a {
    display: block;
    text-decoration: none;
    color: #360036;
    background: #fff;
    padding:5px 5px 5px 15px;
    border: 1px solid #ddd;
    border-bottom: 0;
}
#left-menu ul li a:hover {
    /*color: #360036;*/
    background: #ddd;
}
#left-menu li:hover ul, li.over ul { 
    display: block; 
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

Спасибо за внимание!

Denis St. · 08.02.2012, 23:00

Вот, держи

Похожие темы
Тема	Автор
Pascal (Паскаль) Необходимо создать меню цифровое вертикальное с 'исчезающим" основным меню. Необходимо создать меню цифровое вертикальное с 'исчезающим" основным меню.	moren
PascalABC изменить вертикальное меню на горизонтальное Program nm; Uses CRT; Var spisok: array of string; kod, kod1: char; n, i, p: byte; Procedure findd (n:byte); {âûâîä èíôîðìàöèè ïî âûáðàííîìó ïóíêòó ìåíþ} begin Textcolor (red); Textbackground (white); window (20,1,50,20); Clrscr; case n of {àíàëèç íîìåðà...	allenka
JavaScript Вертикальное меню! Всем привет! сразу переду к вопросу (срочно просто надо) 1)Как сделать, чтобы background в меню оставлся активным после выбора меню?т.е. при наведении background виднеется,а после того как выбираешь меню оно пропадает и остается пустым. 2)Можно ли через CSS или JS сделать,чтобы меню плавно...	Панчо
HTML, CSS вертикальное меню.тег LI как сверстать такое меню делаю так <div id="header"> <ol id="headermenu"> <li ><a href="#">FAQ</a></li> <li><a href="#">FAQ</a></li> <li><a href="#">FAQ</a></li> <li><a href="#">FAQ</a></li> </ol>	cpentyc
Web-дизайн Вертикальное меню Хочу сделать меню как на сайте http://tehnotrade.com.ua/navigps/...	lanzelot

Опции темы