Jump to content

CSS Dropdown Menu


glenelkins

Recommended Posts

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>

 

 

Link to comment
https://forums.phpfreaks.com/topic/136348-css-dropdown-menu/
Share on other sites

Archived

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

×
×
  • 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.