Guest khaleel Posted April 21, 2010 Share Posted April 21, 2010 HiI am having problem in displaying vertical drop down menu. work fine in chrome but not in IE. this is the html and css file.<html><head><title> List of Hospital values</title><link href="new.css" rel="stylesheet" type="text/css" media="screen"/></head><body><ul id="navbar"> <li><a href="##">OPD Maintenance</a> <ul> <li><a href="#">Registration</a></li> <li><a href="#">Diagnose</a></li> <li><a href="#">Laboratary Test</a></li> </ul> </li> <li><a href="#">IPD Maintenance</a> <ul> <li><a href="#">Registration</a></li> <li><a href="#">Diagnose</a></li> <li><a href="#">Laboratary Test</a></li> <li><a href="#">Admission</a></li> <li><a href="#">Visits</a></li> </ul> </li> <li><a href="#">Donation Management</a> <ul> <li><a href="">Donor detail</a></li> <li><a href="">Lab Test detail</a></li> <li><a href="#">Donor Medication</a></li> </ul> </li> <li><a href="#">Billing</a> <ul> <li><a href="#">IPD billing</a></li> <li><a href="#">OPD billing</a></li> </ul> </li> <li> <a href="#">Administrative Task</a> <ul> <li><a href="#">Manage user</a></li> <ul> <li><a href="#">Add User</a></li> <li><a href="#">Delete User</a></li> </ul> <li><a href="#">Manage Doctors</a></li> <ul> <li><a href="#">Edit Doctor</a></li> <li><a href="#">Add Doctor</a></li> <li><a href="#">Delete Doctor</a></li> </ul> <li><a href="#">Manage Staff</a></li> <ul> <li><a href="#">Edit Staff</a></li> <li><a href="#">Add Staff</a></li> <li><a href="#">Delete Staff</a></li> </ul> <li><a href="#">Manage Departments</a></li> <ul> <li><a href="##">Add Department</a></li> <li><a href="#">Delete Department</a></li> <li><a href="#">Edit Department</a></li> </ul> <li><a href="#">Manage Rooms</a></li> <ul> <li><a href="#">Add Room</a></li> <li><a href="#">Delete Room</a></li> <li><a href="#">Edit Room</a></li> </ul> </ul> </li> <li><a href="#">Laboratory</a> <ul> <li><a href="">Laboratory detail</a></li> <li><a href="">Lab Test detail</a></li> </ul> </li> <li><a href="#">Organ Management</a> <ul> <li><a href="">Laboratory detail</a></li> <li><a href="">Lab Test detail</a></li> </ul> </li> <li><a href="#">Blood Management</a> <ul> <li><a href="">Blood Bank</a></li> <li><a href="">Blood Taken</a></li> <ul> <li><a href="">Hospitals</a></li> <li><a href="">Donors</a></li> </ul> <li><a href="">Blood Endorsed</a></li> <ul> <li><a href="">Persons</a></li> <li><a href="">Hospitals</a></li> <li><a href="">IPD</a></li> </ul> </ul> </li> <li><a href="#">Emergency Services</a> <ul> <li><a href="">Estaff Detail</a></li> <li><a href="">Add Estaff</a></li> <li><a href="">Delete Estaff Detail</a></li> <li><a href="">Edit Estaff Detail</a></li> <li><a href="">Ambulance Detail</a></li> <li><a href="">Ambulance Route</a></li> </ul> </li> <li><a href="#">Inventory</a> <ul> <li><a href="">Stock</a></li> <li><a href="">Suppliers</a></li> <li><a href="">Purchase Receipt</a></li> <li><a href="">Purchase return receipt</a></li> <li><a href="">Sales Receipt</a></li> <li><a href="">Sales Return Receipt</a></li> </ul> </li> </ul> CSS file is#navbar { margin: 0; padding: 0; height: 1em; }#navbar li { list-style: none; float: left; }#navbar li a { display: block; padding: 3px 8px; background-color: #5e8ce9; color: #fff; text-decoration: none; } #navbar li ul { display: none; width: 10em; /* Width to help Opera out */ background-color: #69f;} #navbar li:hover ul { display: block; position: absolute; margin: 0; padding: 0; }#navbar li:hover li { float: none; }#navbar li:hover li a { background-color: #69f; border-bottom: 1px solid #fff; color: #000; }#navbar li li a:hover { background-color: #8db3ff; }need urgent answer Link to comment Share on other sites More sharing options...
jeffman Posted April 21, 2010 Share Posted April 21, 2010 It's usually helpful if you explain what exactly doesn't work. If it is what I think it is, I may have an answer. If it doesn't work, you've lost nothing. Here is the way you currently markup each menu section: <li><a href="##">OPD Maintenance</a><ul><li><a href="#">Registration</a></li><li><a href="#">Diagnose</a></li><li><a href="#">Laboratary Test</a></li></ul></li> I have noticed that sometimes IE wants the item before the <ul> to be a block-level iten, like a <p>. So try changing the first line to this: <li><p><a href="##">OPD Maintenance</a></p> As I said, if it doesn't work, you've only wasted a few minutes. Then you can come back and explain what the real problem is. Link to comment Share on other sites More sharing options...
real_illusions Posted April 21, 2010 Share Posted April 21, 2010 IE doesn't support :hover on anything but the <a> tag.There is a hover htc 'hack' that makes IE support :hover anything without changing your code:http://www.xs4all.nl/~peterned/csshover.html Link to comment Share on other sites More sharing options...
jeffman Posted April 21, 2010 Share Posted April 21, 2010 Using a strict doctype corrects that problem in IE7 Link to comment Share on other sites More sharing options...
real_illusions Posted April 21, 2010 Share Posted April 21, 2010 Didn't know that :)The OP hasn't even got a doctype, so I guess that would also help Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.