Hi,
I have used CSS to display a list and hide sublist. The sublist is to be displayed on hovering over the list item.
This works fine with Mozilla, FireFox. But the sublist does not get hidden in Internet Explorer.
I am giving the code below.
Regards,
Rekha.
My code :
<!DOCTYPE HTML PUBLIC "_//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<head>
<title> Internal Webpage </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Mozilla/4.78[en] (Windowns Nt 5.0; U) [Netscape]">
<script>
function setAction(){
document.dictForm.action="http://dictionary.cambridge.org/results.asp?searchword="+document.dictForm.searchword.value;
document.dictForm.submit();
}
</script>
<style>
ul.nav,
.nav ul{
/*Remove all spacings from the list items*/
margin: 0;
padding: 0;
cursor: default;
list-style-type: none;
display: inline;
}
ul.nav{
display: table;
}
ul.nav>li{
display: table-cell;
position: relative;
padding: 2px 6px;
}
ul.nav li>ul{
/*Make the sub list items invisible*/
display: none;
position: absolute;
max-width: 40ex;
margin-left: -6px;
margin-top: 2px;
top: auto;
left: auto;
}
ul.nav li:hover>ul {
/*When hovered, make them appear*/
display : block;
}
ul.nav>li:hover {
padding-right: 1px;
}
.nav ul li a{
/*Make the hyperlinks as a block element, sort of a hover effect*/
display: block;
padding: 2px 10px;
}
/*** Menu colors (customizable) ***/
ul.nav,
.nav ul,
.nav ul li a{
background-color: #fff;
color: #369;
}
ul.nav li:hover,
.nav ul li a:hover {
background-color: #369;
color: #fff;
}
ul.nav li:active,
.nav ul li a:active {
background-color: #036;
color: #fff;
}
ul.nav,
.nav ul{
border: 1px solid #369;
}
.nav a{
text-decoration: none;
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
body {background-color: pink;}
ul.nav li>ul{
display:none;
}
ul.nav li>ul.hover {
display:block;
}
li a {
display:inline-block;
}
nav.ul li {
display:none;
}
nav.ul li ul li a:hover {
display:block;
}
li {
margin-bottom: -2px;
}
</style>
<![endif]-->
</head>
<body style="background-color:#E0E0E0">
<h1> <center> <font size=+2 color="#330099" face="Times">Internal Webpage</center> </font> </h1>
<br>
<DIV align=center>
<ul class="nav">
<table><tr><td>
<li><strong><a href=#>MIS<!--[if gte IE 7]><!--></a><!--<![endif]--></strong>
<!--[if lte IE 6]><table width=2><tr><td><![endif]-->
<ul>
<li> <a href="./index.jsp">Management Information System(MIS)</a>
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</td><td>
<li><strong>HR Resources<!--[if gte IE 7]><!--></strong><!--<![endif]-->
<!--[if lte IE 6]><table width=10><tr><td><![endif]-->
<ul>
<li><a href="./greytip.in/">Greytip Login</a>
<li> <a href="./PhoneBook.jsp">Employee List</a>
<li><a href="./RewardsSummary.jsp">Employee Rewards</a></li>
<li> <a href="./GoalSettingSummary.jsp">PMS Summary Report</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</td>
<!--
<li><strong>Finance Resources</strong>
<ul>
<li><a href="./html/finance/travel_expense_reports.html">Travel Expense Form</a></li>
<li> <a href="./html/finance/expense_stmt_official.xls">Misc. Official Expense Form</a></li>
<li><a href="./html/finance/medical_reimbursement.xls">Medical Reimbursement Form</a></li>
<li><a href="./html/finance/Salary_advance_form.xls">Salary Advance Request Form</a></li>
</ul>
</li>
<li><strong>Quality Resources</strong>
<ul>
<li><a href="./html/TQM/project_planning_process.htm">Project Planning Process</a></li>
<li><a href="./html/TQM/abbr_project_def.doc">Abbreviated Project Definition</a></li>
<li><a href="./html/TQM/release_procedure.doc">Release Procedure</a></li>
<li><a href="./html/TQM/req_specs_template.doc">Requirement Specification</a></li>
<li><a href="./html/TQM/post_project_analysis.doc">Post Project Analysis</a></li>
<li><a href="./html/TQM/customer_feedback_form.doc">Customer Feedback Form</a></li>
<li><a href="./html/TQM/doc_rev_checklist.doc">Document Review Checklist</a></li>
</ul>
</li>
-->
</ul>
</tr></table>
</DIV>
<center><table COLS=2 WIDTH="80%">
<tr>
<td>
<ul TYPE=SQUARE>
<li> <a href="index.jsp">Management Information System(MIS)</a></li>
</td>
<td>
<li><a href="news_announce.html"> News/Announcements</a></li>
</td>
</ul>
</tr>
<tr>
<td>
<ul TYPE=SQUARE>
<li> <a href="hrpersonnel.htm">HR Resources</a></li>
</td>
<td>
<li> <a href="html/holidays.html">Holiday List - 2009</a></li>
</td>
</ul>
</tr>
<tr>
<td>
<ul TYPE=SQUARE>
<li> <a href="html/finance/Finance.htm">Finance Resources</a></li>
</td>
<td>
<li><a href="html/KSS/KSS.html">KSS Presentation</a></li>
</td>
</ul>
</tr>
<tr>
<td>
<ul TYPE=SQUARE>
<li> <a href="html/TQM/TQM_page.html">Quality Resources</a></li>
</td>
<td>
<li> <a href="html/training/training_page.html">Training Resources</a></li>
</td>
</ul>
</tr>
<tr>
<td>
<ul TYPE=SQUARE>
<li> <a href="html/tech/tech_resource_page.html">Technical Resources</a></li>
</td>
<td>
<li><a href="miscellaneous.htm">Miscellaneous</a></li>
</td>
</ul>
</tr>
</table>
<ul>
<table BORDER=0 CELLSPACING=1 CELLPADDING=3 WIDTH="150" style="border-style: solid; border-width:
1px; border-color: #E0E0E0;"align=left>
<tr>
<td><a href="http://dictionary.cambridge.org/"><img SRC="html/sitesearch_header.gif" ALT="Cambridge Dictionaries Online" BORDER=0 height=30 width=169></a></td>
</tr>
<tr>
<td>
<table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="150" ></td></tr>
<tr>
<td NOWRAP>
<!--
<form name="dictForm" action="http://dictionary.cambridge.org/results.asp"
method="post" onsubmit='javascript:setAction();'><input type="text"
name="searchword" size="10" style="width: 100px; font-size: 12px; font-face: Verdana, Arial,
sans-serif;"><input type="image" src="http://dictionary.cambridge.org/assets/common/buttons/search/search_FFFFFF.gif"border="0">
<input type="hidden" name="dict"
value="B"></form>
-->
</td></tr>
</table>
</ul>
</body>
</html>
