Выпадающее меню на CSS

net · March 19, 2008

Нужно выпадающее меню на Css(в яве не бум-бум)

Нашла огромное количество описаний, делаю по http://www.webmascon.com/topics/coding/42a.asp

вот мое меню

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Выпад меню</title>

<link href="help.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrap"><!--начало оболочки-->
<div id="content"><!--начало контента-->
<div id="sidebar">
<div id="sidebarcontents">
<ul id="menu">
<li><h2>Организационные формы</h2></li>
<li><a href="#">Лекции</a></li>
 <ul>
 <li><a href="#">History</a></li> 
 <li><a href="#">Team</a></li> 
 <li><a href="#">Offices</a></li> 
 </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><h2>Образовательный процесс</h2></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><h2>Разное</h2></li>
<li><a href="#">Новости науки</a></li>
<li><a href="#">Полезные сайты</a></li>
<li><a href="#">Вопросы и ответы</a></li>
<li><a href="#">Заявка</a></li>

</ul><!--конец ul id="menu"-->
</div><!--конец ul id="sidebarcontents"-->
</div><!--конец ul id="sidebar"-->
<div class="clear"></div>

</div><!--конец контента-->
</body>
</html>

Css:

@charset "windows-1251";
* { margin: 0px; padding: 0px;}
.clear {clear:both;}
a {color:#666600;}
a:visited {color:#999999;}
a:active {color:#669900;}
a:hover {color:#666600; text-decoration:none;}
#wrap{ width:930px; margin:0px auto 15px auto; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#666666;}

/*Content*/
h1, h2, h3, h4, h5 {color:#669900; font-weight:bold;font-family: Arial, Helvetica, sans-serif;}
#content {background:url(images/contentbg1.jpg) repeat-y;}
/*Sidebar*/
#sidebarcontents {padding:5px 15px 5px 25px;}
#sidebar { margin:0px 650px 0px 15px;background:url(images/sidebarbg1.jpg) repeat-y;background-position:right;}

/*Sidemenu*/
#menu li {list-style:none;display:block; height:auto; border-bottom:solid 1px #efefef;}
#menu li a, #menu li a:visited, #menu li a:active {display:block; height:auto; padding:5px 5px 0px 5px; text-decoration:none; color:#333333;}
#menu li a:hover {background:#F8F9F2; color:#000000;}
#menu h2 { display:block; border-bottom:solid 1px #D2E6CA; padding:5px; margin:10px 0px 0px 0px; font-family: Arial, Helvetica, sans-serif; font-size:18px; color:#669900; font-weight:bold;}
#menu li {position: relative;}
#menu ul {position: absolute;left: 360px;top:0;display:none}
#menu li:hover+ul { display: block; }

Все проблемы в основном из-за индификатора #menu

Это конечно не точно по описанию,но иначе вообще не работает

Так если я уберу + в #menu li:hover+ul { display: block; }, меню перестанет появляться

Вообще первый вопрос,если можно, как я понимаю эту строчку,блок появляется когда наводим курсор на содержание тэга

[*] и когда после него СЛЭДУЭТ тэг

. + говорит что они соседние, т.е. уже не допускается любой уровень вложенности как для контекстных тэгов.

Но у них в примере НЕ ИСЧЕЗАЕТ выпадающее меню при переходе на него с родительского,хотя в коде тоже после

[*] выпадающего меню никаких

больше нет.

Делаю все в Опере,в IE даже лезть еще боюсь.Вот такие глобальные не понятки, и как видете position

тоже проблемы, никаких относительных позиций не выходит.

BJ · March 20, 2008

На сайте есть много примеров такого вида меню!

Dimitry Wolotko · March 20, 2008

Реально - примеров на форуме уйма, а сидеть и копаться в вашем коде, мне лениво.

Sign In

Выпадающее меню на CSS

Question

net

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

BJ

Link to comment

Share on other sites

Dimitry Wolotko

Link to comment

Share on other sites

Обсуждения

Forums

Important Information