cschenker Posted September 5, 2008 Share Posted September 5, 2008 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 More sharing options...
Kingy Posted September 5, 2008 Share Posted September 5, 2008 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.