Как создать с css меню

@Krintus · Регистрация: 12.04.2009

Студворк — интернет-сервис помощи студентам

Срочно нужна помошь по созанию меню. как сделать что бы первое меню было открыто. Вторые открывались только по нажатию мышки. Ключевые vt. были более темного зеленого цвета, а когда ведешь по подменю то они подчеркивались

(стиль)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<style type="text/css">
#menu_body li ul {display:none} /* Убираем подменю */ 
#menu_body li:hover ul, #menu_body li.over ul 
{ display: block } /* Делаем подменю видимым при наведении мыши */ 
#menu_body{ 
background: #0C3; 
width:302px
 
} 
/*#menu_body li 
{ display: block;} */ 
#menu_body a 
{ width:100%; } 
 
#menu_body ul li { 
list-style-type:none; 
border-bottom:1px solid #fff; 
margin-left:-40px; 
padding-left:7px 
} 
 
#menu_body ul li a { 
color:#fff; 
font-family:verdana,arial,sans-serif; 
text-decoration:none 
} 
 
#menu_body ul li ul li { 
border:0; 
list-style-type:square; 
color:#fff; 
list-style-position:inside 
} 
 
#menu_body ul li ul{ 
border-top:1px solid #fff; 
margin-left:-7px; 
padding-left:50px 
} 
 
( Само меню)
 
<div class="leftcolums" style="float:right;"><div id="menu_body"; >
 
 
<ul id="ul1"> 
<li><a href="#">Земля и человечество</a> 
<ul> 
<li><a href="#">Мир глазами астронома</a></li> 
<li><a href="#">Планеты Солнечной системы</a></li> 
<li><a href="#">Звездное небо</a></li> 
<li><a href="#">Мир глазами географа</a></li>
<li><a href="#">Пояса Земли</a></li>
<li><a href="#">Мир глазами историка</a></li>
<li><a href="#">Когда и где?</a></li>
<li><a href="#">Прошлое и настоящее глазами эколога</a></li>
<li><a href="#">Сокровища земли под охраной человечества</a></li>
</ul> 
</li> 
<li><a href="#">Природа России</a> 
<ul> 
<li><a href="#">Равнины и горы России</a></li> 
<li><a href="#">Моря, озера и реки России</a></li> 
<li><a href="#">Зона арктических пустынь</a></li> 
<li><a href="#">Тундра</a></li> 
<li><a href="#">Леса Росии</a></li>
<li><a href="#">Лес и человек</a></li>
<li><a href="#">Зона степей</a></li>
<li><a href="#">Пустыни</a></li>
<li><a href="#">У черного моря</a></li>
<li><a href="#">Экологическое равновесие</a></li>
</ul> 
</li> 
<li><a href="#">Родной край - часть большой страны</a>
<ul> 
<li><a href="#">Нашь край</a></li> 
<li><a href="#">Поверхность нашего края</a></li> 
<li><a href="#">Водоемы нашего края</a></li> 
<li><a href="#">Наши подземные богатства</a></li>
<li><a href="#">Земля кормилица</a></li>
<li><a href="#">Жизнь леса</a></li>
<li><a href="#">Жизнь луга</a></li>
<li><a href="#">Жизнь пресного водоема</a></li>
<li><a href="#">Растениеводство в нашем крае</a></li>
<li><a href="#">Незаметные защитники урожая</a></li>
<li><a href="#">Животноводство в нашем крае</a></li>
 
</ul>
</li>
</ul>
</div></div>

@etalord · 31.05.2010, 00:25

через javascript. посмотри событие onclick

@ПростоЯ · 31.05.2010, 08:23

Открывающиеся списки делать можно так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
function showhide(n)
{
  if (document.getElementById('otd'+n).style.display=='inline')
    document.getElementById('otd'+n).style.display='none';
  else
    document.getElementById('otd'+n).style.display='inline';
  return false;
}
</script>
 
<li><div><a href="#" onclick="return showhide(1);">Земля и человечество</a> </div></li>
<div id="otd1" >
</div>
<li><div><a href="#" onclick="return showhide(2);">Планеты Солнечной системы</a> </div></li>
<div id="otd2" >
</div>
<li><div><a href="#" onclick="return showhide(3);">Звездное небо</a> </div></li>
<div id="otd3" >
</div>

@Krintus · 27.07.2010, 14:32 **[ТС]**

У меня новая пробллема.. теперь с горизонтальным меню...
Подскажите где и что нужно вставить в следующем коде что бы при наведении мыши появлялись подменю.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!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=utf-8" />
<title>Free CSS Navigation Menu Designs 1 at exploding-boy.com</title>
                        <style type="text/css">
<!--
    body {
        margin:0;
        padding:0;
        font: bold 11px/1.5em Verdana;
}
 
h2 {
        font: bold 14px Verdana, Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0px;
        padding: 0px 0px 0px 15px;
}
 
/*- Menu Tabs J--------------------------- */
 
    #tabsJ {
      float:left;
      width:422px;
      
      font-size:10px;
      line-height:normal;
          border-bottom:1px solid #24618E;
      }
    #tabsJ ul {
        margin:0;
        padding:10px 0px 0px 0px ;
        list-style:none;
      }
    #tabsJ li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsJ a {
      float:left;
      background:url("tableftJ.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 5px;
      text-decoration:none;
      }
    #tabsJ a span {
      float:left;
      display:block;
      background:url("tabrightJ.gif") no-repeat right top;
      padding:5px 15px 10px 10px;
      color:#24618E;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsJ a span {float:none;}
    /* End IE5-Mac hack */
    #tabsJ a:hover span {
      color:#FFF;
      }
    #tabsJ a:hover {
      background-position:0% -42px;
      }
    #tabsJ a:hover span {
      background-position:100% -42px;
      }
 
        #tabsJ #current a {
                background-position:0% -42px;
        }
        #tabsJ #current a span {
                background-position:100% -42px;
                color:#FFF;
        }
-->
</style>
                </head>
 
                <body>
                        <h2>&nbsp;</h2>
                        <div id="tabsJ">
                                <ul>
                                        <!-- CSS Tabs -->
<li id="current"><a href="Home.html"><span>0</span></a></li>
<li><a href="Products.html"><span>1</span></a></li>
<li><a href="Order.html"><span>2</span></a></li>
<li><a href="News.html"><span>3</span></a></li>
 
 
                                </ul>
                        </div>
                </body>
</html>

@ПростоЯ · 27.07.2010, 15:08

Это называется выпадающее меню. Можно сделать вот так или так

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@etalord работяга 368 / 368 / 52 Регистрация: 23.05.2010 Сообщений: 947
	31.05.2010, 00:25
	через javascript. посмотри событие onclick 0

@ПростоЯ 184 / 101 / 8 Регистрация: 30.05.2009 Сообщений: 782
	27.07.2010, 15:08
	Это называется выпадающее меню. Можно сделать вот так или так 0