Jump to content

Firefox Drop Down Problems


cschenker
 Share

Recommended Posts

I am starting to get into putting together websites using CSS. I have just put together a test template to play around with and am now trying to create a drop down menu, but found it just expands the drop down menu in Firefox 3. In IE it seems to work just fine when you hover over it. Please have a look at my below code and let me know what I am missing. Thank you.HTML:

<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml"><head><meta content="en-us" http-equiv="Content-Language" /><title>Untitled 1</title><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><link href="masterstyles.css" rel="stylesheet" type="text/css" /></head><body><div id="masthead">	<h1>Banner Head<a name="Top"></a></h1></div><div id="top_nav">	<ul>		<li><a href="http://www.bentonscrossroads.org">Welcome</a></li>		<li><a href="http://www.msn.com">About BCR</a></li>		<ul>			<li><a href="http://www.msn.com">Rev. Lee</a></li>			<li><a href="http://www.msn.com">Youth Minister</a></li>			<li><a href="http://www.msn.com">Locate Us</a></li>			<li><a href="http://www.msn.com">Contact Us</a></li>		</ul>		<li><a href="http://www.yahoo.com">List 3</a></li>		<li><a href="http://www.googlel.com">List 4</a></li>		<li><a href="http://www.bentonscrossroads.org">List 5</a></li>	</ul></div><div id="container">	<div id="left_col">		<ul>			<li><a href="http://www.bbt.com/">Link 6</a></li>			<li><a href="http://disturbedmusic.com/">Link 7</a></li>			<li><a href="http://scottslawnservice.com/">Link 8</a></li>			<li><a href="http://1065.com/">Link 9</a></li>			<li><a href="http://theknot.com/">Link 10</a></li>		</ul>		<p>Test Text</p>	</div>	<div id="page_content">		<h2>Expression Web</h2>		<p>This is an example template, that forms part of a comprehensive 		tutorial, detailing how to build a web site template using Expression 		Web (Expression Web ) and CSS.</p>		<p>When creating a web site template using CSS, we need to understand 		that everything we put on the page is in a box and each box has a 		natural boundary. The boxes and boundaries of these imaginary boxes are 		completely controllable by you. To make web sites that display the same 		in all browsers means that you have to tell the browser what to do with 		the box, boundary and the contents of the box (your text or graphics) 		That's how CSS works.</p>		<p>CSS is very flexible and one thing can be done in many different 		ways. The approach to this tutorial has been to offer the user, the 		chance to build an Expression Web template whilst trying to use a range 		of the styles available to you. This is a basic template that will form 		the basis of many examples in our other tutorials and will be referred 		to often.</p>		<p>Upon completion, you should have built an identical site to this. It 		will render correctly in both Internet Explorer and Firefox and will be 		XHTML 1.0T and CSS2.1 valid.</p>		<p>The following examples use HTML tags and CSS.</p>		<h3>Heading 3</h3>		<h4>Heading 4</h4>		<h5>Heading 5</h5>		<h6>Heading 6</h6>		<ul>			<li>Bulleted - unordered list </li>			<li>two </li>			<li>three </li>			<li>four</li>		</ul>		<ol>			<li>Number list - ordered list </li>			<li>two </li>			<li>three </li>			<li>four </li>			<li>five</li>		</ol>		<p>This is normal paragraph text it should look like the text  		above the headings.</p>		<p class="specialoffer">This is also normal text except that a .class 		has been applied to the paragraph.</p>	</div></div><div id="footer">	<a href="#Top">Back to the Top</a></div></body></html>

CSS:

body {	margin: 0;	padding: 0;	display: block;}#masthead {	background-color: #7D5F50;	display: block;}#top_nav {	background-color: #C98080;	height: 20px;	padding-bottom: 1px;	display: block;}#container {	padding: 0px;	margin: 0px;	min-width: 600px;	background-color: #E1B9B9;	display: block;}#left_col {	margin: 1px;	padding: 1px;	width: 200px;	float: left;	background-color: #E1B9B9;	display: block;}#page_content {	padding: 5px;	margin-left: 200px;	background-color: #E1B9B9;}#footer {	clear: both;	background-color: #C9C9C9;	background-image: url('images/footertile.gif');	background-repeat: repeat-x;	height: 20px;}#masthead h1 {	font-size: 160%;	font-weight: bold;	color: #FFFFFF;	margin: 0px;}#top_nav ul {	list-style-type: none;	width: 100%;	padding: 0px;	margin: 0px;}#top_nav li {	padding: 0px;	margin: 0px;	float: left;}#top_nav a {	color: #FFFFFF;	text-decoration: none;	display: block;	border: 1px solid #7D5F50;	padding-right: 5px;	background-color: #7D5F50;	margin-right: 2px;}#top_nav a:hover {	color: #FAE687;	text-decoration: none;	border: 1px solid #C99981;	background-color: #C99981;	display: block;}#top_nav ul li{	position: relative;}#top_nav ul li ul{	position: absolute;	top: 100%;	width: 100%;	left: 0;	display: none;}#top_nav ul li:hover ul{	padding: 0px;	margin: 0px;	display: block;}#left_col ul {	list-style-type: none;	width: 100%;	display: block;	margin: 0px;	padding: 0px;}#left_col li {	display: block;	padding: 0px;	margin: 0px;	border: 1px solid #FFFFFF;	background-color: #C99981;}#left_col a {	text-decoration: none;	display: block;	padding: 1px;	border: 1px solid #C99981;	text-align: center;	margin-right: 20px;	margin-left: 20px;	font-size: 100%;	background-color: #E1B9B9;	color: #FF6600;}#left_col a:hover {	color: #FFFFFF;	text-decoration: none;	border: 1px solid #C98080;	margin-right: 20px;	background-color: #C98080;}h2 {	margin: 0px;}body {	font-family: Arial, Helvetica, sans-serif;}#page_content p {	margin-top: 0px;	font-size: 80%;	display: block;}#left_col p {	font-size: 90%;	font-weight: bold;	font-family: "Courier New", Courier, monospace;}

Link to comment
Share on other sites

It's a full CSS menu you're after?Doesn't work for me on Opera either.Look at the source code of this sample, separate your menu bits out and class them all.http://pixelspread.com/demo/cssdropdown.htmlSo you'll get things like this (by the way I didn't keep things like colours in this example I just copied their example in conjunction with your site to demonstrate how it's done)CSS:

#menu{position:absolute;margin-top:10px;}#menu ul .item{display:none;}#menu ul:hover .item{display:block;background:#000;padding:1px;margin:1px;}#menu ul:hover .item a{color:#fff;text-decoration:none;}#menu ul:hover .item a:hover{color:#999;}#menu ul{width:100px;float:left;margin:0px;padding:2px;background:#b10000;list-style:none;}.clear{clear:both;height:10px;}

Menu:

<div id="menu"><ul id="item1"><li class="top">Welcome</li><li class="item"><a href="#">menu item 1</a></li><li class="item"><a href="#">menu item 2</a></li><li class="item"><a href="#">menu item 3</a></li></ul><ul id="item2"><li class="top">About BCR</li><li class="item"><a href="#">menu item 1</a></li></ul><ul id="item3"><li class="top">Rev. Lee</li><li class="item"><a href="#">menu item 1</a></li><li class="item"><a href="#">menu item 2</a></li></ul><ul id="item4"><li class="top">Youth Minister</li><li class="item"><a href="#">menu item 1</a></li><li class="item"><a href="#">menu item 2</a></li><li class="item"><a href="#">menu item 3</a></li><li class="item"><a href="#">menu item 4</a></li></ul><ul id="item5"><li class="top">Locate Us</li><li class="item"><a href="#">menu item 1</a></li><li class="item"><a href="#">menu item 2</a></li><li class="item"><a href="#">menu item 3</a></li></ul><ul id="item6"><li class="top">List 3</li><li class="item"><a href="#">menu item 1</a></li><li class="item"><a href="#">menu item 2</a></li><li class="item"><a href="#">menu item 3</a></li></ul><ul id="item7"><li class="top">List 4</li><li class="item"><a href="#">menu item 1</a></li><li class="item"><a href="#">menu item 2</a></li><li class="item"><a href="#">menu item 3</a></li><li class="item"><a href="#">menu item 4</a></li></ul><ul id="item8"><li class="top">Youth Minister</li><li class="item"><a href="#">menu item 1</a></li></ul></div>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...