glenelkins Posted December 10, 2008 Share Posted December 10, 2008 Hi Here is my CSS and XHTML for a drop down menu. The example is at: http://domain2051105.sites.fasthosts.com/test/ put the mouse over "Services". It works in FF but in IE 7 its not showing the drop down: CSS body, ul, li { margin: 0px; padding: 0px; } #nav { list-style: none; height: 32px; } #nav li { float:left; line-height: 32px; } #nav li a { display: block; text-indent: -3000px; overflow: hidden; } #nav li ul { position: absolute; list-style: none; display: none; width: 300px; } #nav li ul li a { width: 300px; } #nav li:hover ul { display: block; } #nav li:hover ul li a { padding-left: 5px; text-indent: 0px; } #nav0 a {width:71px;background:#3b3d27 url(/i/nav0.gif) no-repeat;} #nav0 a:hover {background:#9883a7 url(/i/nav0.gif) 0 -32px no-repeat;} #nav1 a {width:102px;background:#3b3d27 url(/i/nav1.gif) no-repeat;} #nav1 a:hover {background:#9883a7 url(/i/nav1.gif) 0 -32px no-repeat;} #nav2 a {width:128px;background:#3b3d27 url(/i/nav2.gif) no-repeat;} #nav2 a:hover {background:#9883a7 url(/i/nav2.gif) 0 -32px no-repeat;} #nav3 a {width:119px;background:#3b3d27 url(/i/nav3.gif) no-repeat;} #nav3 a:hover {background:#9883a7 url(/i/nav3.gif) 0 -32px no-repeat;} #nav4 a {width:99px;background:#3b3d27 url(/i/nav4.gif) no-repeat;} #nav4 a:hover {background:#9883a7 url(/i/nav4.gif) 0 -32px no-repeat;} #nav5 a {width:141px;background:#3b3d27 url(/i/nav5.gif) no-repeat;} #nav5 a:hover {background:#9883a7 url(/i/nav5.gif) 0 -32px no-repeat;} #nav1 ul li a { background: #afafd9; color: #05036e; } #nav1 ul li a:hover { background: #b97df2; color: #05036e; } #nav3 ul li a { background: #afafd9; color: #05036e; } #nav3 ul li a:hover { background: #b97df2; color: #05036e; } XHTML <head> <link rel="stylesheet" type="text/css" href="css/main.css" /> </head> <ul id="nav"> <li id="nav0"><a href="/">Home</a></li> <li id="nav1"><a href="/services">Services</a> <ul> <li><a href="#">Gaurd And Chase Vessels</a></li> <li><a href="#">Environmental Research Vessels</a></li> <li><a href="#">Navigation Assessments</a></li> <li><a href="#">Marine Consultancy</a></li> <li><a href="#">Commercial Fisheries Assessment</a></li> <li><a href="#">Finishg Vessel Management</a></li> <li><a href="#">Desktop Studies</a></li> <li><a href="#">Film Support & Media</a></li> </ul> </li> <li id="nav2"><a href="/recruitment">Recruitment</a></li> <li id="nav3"><a href="/our-vessels">Our Vessels</a> <ul> <li><a href="#">Maggie M</a></li> <li><a href="#">Mary Ann</a></li> <li><a href="#">Ocean Dancer</a></li> <li><a href="#">Sorsum Corda</a></li> </ul> </li> <li id="nav4"><a href="/contact">Contact</a></li> <li id="nav5"><a href="/links">Links</a></li> </ul> Quote Link to comment Share on other sites More sharing options...
departedmind Posted December 10, 2008 Share Posted December 10, 2008 Well, when I copied your code and it worked properly in IE7 (in my pc). Don't know why it is not working in the live site... confused. Quote Link to comment Share on other sites More sharing options...
glenelkins Posted December 10, 2008 Author Share Posted December 10, 2008 check it out now. it was a doctype issue works fine now Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.