CSS - Drop Down Menus Not Appearing In Ie7

OK, so I think I'm smart, but I guess not. I have this site http://jwdev.ocis.net I have been working on. It has implemented a CSS only drop down menu system.

The problem. No mater what I do, including clear: left/z-index - the drop down menu "PROJECTS" falls under the page content in Firefox.

For a first, this works in IE flawlessly.

The CSS is a disaster right now as I have been hammering at it for days. Anyone lend a hand?

Hi guys,

I recently learned about pure css drop down menus.

Now if you look at my site in FF, and IE, you see in IE, it just doesn't display correctly.

Why is this? Tips on fixing this?

www.projectfinalfantasy.com

Regards,
Joseph Man.

@kravvitz

You have any idea how to do this? I can do it in all browsers except ie6, but I have no idea how to make ie6 comply...

Hello All,

I'm having a ton of difficulty on the drop down navigation bar for my site. I used webmonkey's "Add CSS Drop-Down Menus" tutorial

As I wanted a really simple, quick and easy drop down menu especially since the lists that create the menu are populated through php.

Now I found that I had to use z-index so the menu div layed on top of the text div (as other wise the menu div or the text div would overlap and obscure the other)

This all worked fine. Sadly, when I tried to put a form into one page, I realized all the input fields could not be used because of the z-indexes and the menu bar overlaying it. So again I had to find a solution and here's where I'm stuck.

Does anyone know a way I can keep it as is and have the form functional? If not, can anyone help me change the menu bar so that the second level of the list is shown on one line (therefore it won't lay on top of the form causing it to be obstructed). So I'd rollover "Telecommunications" and all the sub-categories are listed on one line

Here's the html code:
Code:

<div id="content">
<ul id=nav>
<li><a href='index.php?id=12'>About ACC</a></li>
<li><a href='index.php?id=13'>Telecommunications</a>
<ul>
<li><a href='index.php?id=6'>Telephone Systems</a>
<li><a href='index.php?id=7'>Voice Over IP Solutions</a>
<li><a href='index.php?id=5'>Local & Long Distance</a>
<li><a href='index.php?id=4'>Conferencing</a>
<li><a href='index.php?id=11'>Internet Access and Bandwidth</a><li><a href='index.php?id=10'>WAN/LAN Networking</a>
<li><a href='index.php?id=9'>Fiber Optics</a></ul></li>
<li><a href='index.php?id=14'>Our Services</a>
<ul>
<li><a href='index.php?id=8'>Cost Consulting & Analysis</a></ul></li>
<li><a href='index.php?id=19'>Contact Us</a></li>
</li>
</ul>

<div id="newscontent">

<table width="100%" border="0">
    <tbody>
        <tr>
            <td>
            <form method="post" action="mailto:spicelmf@gmail.com">
                <b>Test:<b> <br />
                <input type="text" size="71" name="title" /><br />

                <br />
                <input type="submit" value="Submit" /> <input type="reset" value="Try again" /></b> </b>
            </form>
            </td>
        </tr>
    </tbody>
</table></div>
</div>

and here's the css:
Code:

#nav {

        position: relative;

        margin: 0 auto 0 auto;

        top: 67px;

        width: 720px;
        
        left: 50px;

        padding: 0;
        
        height: 400px;
        
        /*list-style-type: none;*/

}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul li {
	position: relative;
	float: left;
        min-width: 150px;

}
li ul {
	position: absolute;
	top: 35px;
	display: none;
}
ul li a {
	display: block;
        text-align: center;
	text-decoration: none;
	line-height: 24px;
        font-size: 14px;
        color: #21448c;
	padding: 5px;
	background: #e6e3b8;
	margin: 0 2px;
        border-style: solid;
        border-width: 0 1px 1px 1px;
        border-color: #21448c;
}

ul li a:hover { background: #8da6bc; }
li:hover ul, li.over ul { display: block; }



#content {

  position: relative;
  height: 500px;
  margin: 0 auto 0 auto;
  width: 720px;
  top: 56px;
  padding: 0;      
  font-family: Arial,Helvetica,sans-serif;


}



#newscontent {

  position: absolute;
  margin: 0 auto 0 auto;
  min-height: 380px;
  top: 135px;
  padding: 0px 54px 20px 50px;
  width: 620px; 
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 10pt !important;
  z-index: -1;
  background: transparent url(maincontent_bg.png) repeat-y left top;
 
}

Thanks and apologies if this was already covered, I searched for ages and couldn't find what i was looking for.

Hi All,

When viewed in Firefox on a Mac, the drop down menu works perfectly. I am having a problem with my navigation when viewed in Safari on a Mac. I am not sure about how things function on a PC.

When viewed in Safari, the drop down menu appears unaligned with the buttons it corresponds too. For example, on the following page http://www.oharenoise.org/new/mission.htm when you mouseover "About Us" the corresponding menu shows up under "Home."

The other problem (only in Safari, as far as I know) I am having occurs on the homepage, viewed here . When you mouseover "About Us", "Newsroom", "Residential", "School" or "Technical" the drop-down menu appears in front of the Flash slideshow perfectly, until the slide changes pictures and then the menu falls behind the slide.

Any idea why these issues are occurring?

Thanks.

I have a problem and I need some help on centering the UL,LI menus instead of having it stick to the left...

Code:

#dmenu 
{
  /* font-family: Arial, Helvetica, Sans-Serif; */
  /* font-size: 12px; */
}
#dmenu li ul 
{ 
  /* top: auto; */
  /* left: auto; */
}
#dmenu li:hover ul
{
  /* lists nested under hovered list items */
  display: block;
}
#dmenu li.over ul
{
  display: block;
}
.xMenuUl
{
  text-align: center;  /* for IE stupidity */
  background-color: #FFFFFF;
  list-style-type: none;  /* hide the bullet icon */
  margin: 0;
  padding: 0;
}
.xMenuLi
{
  list-style-type: none;  /* hide the bullet icon */
  float: left;
}
.xMenuTitle
{
  display: block;
  width: 100px;
  text-indent: 0px;
  text-decoration: none;
  border: 1px solid #000000;
  padding: 4px;
  line-height: 14px;
}
.xSubmenuUl
{
  list-style-type: none;
  position: absolute;
  margin: 0;
  padding: 0;
  display: none;
  margin-top: -1px;
  background-color: #E7F7FF;
  background-position: top left;
  background-repeat: repeat-x;
  border-top: 1px solid #000000;
  border-bottom: 2px solid #000000;
  border-right: 2px solid #000000;
  border-left: 7px solid #FF0000;
}
.xSubmenuLi a
{
  padding: 3px;
  text-decoration: none;
  color: #000000;
  display: block;
  width: 250px;
}
.xSubmenuLi a:hover
{
  text-decoration: none;
  background: #336699;
  color: #FFFFFF;
}

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
 <head>
 </head>
<body>

This is a test...<br>sdfsdf<br>
<ul class="xMenuUl" id="dmenu">
 <li class="xMenuLi"><a href="" class="xMenuTitle">Home</a>
  <ul class="xSubmenuUl">
   <li class="xSubmenuLi"><a href="">Frequently asked questions</a></li>
   <li class="xSubmenuLi"><a href="">Impressum - Required by Law</a></li>
   <li class="xSubmenuLi"><a href="">Links and whos better than me</a></li>
   <li class="xSubmenuLi"><a href="">Sitemap - quick list of all links</a></li>
  </ul>
 </li>
 <li class="xMenuLi"><a href="" class="xMenuTitle">Perl</a>
  <ul class="xSubmenuUl">
   <li class="xSubmenuLi"><a href="">Trees, Twigs and XML</a></li>
   <li class="xSubmenuLi"><a href="">Perl Data Types and using Hashes</a></li>
   <li class="xSubmenuLi"><a href="">XML Data and how to write it</a></li>
   <li class="xSubmenuLi"><a href="">XML Data and why I love it</a></li>
  </ul>
 </li>
 <li class="xMenuLi"><a href="" class="xMenuTitle">SVG</a>
  <ul class="xSubmenuUl">
   <li class="xSubmenuLi"><a href="">Interactive with the mouse</a></li>
   <li class="xSubmenuLi"><a href="">Basic objects and which software</a></li>
   <li class="xSubmenuLi"><a href="">Interactive does not mean it is Flash</a></li>
   <li class="xSubmenuLi"><a href="">Animated ECMA and generating objects on the fly</a></li>
   <li class="xSubmenuLi"><a href="">Clipart and Popart</a></li>
  </ul>
 </li>
</ul>
this is a test....<br>
asdf<br>

</body>
</html>

We've recently redesigned our company's website and went live with it. Unfortunately we've just noticed on the pages with Flash on them, the CSS drop-downs go behind the text, flash objects, etc.

Does anyone know how to fix this? You can see what is happening on these pages.

http://www.callan.co.uk/locate_school.php
http://www.callan.co.uk/callanschool_student_pgs/callan_english_lessons_video.php

You'll notice in the second link the far right drop-down menu doesn't go behind the right side navigation div. I think this is because it's the flash causing it and there is no Flash under that last drop-down menu.

--------This Part Solved!---------

Hi Guys!

I have a CSS dropdown menu going on, and it's working semi-properly in Firefox, but is stuck behind the content div in IE6/7. I've tried using Z-index but either I'm altering the wrong tag or I'm way off in the wrong direction, as it ain't workin.
Here is the page:
http://www.whitecapgraphics.com/bates/front.php
If you look at it in IE, there's actually no indication that it is dropping down at all, but I know it is as I moved the drop downs up a few pixels and I could see them dropping behind the div.
PS - The Home button does not have a drop down menu.

My CSS:
Code:

#d1 {
	background-color: #003366;
	float: left;
	width: 200px;
	background-image: url(images/header_bg.gif);
	background-repeat: repeat-x;
	height: 107px;
}
#d2 {
	background-color: #1F2935;
	float: right;
	width: 477px;
	background-image: url(images/header_bg.gif);
}
#head_container {
	background-color: #000066;
	float: left;
	background-image: url(images/header_bg.gif);
	height: 107px;
}
#nav_container {
	background-color: #1F2935;
	float: left;
	width: 100%;
	background-image: url(images/nav_bar_bg.gif);
	height: 30px;
}
#page_container {
	margin: auto;
	width: 99.99%;
	height: 100%;
}
#content_container {
	background-color: #e4e4e4;
	float: left;
	width: 100%;
	background-image: url(images/content_blue_column_bg.gif);
	background-repeat: repeat-y;
	background-position: right;

}
#content {
	background-color: #e4e4e4;
	position: relative;
	margin-right:253px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
	border-right-width: 2px;
	border-right-style: solid;
	border-right-color: #000000;
	padding-left: 10px;
	padding-right: 10px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: medium;
}
#right_column {
	background-color: #CC9900;
	float: right;
	width: 253px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
}












/*____________________________________________________________*/


* {margin:0; padding:0;} /*Need to lookup this line - prevents the dropdown from sitting off kilt from the nav bar options */

/* the horizontal menu starts here */
div#nav {
	width:600px; /* sizes the nav div at a fixed width */
	float:left;
	background-color:#CCF; /* colors the div */
	background-image: url(images/nav_bar_bg.gif);
	z-index:10;
	}
div#nav li {
	float:left;	/* causes the list to align horizontally instead of stack */
	position:relative; /* positioning context for the absolutely positioned drop-down */
	list-style-type:none;	/* removes the bullet off each list item */
	border:1px solid black; /* creates dividing lines between the li elements */
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: medium;
	font-weight: bold;
	min-width: 126px;
	text-align:center;
	height:26px;
	}
div#nav li:first-child {
	border-left:1px solid; /*the first vertial line on the menu */
	}

div#nav li:hover { 
	background-color:#D1C9B9; /*sets the background of the menu items */
	}
div#nav a {
	display:block;
	padding:1px 6px; /*creates space each side of menu item's text */
	text-decoration:none;	 /* removes the underlining of the link */
	color:#D1C9B9;	/* sets the type color */
	}
div#nav a:hover {
	color:black;
	}
/* the menu ends here */
/* the drop-down starts here */
div#nav ul li ul {
	margin:0; 
	z-index:20; /* puts drop-down on top of div - Safari needs this as menu is 1px higher */
	position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */
	width:10em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/
	border-right:0; /* stops SCBs drops having two right borders - they inherit the border, IE doesn't */
	left:-1px; /*aligns the drop exactly under the menu */
	top:28px;
	}
#pyt ul li {
	background-color:#B3916B;
}
#h ul li {
	background-color:#1F2935;
}
#ri ul li{
	background-color: #827977;
}
#bn ul li{
	background-color: #455D67;
}


div#nav ul li ul li {padding:0;
	width:100%; /* makes the list items fill the list container (ul) */
	border-left:1px solid; /*  three sides of each drop-down item */
	border-bottom:1px solid;
	border-right:1px solid;
}
div#nav ul li ul li a {
	padding:1px .5em;
	font-size:small;
	text-align:left;
	vertical-align:middle;}
div#nav ul li ul li:first-child {
	border-top:1px solid; /*the top edge of the dropdown */
	}
/* make the drop-down display as the menu is rolled over */
div#nav ul li ul {display:none;} /* conceals the drop-down when menu not hovered */
div#nav ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */
div#nav ul li:hover a {color:black;}


/* THE HACK ZONE - */
/* hack for IE (all flavors) so the menu has a vertical line on the left */
* html div#nav ul {
	float:left; /* makes the ul wrap the li's */
	border-left:1px solid #000; /* adds the rightmost menu vertical line to the ul */
	}

/* add a top line to drops and pops in IE browsers - can't read :first-child */
* html  div#nav ul li ul {
	border-top:1px solid #069;
	border-left:0px; /* stops the drop inheriting the ul border */
	}

/* an Opera-only hack to fix a redraw problem by invisibly extending the ul */
/* the first-level drop stays open for 100px below the bottom but at least it works */
/* this can be reduced to as little as 22px if you don't have pop-outs */
	@media all and (min-width: 0px){
   body div#nav ul li ul {padding-bottom:22px;}
   }
/*end Opera hack */
/* END OF HACK ZONE */
/* the drop-down ends here */
/* END OF LIST-BASED MENU */




#h {
	background-color: #1F2935;
}
#ri {
	background-color: #827977;
	letter-spacing: -.06em;
}

body {
	background-color: #1F2935;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#pyt {
	background-color: #B3916B;
}
#bn {
	background-color: #455D67;
	}

#content #flash_map {
	text-align: center;
	border: 2px solid black;
	width: 660px;
	margin: auto;
}

--------****Still Need Help Here!-----------

Unrelatedly, I'm also experiencing the following quirks that I'm not knowledgeable enough to work out quickly, so tips are aprpeciated:

****1) That menu bar is 26 pixels. Is there a way to vertically center the <a> inside the <li>?

2) The word-wrapped drop down options are extending outside of the menu - which of my styles is causing this? How can I solve it? *SOLVED*

Is there any way to use multi level drop down menus that work on all browswers(IE 6 and 7, firefox, safari) without using .htc file or javascript included?

This is nice, but the css in too messy.

http://www.bluescopesteel.com

If you have any betterones please tell me.

Cheers

I'm trying to use suckerfish style drop downs, based on CSS with javascript only for an Internet Explorer hack. It's working fine for a single horizontal row of menus, however I wanted to setup a few rows of other menus underneath the first row. The problem is that the dropdown goes underneath the menus under it and I can't figure out how to fix it.

This is an example of the problem.

Any suggestions?

Hi all,

I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear.

You can find the page he
http://www.perceptes.com/topdog/

The CSS and JS (uses jQuery) can be found he
http://www.perceptes.com/topdog/css/screen.css
http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment)
http://www.perceptes.com/topdog/js/tdps.js
http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment)

For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look.

Thanks very much in advance!

Thanks for taking the time to read my question.

I have a <div id="theheader"> area at the top of my page. Below that I have another <div id="contentbox"> area to which I have applied a negative margin. It displays perfectly in Fire Fox (as you would expect) but in IE the <div id="contentbox"> with the negative margin slips behind the top <div id="theheader">.

How can I get the page to display in both browsers the way FF does.?

Thanks,

Brad

CSS
Code:

@charset "iso-8859-1";

body {
background-color: #435371;
margin: 0px;
}

#theheader {
width: 100%;
height: 150px;
background-color: #FFF3D5;
}

#navbox {
width: 12%;
height: 300px;
float: left;
background-color: #435371;
color: white;
line-height: 20px;
text-align: right;
padding-right: 8px;
padding-top: 10px;
margin-right: 40px;
}

#mainbox {
width: 100%;
float: left;
color: white;
background-color: #435371;
}

#contentbox {
width: 70%;
float: left;
background-color: white;
color: black;
margin-top: -125px;
border-style: solid;
border-width: 5px;
border-color: white;
}

#contentheaderbox {
background-color: #435371;
height: 40px;
padding: 3px;
color: white;
font-weight: bold;
font-size: 40px;
}

ul.nav {
list-style-type: none;
}

a.mainnav:link {
color: white;
text-decoration: none;
}

a.mainnav:visited {
color: aqua;
text-decoration: none;
}

a.mainnav:hover {
color: #FFFFCC;
text-decoration: underline;
}

a.mainnav:active {
color: green;
font-weight: bold;
text-decoration: none;
}

HTML
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Lyndon and April Berg Construction and Finishing</title>
<meta name="description" content="Welcome to Berg Construction and Finishing. This site has information about the company, type of work they do, and examples of past projects.">
<meta name="keywords" content="residential, construction, interior, finishing, cement, concrete, framing, finished carpentry, national association of home builders, home, house, driveway, stamp, drywall, taping, cabinet, Winnipeg, Landmark, Manitoba, Canada">
<meta name="Revisit-After" content="7 Days" />
<meta name="Robots" content="index, follow" />
<link href="LABCSS.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="theheader">Sampson and Son</div>
<div id="mainbox">
<div id="navbox">
<a class="mainnav" href="LAB.html">Framing<a><br />
<a class="mainnav" href="LAB.html">Cement<a><br />
<a class="mainnav" href="LAB.html">Drywall<a><br />
<a class="mainnav" href="LAB.html">Finished Carpentry<a><br />
<a class="mainnav" href="LAB.html">Brick and Tile<a><br />
<a class="mainnav" href="LAB.html">Taping<a><br />
</div>
<div id="contentbox">
<div id="contentheaderbox">Home</div>
<ol>
<li>pictures of past jobs</li>
<li>company credo</li>
<li>company logo</li>
<li>contact information</li>
<li>are you a part of any associations?</li>
<li>links to association sites (reciprocal)</li>
<li>types of work Lyndon does</li>
<li>experience - years in the industry, types of work done, training, certificates, tickets (like electrician)</li>
<li>experience - years in the industry, types of work done, training, certificates, tickets (like electrician)</li>
<li>experience - years in the industry, types of work done, training, certificates, tickets (like electrician)</li>
<li>experience - years in the industry, types of work done, training, certificates, tickets (like electrician)</li>
<li>experience - years in the industry, types of work done, training, certificates, tickets (like electrician)</li>
</ol>
</div>
</div>
</body>
</html>

example, look in middle of page (blank space)

it is supposed to be in the middle, but instead there is a blank space. no, the ad is not new, over 3 months old. i changed something and forget what (a while ago), now i just noticed this.

heres the code:
php Code:
Original - php Code $i = 0; $gamesperpage = 50; $adplaced = false; // display game boxes $a = 2; foreach ($games as $game) { display_gamebox('float='.$a.'&display=rating', $game); if($a == 2) $a = 1; else $a++; if(!$adplaced && $i >= count($games)/2 && $a == 2) { echo ' <div class="clearboth clearafter aligncenter"> <script type="text/javascript"> <!--google_ad_client = "pub-5687621631516277"; /* 468x60, created 3/18/08 */ google_ad_slot = "1797650152"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div>'; $adplaced = true; } $i++; } // end of foreach game echo " <div class='clearboth'><hr></div> ";

  

 $i = 0;


         


         $gamesperpage = 50;


         $adplaced = false;


         


         // display game boxes      


         $a = 2;


         


         foreach ($games as $game) {


             display_gamebox('float='.$a.'&display=rating', $game);


             if($a == 2) $a = 1;


             else $a++;


             


             if(!$adplaced && $i >= count($games)/2  && $a == 2) {


                 echo '


                 <div class="clearboth clearafter aligncenter">


                     <script type="text/javascript">


                     <!--google_ad_client = "pub-5687621631516277";


                     /* 468x60, created 3/18/08 */


                     google_ad_slot = "1797650152";


                     google_ad_width = 468;


                     google_ad_height = 60;


                     //-->


                     </script>


                     <script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js">


                     </script>


                 </div>'; 


                 $adplaced = true;


             }


             $i++;


         } // end of foreach game


         


         echo "


         <div class='clearboth'><hr></div>


         "; 

I have a div called #Nav and inside it I have created a horizontal list. The issue is unless I set the height of the Nav div to like 40px the text shows up below the div OR the entire Div gets shifted down. Its like there is a margin or padding somewhere by default that i have not unset.

Code:

<div id="header">
	<div id="wrapper">
    	<div id="navcol1"></div>
		<div id="navcol2">Insert List with Links </div>
	</div>
</div>

<div id="nav">
    <center>
		<ul class="nav">
  			<li class="nav"><a href="#home" class="nav">XRPpro</a></li>
  			<li class="nav"><a href="#home" class="nav">X-Ray Equipment</a></li>
  			<li class="nav"><a href="#home" class="nav">QuickSOAP Touchnotes</a></li>
        	<li class="nav"><a href="#home" class="nav">Online Courses</a></li>
  			<li class="nav"><a href="#home" class="nav">Chiro Marketing</a></li>
  			<li class="nav"><a href="#home" class="nav">Bohnology</a></li>
		</ul>
    </center>
</div>

Code:

#header {
	width:100%;
	height:160px;
	background-image:url(Images/header_background.jpg);
	margin-bottom:0px;
}
#nav {
	width:100%;
	background-color:#343434;
}
ul.nav	{
	list-style-type: none;
}
li.nav	{
	display: inline;
	margin-right:15px;
	font:"Century Gothic", Verdana, Geneva, sans-serif;
	font-size:12px;
}

Hello, for some reason my CSS XHTML web site shows an Iframe in the body of the body. here's the link:http://www.caillouette.com/Utilitrek/eight/members/search_inquiry.php

I've fiddled with the widths and container widths with no luck.

Can anyone tell me why this is happening?

thanks
-Sean