Jump to content

Archived

This topic is now archived and is closed to further replies.

glenelkins

CSS Dropdown Menu

By glenelkins, in CSS Help

Recommended Posts

glenelkins    0

glenelkins
Posted

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>

 

 

Share this post

Link to post
Share on other sites

departedmind    0

departedmind
Posted

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.

 

 

Share this post

Link to post
Share on other sites

glenelkins    0

glenelkins
Posted

check it out now. it was a doctype issue works fine now

Share this post

Link to post
Share on other sites
Go To Topic Listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept