Посмотрев на форуме много тем по меню понял что помогать не всем охотно хотят, но вс? же я наш?л в инете меню вклеил себе, переделал что мог, а дальше не оч то нормально вс? пошло... Мне нужно сделать чтобы при наведении на ссылки они подствечивались цветом и учеличивались я пробовал использовать псевдоклассы http://htmlbook.ru/content/?id=57] не совсем видимо понимаю что куда вставлять, в css b js времени расбираться покаместь нету, прошу помочь. <style type="text/css"> html{ height:100%; } body{ font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; font-size:0.8em; margin:0px; padding:0px; background-color:#121212; height:100%; text-align:center; } .clear{ clear:both; } #mainContainer{ width:160px; text-align:left; margin:0 auto; background-color: #121212; height:100%; } #topBar{ width:160px; height:100px; } #leftMenu{ width:200px; padding-left:10px; padding-right:10px; float:left; } #mainContent{ width: 160px; padding-right:10px; float:left; } /* General rules */ #dhtmlgoodies_slidedown_menu li{ list-style-type:none; position:relative; } #dhtmlgoodies_slidedown_menu ul{ margin:0px; padding:0px; position:relative; } #dhtmlgoodies_slidedown_menu div{ margin:0px; padding:0px; } /* Layout CSS */ #dhtmlgoodies_slidedown_menu{ width:205px; } /* All A tags - i.e menu items. */ #dhtmlgoodies_slidedown_menu a{ color: #B3B3B3; text-decoration:none; display:block; clear:both; width:170px; padding-left:2px; } /* A tags */ #dhtmlgoodies_slidedown_menu .slMenuItem_depth1{ /* Main menu items */ margin-top:1px; font-weight:bold; } #dhtmlgoodies_slidedown_menu .slMenuItem_depth2{ /* Sub menu items */ margin-top:1px; } #dhtmlgoodies_slidedown_menu .slMenuItem_depth3{ /* Sub menu items */ margin-top:1px; font-style:italic; color:blue; } #dhtmlgoodies_slidedown_menu .slMenuItem_depth4{ /* Sub menu items */ margin-top:1px; color:red; } #dhtmlgoodies_slidedown_menu .slMenuItem_depth5{ /* Sub menu items */ margin-top:1px; } #dhtmlgoodies_slidedown_menu .slideMenuDiv1 ul{ padding:1px; } #dhtmlgoodies_slidedown_menu .slideMenuDiv2 ul{ margin-left:5px; padding:1px; } #dhtmlgoodies_slidedown_menu .slideMenuDiv3 ul{ margin-left:10px; padding:1px; } #dhtmlgoodies_slidedown_menu .slMenuItem_depth4 ul{ margin-left:15px; padding:1px; } </style> <script type="text/javascript"> var expandFirstItemAutomatically = false; // Expand first menu item automatically ? var initMenuIdToExpand = false; // Id of menu item that should be initially expanded. the id is defined in the <li> tag. var expandMenuItemByUrl = true; // Menu will automatically expand by url - i.e. if the href of the menu item is in the current location, it will expand var initialMenuItemAlwaysExpanded = true; // NOT IMPLEMENTED YET var dhtmlgoodies_slmenuObj; var divToScroll = false; var ulToScroll = false; var divCounter = 1; var otherDivsToScroll = new Array(); var divToHide = false; var parentDivToHide = new Array(); var ulToHide = false; var offsetOpera = 0; if(navigator.userAgent.indexOf('Opera')>=0)offsetOpera=1; var slideMenuHeightOfCurrentBox = 0; var objectsToExpand = new Array(); var initExpandIndex = 0; var alwaysExpanedItems = new Array(); function popMenusToShow() { var obj = divToScroll; var endArray = new Array(); while(obj && obj.tagName!='BODY'){ if(obj.tagName=='DIV' && obj.id.indexOf('slideDiv')>=0){ var objFound = -1; for(var no=0;no<otherDivsToScroll.length;no++){ if(otherDivsToScroll[no]==obj){ objFound = no; } } if(objFound>=0){ otherDivsToScroll.splice(objFound,1); } } obj = obj.parentNode; } } function showSubMenu(e,inputObj) { if(this && this.tagName)inputObj = this.parentNode; if(inputObj && inputObj.tagName=='LI'){ divToScroll = inputObj.getElementsByTagName('DIV')[0]; for(var no=0;no<otherDivsToScroll.length;no++){ if(otherDivsToScroll[no]==divToScroll)return; } } hidingInProcess = false; if(otherDivsToScroll.length>0){ if(divToScroll){ if(otherDivsToScroll.length>0){ popMenusToShow(); } if(otherDivsToScroll.length>0){ autoHideMenus(); hidingInProcess = true; } } } if(divToScroll && !hidingInProcess){ divToScroll.style.display=''; otherDivsToScroll.length = 0; otherDivToScroll = divToScroll.parentNode; otherDivsToScroll.push(divToScroll); while(otherDivToScroll && otherDivToScroll.tagName!='BODY'){ if(otherDivToScroll.tagName=='DIV' && otherDivToScroll.id.indexOf('slideDiv')>=0){ otherDivsToScroll.push(otherDivToScroll); } otherDivToScroll = otherDivToScroll.parentNode; } ulToScroll = divToScroll.getElementsByTagName('UL')[0]; if(divToScroll.style.height.replace('px','')/1<=1)scrollDownSub(); } } function autoHideMenus() { if(otherDivsToScroll.length>0){ divToHide = otherDivsToScroll[otherDivsToScroll.length-1]; parentDivToHide.length=0; var obj = divToHide.parentNode.parentNode.parentNode; while(obj && obj.tagName=='DIV'){ if(obj.id.indexOf('slideDiv')>=0)parentDivToHide.push(obj); obj = obj.parentNode.parentNode.parentNode; } var tmpHeight = (divToHide.style.height.replace('px','')/1 - slideMenuHeightOfCurrentBox); if(tmpHeight<0)tmpHeight=0; if(slideMenuHeightOfCurrentBox)divToHide.style.height = tmpHeight + 'px'; ulToHide = divToHide.getElementsByTagName('UL')[0]; slideMenuHeightOfCurrentBox = ulToHide.offsetHeight; scrollUpMenu(); }else{ slideMenuHeightOfCurrentBox = 0; showSubMenu(); } } function scrollUpMenu() { var height = divToHide.offsetHeight; height-=15; if(height<0)height=0; divToHide.style.height = height + 'px'; for(var no=0;no<parentDivToHide.length;no++){ parentDivToHide[no].style.height = parentDivToHide[no].getElementsByTagName('UL')[0].offsetHeight + 'px'; } if(height>0){ setTimeout('scrollUpMenu()',5); }else{ divToHide.style.display='none'; otherDivsToScroll.length = otherDivsToScroll.length-1; autoHideMenus(); } } function scrollDownSub() { if(divToScroll){ var height = divToScroll.offsetHeight/1; var offsetMove =Math.min(15,(ulToScroll.offsetHeight - height)); height = height +offsetMove; divToScroll.style.height = height + 'px'; for(var no=1;no<otherDivsToScroll.length;no++){ var tmpHeight = otherDivsToScroll[no].offsetHeight/1 + offsetMove; otherDivsToScroll[no].style.height = tmpHeight + 'px'; } if(height<ulToScroll.offsetHeight)setTimeout('scrollDownSub()',5); else { divToScroll = false; ulToScroll = false; if(objectsToExpand.length>0 && initExpandIndex<(objectsToExpand.length-1)){ initExpandIndex++; showSubMenu(false,objectsToExpand[initExpandIndex]); } } } } function initSubItems(inputObj,currentDepth) { divCounter++; var div = document.createElement('DIV'); // Creating new div div.style.overflow = 'hidden'; div.style.position = 'relative'; div.style.display='none'; div.style.height = '1px'; div.id = 'slideDiv' + divCounter; div.className = 'slideMenuDiv' + currentDepth; inputObj.parentNode.appendChild(div); // Appending DIV as child element of <LI> that is parent of input <UL> div.appendChild(inputObj); // Appending <UL> to the div var menuItem = inputObj.getElementsByTagName('LI')[0]; while(menuItem){ if(menuItem.tagName=='LI'){ var aTag = menuItem.getElementsByTagName('A')[0]; aTag.className='slMenuItem_depth'+currentDepth; var subUl = menuItem.getElementsByTagName('UL'); if(subUl.length>0){ initSubItems(subUl[0],currentDepth+1); } aTag.onclick = showSubMenu; } menuItem = menuItem.nextSibling; } } function initSlideDownMenu() { dhtmlgoodies_slmenuObj = document.getElementById('dhtmlgoodies_slidedown_menu'); dhtmlgoodies_slmenuObj.style.visibility='visible'; var mainUl = dhtmlgoodies_slmenuObj.getElementsByTagName('UL')[0]; var mainMenuItem = mainUl.getElementsByTagName('LI')[0]; mainItemCounter = 1; while(mainMenuItem){ if(mainMenuItem.tagName=='LI'){ var aTag = mainMenuItem.getElementsByTagName('A')[0]; aTag.className='slMenuItem_depth1'; var subUl = mainMenuItem.getElementsByTagName('UL'); if(subUl.length>0){ mainMenuItem.id = 'mainMenuItem' + mainItemCounter; initSubItems(subUl[0],2); aTag.onclick = showSubMenu; mainItemCounter++; } } mainMenuItem = mainMenuItem.nextSibling; } if(location.search.indexOf('mainMenuItemToSlide')>=0){ var items = location.search.split('&'); for(var no=0;no<items.length;no++){ if(items[no].indexOf('mainMenuItemToSlide')>=0){ values = items[no].split('='); showSubMenu(false,document.getElementById('mainMenuItem' + values[1])); initMenuIdToExpand = false; } } }else if(expandFirstItemAutomatically>0){ if(document.getElementById('mainMenuItem' + expandFirstItemAutomatically)){ showSubMenu(false,document.getElementById('mainMenuItem' + expandFirstItemAutomatically)); initMenuIdToExpand = false; } } if(expandMenuItemByUrl) { var aTags = dhtmlgoodies_slmenuObj.getElementsByTagName('A'); for(var no=0;no<aTags.length;no++){ var hrefToCheckOn = aTags[no].href; if(location.href.indexOf(hrefToCheckOn)>=0 && hrefToCheckOn.indexOf('#')<hrefToCheckOn.length-1){ initMenuIdToExpand = false; var obj = aTags[no].parentNode; while(obj && obj.id!='dhtmlgoodies_slidedown_menu'){ if(obj.tagName=='LI'){ var subUl = obj.getElementsByTagName('UL'); if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true; if(subUl.length>0){ objectsToExpand.unshift(obj); } } obj = obj.parentNode; } showSubMenu(false,objectsToExpand[0]); break; } } } if(initMenuIdToExpand) { objectsToExpand = new Array(); var obj = document.getElementById(initMenuIdToExpand) while(obj && obj.id!='dhtmlgoodies_slidedown_menu'){ if(obj.tagName=='LI'){ var subUl = obj.getElementsByTagName('UL'); if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true; if(subUl.length>0){ objectsToExpand.unshift(obj); } } obj = obj.parentNode; } showSubMenu(false,objectsToExpand[0]); } } window.onload = initSlideDownMenu; </script> ну и <div id="mainContainer"> <div id="leftMenu"> <ul> <li><a href="#">Products</a> <ul> <li><a href="#">Menus</a> <ul> <li><a href="http://www.dhtmlgoodies.com">Download</a></li> <li><a href="http://www.dhtmlgoodies.com">Demo</a></li> </ul> </li> <li><a href="#">Calendar scripts</a> <ul> <li><a href="http://www.dhtmlgoodies.com">Download</a></li> <li><a href="http://www.dhtmlgoodies.com">Demo</a></li> <li><a href="#">Is it cross browser?</a> <ul> <li><a href="http://www.dhtmlgoodies.com">yes it is</a></li> </ul> </li> </ul> </li> <li><a href="#">Window scripts</a> <ul> <li><a href="http://www.dhtmlgoodies.com">Download</a></li> <li><a href="http://www.dhtmlgoodies.com">Demo</a></li> </ul> </li> <li><a href="#">Form widgets</a> <ul> <li><a href="http://www.dhtmlgoodies.com">Download</a></li> <li><a href="http://www.dhtmlgoodies.com">Demo</a></li> </ul> </li> </ul> </li> <li><a href="#">Support</a> <ul> <li><a href="http://www.dhtmlgoodies.com">Phone</a></li> <li><a href="http://www.dhtmlgoodies.com">Email</a></li> <li><a href="http://www.dhtmlgoodies.com">QnA</a></li> </ul> </li> <li><a href="#">History</a> <ul> <li><a href="http://www.dhtmlgoodies.com">1900 - 1940</a></li> <li><a href="http://www.dhtmlgoodies.com">1941 - 1980 </a></li> <li><a href="http://www.dhtmlgoodies.com">1981 - Present time</a></li> </ul> </li> <li><a href="#">The team</a> <ul> <li><a href="#">Person A</a> <ul> <li><a href="#">CV</a> <ul> <li><a href="http://www.dhtmlgoodies.com">Job 1</a></li> <li><a href="http://www.dhtmlgoodies.com">Job 2</a></li> <li><a href="http://www.dhtmlgoodies.com">Job 3</a></li> </ul> </li> <li><a href="http://www.dhtmlgoodies.com">Education</a></li> <li><a href="#">Experience</a> <ul> <li><a href="#">Job 1</a> <ul> <li><a href="http://www.dhtmlgoodies.com">Accomplished this</a></li> <li><a href="http://www.dhtmlgoodies.com">Accomplished that</a></li> </ul> </li> <li><a href="http://www.dhtmlgoodies.com">Job 2</a></li> <li><a href="http://www.dhtmlgoodies.com">Job 3</a></li> </ul> </li> </ul> </li> <li><a href="http://www.dhtmlgoodies.com">Person B</a></li> <li><a href="http://www.dhtmlgoodies.com">Person C</a></li> <li><a href="http://www.dhtmlgoodies.com">Person D</a></li> <li><a href="http://www.dhtmlgoodies.com">Person E</a></li> </ul> </li> <li><a href="#">Locations</a> <ul> <li><a href="http://www.dhtmlgoodies.com">Norway</a></li> <li><a href="http://www.dhtmlgoodies.com">United States</a></li> <li><a href="http://www.dhtmlgoodies.com">United Kingdom</a></li> <li><a href="http://www.dhtmlgoodies.com">Sweden</a></li> <li><a href="http://www.dhtmlgoodies.com">Denmark</a></li> <li><a href="http://www.dhtmlgoodies.com">Finland</a></li> </ul> </li> </ul> </div> <!-- END OF MENU --> </div> <div id="mainContent"> </div> <div class="clear"></div> </div> ICQ:383232985 MSN:sj.serj@gmail.com Надеюсь на вашу помощь.
