Jump to content

Hover Menu Problems

cschenker

By cschenker
in CSS

Recommended Posts

cschenker Newbie

cschenker

Posted
Posted

I am just getting starting on building a website using CSS. I have created a test template and am having trouble creating a drop down menu when hovering over About BCR. The menu does not display when I hover over and if I display the menu then it looks different in IE than it does in Firefox.Can someone tell me what I am missing?HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"><html dir="ltr" xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]"><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" /><style type="text/css"></style></head><body><div id="masthead"> <h1>Banner Head<a name="Top"></a></h1></div><div id="top_nav"> <ul>  <li><a href="[url="http://www.bentonscrossroads.org"]http://www.msn.com">About[/url] BCR</a></li>  <div id="drop_down1">  <ul>   <li><a href="[url="http://www.msn.com"]http://www.msn.com">Rev[/url]. Lee</a></li>   <li><a href="[url="http://www.msn.com"]http://www.msn.com">Youth[/url] Minister</a></li>   <li><a href="[url="http://www.msn.com"]http://www.msn.com">Locate[/url] Us</a></li>   <li><a href="[url="http://www.msn.com"]http://www.msn.com">Contact[/url] Us</a></li>  </ul>  </div>  <li><a href="[url="http://www.yahoo.com"]http://www.yahoo.com">List[/url] 3</a></li>  <li><a href="[url="http://www.googlel.com"]http://www.googlel.com">List[/url] 4</a></li>  <li><a href="[url="http://www.bentonscrossroads.org"]http://www.bentonscrossroads.org">List[/url] 5</a></li> </ul></div><div id="container"> <div id="left_col">  <ul>   <li><a href="[url="http://www.bbt.com/"]http://www.bbt.com/">Link[/url] 6</a></li>   <li><a href="[url="http://disturbedmusic.com/"]http://disturbedmusic.com/">Link[/url] 7</a></li>   <li><a href="[url="http://scottslawnservice.com/"]http://scottslawnservice.com/">Link[/url] 8</a></li>   <li><a href="[url="http://1065.com/"]http://1065.com/">Link[/url] 9</a></li>   <li><a href="[url="http://theknot.com/"]http://theknot.com/">Link[/url] 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:

  /* CSS layout */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;}#drop_down1 ul { padding: 0px; margin: 0px; width: 100%; list-style-type: none; position: absolute;}#drop_down1 ul li { padding: 0px; margin: 0px; display: none;}#drop_down1 ul li:hover { 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

Archived

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

Go to topic listing
×
×
  • Create New...