Tue, 2009-04-21 09:06
Hi all,
I am new to css, I found a css menu code for my website by google search, It works fine in Google chrome and firefox but in Ie7 and 8. I will copy the code here, please tell me any solution..
CSS CODE:
#menu { width: 100%; background: #dddfff;/*00A5A5*/ border-bottom: 0px #D0DADB solid; padding-left: 10px; height: 33px; } #menu ul { display: block; margin: 0; padding: 0; line-height: 1em; list-style: none; z-index: 90 } #menu ul li { float: left; margin: 0 3px 0 0; padding: 0; font-size: 12px; line-height: 1, 5em; list-style-type: none; } #menu ul li a { float: left; display: block; width: auto; font-weight: normal; background: transparent; text-decoration: none; color: #000; margin: 0; padding: 0.9em 0.8em 0.5em 1em; } #menu ul li a:hover { color: #fff; text-decoration: none; } #menu ul li.sep { color: white; padding: 0.8em 0em 0.5em 0em; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #menu ul li a { float: none; } /* End IE5-Mac hack */ #menu ul.level2, #menu ul.level3 { position: absolute; top: 0px; left: 0px; visibility: hidden; border-left: 1px solid #fff; border-top: 1px solid #fff; border-right: 1px solid #fff; background: #80D2D2; } #menu ul.level2 li, #menu ul.level3 li { border-bottom: 1px solid #fff; float: none; margin: 0; padding: 0; width: 150px; } #menu ul.level2 li a, #menu ul.level3 li a { padding: 5px 9px 5px 5px; } #menu ul.level2 li a:hover,#menu ul.level3 li a:hover { font-weight: normal; background-color: #FF8401; background-image: none; }
HTML CODE:
<div id="menu"> <ul id="menu"> <li><a href="/index.php" title="Home">Home | </a></li> <li><a href="#" title="Access the Alpha list of all Topics available now">Topics > | </a> <ul> <li><a href="/showtopic.php" title="Select from the following Alpha-ordered Topics options">Alphabetical List</a></li> <li><a href="#" title="[THIS FEATURE IS COMING SOON...]" class="grey">Sequential List</a></li> </ul> </li> <li><a href="#" title="Access the Alpha list of all Guides available now">Guides | </a> </li> <li><a href="#" title="help">Help > | </a> <ul> <li><a href="#" title="#">Option 1</a></li> <li><a href="#" title="#" class="grey">Option 2</a></li> </ul> </li> <li><a href="/advanced" title="Advanced">Advanced</a></li> <li><form action="/search/topics" method="post"><input type="text" name="search" value="Search..." onClick="this.value=''" onBlur="this.value='Search...'"></form></li> </ul> </div>
Thank you
New Kid IT