La_Perm

А еще в иксплорере косяк, курсор на первое подменю навожу, а до второго не доезжаю((( подменю пропадает. Знаю, что такое бывает, когда промежутки между пунктами большие, но в фаерфоксе такого нет. вставила ссылку <script src="cssmenujs.js"> </script> а сам скрипт такой function cssmenuhover() { if(!document.getElementById("cssmenu")) return; var lis = document.getElementById("cssmenu").getElementsByTagName("LI"); for (var i=0;i<lis.length;i++) { lis[i].onmouseover=function(){this.className+=" iehover";} lis[i].onmouseout=function() {this.className=this.className.replace(new RegExp(" iehover\\b"), "");} } } if (window.attachEvent) window.attachEvent("onload", cssmenuhover);

Прошу прощения за беспокойство. Вот только что своими силами сделала. Покажу фрагмент моего меню <ul id="cssmenu"> <li><a href="#">Главная</a> <ul> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> </ul> </li> <li><a href="#">О нас</a> <ul> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> </ul> </li> <li><a href="#">Сервис</a> <ul> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> </ul></li> <li><a href="#">Цены</a> <ul><li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> <li><a href="#">Ссылка 3</a></li> <li><a href="#">Ссылка 4</a></li> <li><a href="#">Ссылка 5</a></li></ul></li> <li><a href="#">Контакты</a> <ul> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li></ul></li> </ul> И вот кусок css ul#cssmenu {width:auto; margin: 0; border: 0 none; padding: 0; list-style: none; background: none; height: 20px; } ul#cssmenu li { margin: 0; border: 0 none; padding: 0; float: left; display: inline; list-style: none; position: relative; height: 20px; } ul#cssmenu ul { margin: 0; border: 0 none; padding: 0; width: 200px; list-style: none; display: none; position: absolute; top: 20px; left: 0; } ul#cssmenu ul:after { clear: both; display: block; font: 1px/0px serif; content: "."; height: 0; visibility: hidden; } ul#cssmenu ul li { width: 150px; float: left; display: block !important; display: inline; } /* Main Menu */ ul#cssmenu a { border: 0px; padding: 0 10px; float: none !important; float: left; display: block; background: none; color: #f19fc1; font: bold 12px/28px Verdana, Arial; text-decoration: none; height: auto !important; height: 1%; } /* Main Menu Hover */ ul#cssmenu a:hover, ul#cssmenu li:hover a, ul#cssmenu li.iehover a { background: #2d5004; color:none; } /* Second Menu */ ul#cssmenu li:hover li a, ul#cssmenu li.iehover li a { float: none; background: none; color: #f19fc1; } /* Second Menu Hover */ ul#cssmenu li:hover li a:hover, ul#cssmenu li:hover li:hover a, ul#cssmenu li.iehover li a:hover, ul#cssmenu li.iehover li.iehover a { background: #2d5004; color:none; } ul#cssmenu ul ul { display: none; position: absolute; top: 0; left: 170px; } ul#cssmenu li:hover ul ul, ul#cssmenu li.iehover ul ul { display: none; } ul#cssmenu li:hover ul, ul#cssmenu ul li:hover ul, ul#cssmenu li.iehover ul, ul#cssmenu ul li.iehover ul { display: block; } Что я опять не так сделала? У меня все открывается как надо, но шрифт в меню одного размера. То есть я в дримвьювере меню делаю с заглавной буквы, а фаерфокс его показывает со строчной. ПОЧЕМУ?надо "Главная", а он показывает "главная"

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

Не то, чтоб я вообще не знаю, как это сделать, но запуталась в тегах. Итак, исходный css файл был таким body {margin:0; font-size:12px; line-height:20px; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; background:url(images/body.jpg) repeat-x #F7FFC4; padding-bottom:10px;} a {color:#deff00; text-decoration:none;} a:hover {text-decoration:underline;} #container {background:url(images/main_bckg.jpg) center top no-repeat; width:980px; margin:0 auto;} #logo {margin:0 90px 0 110px; background:url(images/logo_bckg.jpg) no-repeat #4A730B; padding:43px 0 69px 0; text-align:center;} #logo a {color:#FFFFFF; text-decoration:none; text-transform:uppercase; font-size:20px; font-weight:bold;} #menu {margin:0 90px 0 110px; height:28px; background:url(images/menu_bckg.jpg) no-repeat #102C04; padding:17px 0 0 30px;} #menu a {color:#FFFFFF; font-size:14px; padding:9px 10px; text-decoration:none; text-transform:lowercase;} #menu a:hover {background:url(images/menu_over.jpg) bottom center no-repeat;} #main {margin:0 90px 0 110px; background:url(images/content_bckg.jpg) no-repeat #8EB002; float:left; min-height:420px; display:inline;} #text {margin:30px 240px 0px 40px;} #text ul {padding:0; margin:10px 0 10px 40px;} #text li {list-style:none; padding-left:15px; background:url(images/li.gif) no-repeat 0px 7px;} h1 {margin:20px 0 0 0; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif; font-size:22px; font-weight:normal;} #text p {margin:10px 0;} #sidebar {float:right; width:160px; padding:0 40px 0 50px; margin-top:50px;} #sidebar h2 {font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:18px; font-weight:normal;} #sidebar ul {margin:20px 0; padding:0;} #sidebar li {list-style:none; padding:3px 0 3px 10px;} #sidebar li:hover {background-color:#2d5004;} #sidebar a {text-decoration:none; color:#deff00;} #footer {margin:0 90px 0 110px; clear:both; background:url(images/footer_bckg.jpg) center top repeat-x; height:89px; padding:53px 40px 0 40px;} #menu_footer {font-size:11px;} #menu_footer a {color:#FFFFFF; text-transform:lowercase;} #left_footer {float:left; font-size:11px; margin-top:30px;} #left_footer a {color:#FFFFFF;} #right_footer {float:right; font-size:11px; margin-top:30px;} Сейчас он выглядит вот так: body {margin:0; font-size:12px; line-height:20px; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; background:url(images/body.jpg) repeat-x #F7FFC4; padding-bottom:10px;} a {color:#ffffff; text-decoration:none;} a:hover {text-decoration:none;} #container {background:url(images/main_bckg.jpg) center top no-repeat; width:980px; margin:0 auto;} #logo {margin:0 110px 0 110px; background:url(images/logo_bckg.jpg) no-repeat #4A730B; padding:43px 0 69px 0; text-align:center;} #logo a {color:#f19fc1; text-decoration:none; text-transform:uppercase; font-size:20px; font-weight:bold;} #menu {margin:0 110px 0 110px; height:28px; background:url(images/menu_bckg.jpg) no-repeat #f19fc1; padding:17px 0 0 30px;} #menu a {color:#f19fc1; font-size:14px; padding:9px 10px; text-decoration:none; text-transform:lowercase;} #menu a:hover {background:url(images/menu_over.jpg) bottom center no-repeat;} .dropmenu ul { margin: 0; padding: 0; list-style: none; width: 80px; } ul li { position: relative; border: 0px ; padding:0px; } *+html ul li { float: left; } *+html ul li { width: 10%; } li ul { position: absolute; left: 0px; top: 29px; display: none; width: 79px; } ul li a { display: block; } ul li a:hover { display: block; } li:hover ul { display: block; } #main {margin:0 110px 0 110px; background:url(images/content_bckg.jpg) no-repeat #8EB002; eft; min-height:420px;} #text {margin:0px 140px 0px 40px;} h1 {margin:20px 0 0 0; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif; font-size:22px; font-weight:normal;} #text p {margin:10px 0;} #footer {margin:0 110px 0 110px; clear:both; background:url(images/footer_bckg.jpg) center top repeat-x; height:89px; padding:53px 40px 0 40px;} #menu_footer {font-size:11px;} #menu_footer a {color:#FFFFFF; text-transform:lowercase;} #left_footer {float:left; font-size:11px; margin-top:30px;} #left_footer a {color:#FFFFFF;} #right_footer {float:right; font-size:11px; margin-top:30px;} Я добавила в css дропменю для всплывающего меню. Сейчас html страничка выглядит вот так <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="style.css" rel="stylesheet" type="text/css" /></head> <body> <div id="container"> <!-- header --> <div id="logo"><a href="#"> </a></div> <div id="menu"> <a href="#">Главная</a> <a href="#">О нас </a> <a href="#">Сервис</a> <a href="#">Цены</a> <a href="#">Контакты</a> </div> <!--end header --> <!-- main --> <div id="main"> <div id="text" > <table border="0" cellspacing="13"> <tr> <td> <img src="foto/wed_neves_9s.jpg" width="174" height="174"></td> <td><img src="foto/wed_neves_10s.jpg" width="174" height="174" /></td> <td><img src="foto/wed_neves_10s.jpg" width="174" height="174" /></td> </tr> <tr> <td><img src="foto/wed_neves_11s.jpg" width="174" height="174" /></td> <td><img src="foto/wed_neves_12s.jpg" width="174" height="174" /></td> <td><img src="foto/wed_neves_10s.jpg" width="174" height="174" /></td> </tr> <tr> <td><img src="foto/wed_neves_13s.jpg" width="174" height="174" /></td> <td><img src="foto/wed_neves_14s.jpg" width="174" height="174" /></td> <td><img src="foto/wed_neves_10s.jpg" width="174" height="174" /></td> </tr> <tr> <td><img src="foto/wed_neves_15s.jpg" width="174" height="174" /></td> <td><img src="foto/wed_neves_16s.jpg" width="174" height="174" /></td> <td><img src="foto/wed_neves_10s.jpg" width="174" height="174" /></td> </tr> <tr> <td colspan="3" align="center"><a href="wedding.html">1</a> | 2 | <a href="wedding-3.html">3</a></td> </tr> </table> </div> </div> <!-- end main --> <!-- footer --> <div id="footer"> <div id="menu_footer"><a href="#">home</a> | <a href="#">about</a> | <a href="#">products</a> | <a href="#">services</a> | <a href="#">pricing</a> | <a href="#">contact</a> | <a href="#">sitemap</a> | <a href="#">testimonials</a> | <a href="#">etc.</a></div> <div id="left_footer">© Copyright 2008 <strong>Your Website</strong></div> <div id="right_footer"> Design by <a href="http://www.realitysoftware.ca" title="Web Design"><strong>Reality Software</strong></a> & <a href="http://www.flashmp3player.org" title="Free Flash MP3 Player"><strong>Flash Music Player</strong></a> <div style="display:none;"><a href="http://csstemplatesfree.net">free website templates for free</a></div> </div> </div> <!-- end footer --> </div> </body> Итак, требуется, чтобы при наведении на ссылки Главная, о нас, Сервис, цены, контакты появлялось подменю из 3 ссылок. Подменю должно всплывать, не справа от основного меню, а под ним, то есть - под Главная подменю из 3 ссылок, под О нас подменю из 3 ссылок и т.д. Скажу сразу, что пробовала действовать так, как написано здесь http://www.seomark.ru/dropmenu.html# но запуталась в тегах совершенно. Потому прошу помощи. Основное меню должно быть таким (см. верх картинки, т.к. боковых сайдбаров в моей переделке не предусмотрено)

А что в css написать, чтоб меню с точкой чуть левее двинулось, а то точка на узорчатый фон нагло лезет.

Дорогие пользователи! Я здесь новенькая, а уже прошу помощи, но я не знаю, как мне быть. Делаем с одной девушкой сайт. Она в фотошопе рисует, а я версткой балуюсь. Необходимо, чтобы на сайте было как бы 2 вида активных ссылок, я не знаю, как это сделать. В горизонтальном меню на одной ссылке есть подчеркивание - это обозначение стр., на которой находишься. и так же с нумерацией (только наоборот т.е. без подчеркивания та, на которой находишься + выделение цветом) и в левом меню - кружочек и выделение цветом.. это обозначение стр на которой стоишь. Сейчас имеется вот такой css(не мной написанный) * { margin:0; padding:0; } body,html { font-family:arial; background:#dcd7cb; height:100%; } a, img { outline:none; border:none; } a { text-decoration:none; cursor:pointer; } a:hover { text-decoration:underline; } a:link { color: #be692a; } #wrapper { width:990px; margin:0 auto; min-height:100%; } /* HEADER */ #header { float:left; background:url("../images/bg-header.jpg") no-repeat center; width:990px; height:337px; } .logo { float:left; background:url("../images/logo.jpg") no-repeat; width:189px; height:284px; margin:66px 0 0 43px; position:relative; z-index:1; } /* END HEADER */ /* CONTENT */ #content { float:left; width:990px; min-height:100%; background:url("../images/bg-content.jpg") repeat-y; } #left-column { float:left; width:240px; margin-left:19px; text-align:center; } #left-column h3 { border: 1px solid #D9CBBD; color: #917454; float: left; font-size: 16px; margin: 0 31px 16px; padding: 6px; background:#d8d0c4; } .nav { float:left; padding:40px 30px 0; width:180px; margin-bottom:27px; } .nav ul { list-style-type:none; } .nav ul li { text-align:left; } .nav ul li a { color:#853d08; font-size:14px; } .interesting-link { padding:0 40px; float:left; } .interesting-link ul { list-style-type:none; } .interesting-link ul li { line-height:1.1; text-align:left; } .interesting-link ul li a { color:#7e5a3a; font-size:13px; } #right-column { float:left; width:667px; margin:20px 0 0 28px; } .h-nav { display:block; margin-bottom:25px; text-align:center; } .h-nav ul { list-style-type:none; } .h-nav ul li { display:inline; margin:0 7px; } .h-nav ul li a { font-size:19px !important; color:#8b4a01 !important; } #right-column a { font-size:14px; color:#2e1304; } #right-column p { font-size:14px; color:#2e1304; margin-bottom:25px; line-height:1.3; } .our-partners { display:block; background:#d9d3c5; padding:8px 5px 12px; width:640px; text-align:center; margin-top:100px; clear: both; } .our-partners h4 { float:left; width:620px; font-size:16px; color:#917454; font-weight:normal; padding:0 10px 8px; border-bottom:1px solid #c7b7ac; text-align:left; } .link-our-partner { float:left; } .link-our-partner-center { margin:0 190px; } .link-our-partner ul { list-style-type:none; } .link-our-partner ul li { padding:0 20px; line-height:1.6; text-align:left; } .link-our-partner ul li a { color:#7e5a3a !important; font-size:14px; } .clear { clear:both; } /* END CONTENT */ /* FOOTER */ #footer { margin:0 auto; width:990px; height:103px; background:url("../images/bg-footer.jpg") no-repeat; position:relative; } .wetchik { position:absolute; left:48px; bottom:15px; } /* END FOOTER */ А вот то, к чему надо стремиться http://keep4u.ru/full/1992d6cc43b120b00b0ff080a4d0dd10.html http://keep4u.ru/full/ed30a0ae122f37295ea37bd7cc8ed041.html