HTML:
CSS:
#nav { background: url(../images/toolbar_div.jpg) 0 0 no-repeat; margin: 0; padding: 0; height: 30px; } #nav a { text-transform: uppercase; font-size: 11px; color: #fff; float: left; text-decoration: none; display: block; cursor: pointer; line-height: 30px; padding: 0 15px; } #nav a.topdaddy, #nav li a { background: url(../images/toolbar_div.jpg) 100% 0 no-repeat; } #nav li a:hover{} #nav li li a{ background: none; font-weight: normal; padding: 0; text-indent: 15px; text-transform: uppercase; color: #939393; line-height: 30px; } #nav ul li ul li a:hover{ background: none; } #nav ul li a:hover, #nav ul li ul li ul li a:hover { color: #fff; } #nav, #nav ul { float: left; list-style: none; margin: 0; padding: 0; } /*--------hover tlo--------*/ #nav ul a:hover{ background-color:#4b0000; } /*---------------------------*/ #nav li li { padding: 0; background: none; border-bottom: 1px solid #590000; border-top: 1px solid #7e0000; } #nav ul ul a { display: block; color: #ffffff; text-decoration: none; width: 167px; text-transform: none; font-size: 11px; text-align: left; } #nav li { float: left; padding: 0; background: none; height: 30px; } #nav ul li { position: relative; z-index: 1; } #nav li ul { top: 30px; position: absolute; left: -999em; height: auto; width: 170px; font-weight: normal; border-width: 0; margin: 0; padding: 0; border-right: 1px solid #590000; border-left: 1px solid #590000; border-bottom: 1px solid #590000; border-top: 1px solid #590000; } #nav ul { padding: 0; margin: 0; margin-left: 2px; } #nav li li { float: left; padding: 0; width: 170px; } #nav li ul ul { margin: -25px 0 0 170px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul{ z-index: 100; left: 0; } #nav li:hover, #nav li.sfhover { left: 0; background-color: #4b0000; } ul#mainlevel-nav li a:hover { color: #fff; background: #c64934; } #nav li:hover a, #nav li.sfhover a { color: #fff; } #nav li li:hover a, #nav li li.sfhover a { color: #fff; } #nav li li:hover a:hover, #nav li li.sfhover a:hover { color: #fff; } #nav ul ul a { background: none; } #nav li.active {} #nav li li.active { background: none; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul{ background: #6c0000; }
No i wszystko działa ok tylko nie pod IE 6 więc znalazłem taki skrypcik oby w IE 6 działało:
<script type="text/javascript"> <!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]> </script>
No i teraz zaczęły się jaja o ile w IE 6 się rozwija to zarówno w IE 6 i w IE 7 jak raz najedzie się na menu to kolor zostaje i jak się rozwinie to nie chce się zwinąć a co najciekawsze znalazłem inne strony oparte na tej samej skórce i u nich ten sam kod działa bez zarzutu?
ok problem rozwiązany można temat wywalić albo może komuś się przyda powyższy kod działa tylko że dodawałem ten kod przez php i zapomniałem zamienić
<?php //na ?>