CSS - Dropdown Menu Not Working Properly In Sidebar (ie)

Hi,

I am trying to make a dropdown menu by using only CSS and no Javascript.

Here is my HTML

Code:

<ul id="nav">
										                                            <li>
<a href="/family-flowers.html"><span>Family Flowers</span></a>
<ul>
<li>
<a href="/family-flowers/anniversary-flowers.html"><span>Anniversary Flowers</span></a>
</li>
<li>
<a href="/family-flowers/birthday-flowers.html"><span>Birthday Flowers</span></a>
</li>

<li>
<a href="/family-flowers/christmas-bouquets.html"><span>Christmas Bouquets</span></a>
</li>
<li>
<a href="/family-flowers/new-baby.html"><span>New baby</span></a>
</li>
</ul></li>
                                                                                    <li class="level item-2 nav-congratulation">
<a href="/congratulation.html"><span>Congratulation</span></a>
</li>
                                                                                    <li class="level item-3 nav-corporate">
<a href="/corporate.html"><span>Corporate</span></a>

</li>
                                                                                    <li class="level item-4 nav-get-well">
<a href="/get-well.html"><span>Get Well</span></a>
</li>
                                                                                    <li class="level item-5 nav-love">
<a href="/love.html"><span>Love Bouquets</span></a>
</li>
                                                                                    <li class="level item-6 nav-mixed">
<a href="/mixed.html"><span>Mixed</span></a>
</li>
                                                                                    <li class="level item-7 nav-monthly">

<a href="/monthly.html"><span>Monthly</span></a>
</li>
                                                                                    <li class="level item-8 nav-funeral">
<a href="/funeral.html"><span>Funeral</span></a>
</li>
                                                                                    <li class="level item-9 nav-window">
<a href="/window.html"><span>Window plants</span></a>
</li>
                                                                                
										</ul>
						

and this is my CSS
Code:

#nav { list-style:none; margin:0; padding:0; width:150px; }

#nav li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
	}

#nav li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

#nav li:hover ul { display: block; }

everything is fine, only on my hovering, the sub UL is not displaying even i made it to display as BLOCK on hover.

can anybody help with this please?

thank you very much

[edit]

in fact it is working in FF but not in IE

[/edit]

Hey there again!

I have been at it ALLLLLLLLLLLL day, trying to figure out this blasted css menu to work in IE6!!!

It works fine in FF but dosnt seem to like IE6 and was wondering if someone could please help me figure out the problem

The first dropdown block ( <ul class="nav"> ) works fine but the second block ( <ul class="sub"> ) inside the first block ( <ul class="nav"> ) doesn't show properly in IE6!!

Here is a screen shot of my problem:


Here is my css:
PHP Code:
.navbar :hover ul.nav {
padding:0; margin:0; 
left:0; top:40px; 
width:136px; 
z-index:604;
background-color:#333333; }

.navbar :hover ul.nav li a {
display:block; 
height:24px; width:136px;}

.navbar :hover ul.nav li a:hover {background:#ad8d12;}

.navbar :hover ul.nav :hover ul.sub{
padding:0; margin:0; 
left:104px; top:-4px; 
width:200px; 
z-index:606; 
background-color:#333333;}

/* keep the 'next' level invisible by placing it off screen. */
.navbar ul.nav, 
.navbar :hover ul.nav ul.sub
{position:absolute; left:-9999px;} 






Here is my HTML code:
PHP Code:
<ul class="navbar">
    <li><a href="#">Link<!--[if IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="nav">
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link2<!--[if IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="sub">
                    <li><a href="#">Link3</a></li> 
                    <li><a href="#">Link3</a></li>
                    <li><a href="#">Link3</a></li>
                </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
</ul> 







Thanks a million for even reading up to here

Hi,

I have the following code that all it does is list boxes under each other. Now between each box I set a margin of 10px. However in Firefox the margin (correctly) is 10px, while in IE6 the margin becomes 20px!!

Code:

<html>
  <head>
    <style>

      div.box{

        float: left;
        margin-left: 10px;
        margin-bottom:10px;
        clear:left;
        border: 1px solid black;
        width:100px;
      }

      div.row {

        float: left;
        border: 1px solid red;
      }


    </style>
  </head>
  <body>

    <div class="row">
      <div class="box">
        Hello One
      </div>
      <div class="box">
        Hello Three
      </div>
    </div>

    <div class="row">
      <div class="box">
        Hello Two
      </div>
    </div>
  </body>
</html>

Can anyone tell me why this is happing? will I have to resolve to hack to solve this, or I am writing my html incorrectly?

regards,
sim085

Hi there,

I have just made a website using css to pop-out my menus, and they dont seem to work in safari, yet work fine in ie and firefox. The website is overload.net.nz, and the two pop-out tabs are the 'newsletter' tab, and the 'tips' tab. I have used css layers, and is wondering is that is the problem? And I dont have safari to test any changes in, does anyone know of a successful safari pc version yet?

Ok i have a header and it has a SWF file on it. WHat i want to do is put the links on the same SWF file to the side but to the top of it i.e. using Z-index? but i cant get it to work?

CSS
Code:

#header {
	position:relative;
	z-index:-1;
	float:left;
	width:100%;
	clear:both;
}	
			
#links {
	border:1px solid black;
	position:absolute;
	z-index:100;
	top:10px;
	right:20px;
}

HTML
Code:

<div id="header">
            	<object width="550" height="400">
                    <param name="movie" value="/resourcebank/images/Final_banner.swf">
                    <embed src="/resourcebank/images/Final_banner.swf" width="100% height="20%">
                    </embed>
                </object>
<span id="links">
               random links 			
</span>
            </div>

I'm using the suggestions of those on here and using the
http://www.dynamicsitesolutions.com...2/#relatedLinks menu (I'm a little confused over what the differences are but that's the least of my problems) What I want is a 2nd level drop down menu, but I'm clueless on how to go about it..???

I am having the same problem as a few other posters regarding Spry menu bars. I was wondering if someone here could help us.

The link is
The problem link

Thanks

Hi,

I'm using C++ to create a single .cgi script. I'm now trying to incorperate some more CSS. I have added this line:

<style>body { font-family: times-roman; font-size: 16px; font-weight: bolder; }</style>

Now sometimes it works and sometimes it doesn't.
I will keep on clicking the refresh button and it is about 1 out of 10 that there are not any fonts on the page and the table sizes jump.

Does anyone know why this is possibly happening?

Mike

I just tested my site with IE6 and it's very broken (although it's valid HTML 4.01 strict according to w3.org). Main problem I am having is the links. I have a left navigation box, and a list of links inside it, the links display is set to 'block'. When the user's cursor is on the same line as the link, I want the whole line to change BG color and be clickable. This works now with FF perfectly. In IE your mouse has to be ON the actual link for the background to change color, and there is space on the left of the link block.

Here is an example (not my site):
http://rmideas.com/menus/menutest/NavToBar.htm
The top right menu works like I want it to in FF, but in IE your cursor has to be on 'home'.

How can I get this to work properly in both FF and IE?

and I have overlapping problems, some code overlaps in one browser but looks fine in another.

gday

i have a bunch of tables that are only to be shown based on a javascript call, but for some reason, firefox is rendering the space of the table, where as IE 7 isn't..

eg.
<table style"display: none;"></table>

with a whole bunch of rows in it.. the webpage still loads blank space everywhere, rather than just empty space

thoughts?

Hi yall, i'm a quite newbie on css and i'm having an issue with my drop menu on the site i'm trying to do , with wordpress, multi level menu...i started from the code generated by the css generator and tried to fit it to my meeds.
but, i can't control the li li menu (categories), i want it to appear exactly at the end of the li categories.
2) the second issue is that i'm trying to add a margin to the main ul because it's to near from the top.
can someone help me plz?

here my code
Code:

#suckerfishnav,
#suckerfishnav ul {
  float: left;
  height: 2.98em;
  width: 960px;
  list-style: none;
  line-height: 1;
  background: white;
  font-weight: bold;
  margin: 0.1em 0.1em 0.1em 0.1em;
  padding: 0;
}

#suckerfishnav a {
  display: block;
  color: #7c6240;
  text-decoration: none;
  padding-top: 0.25em;
  padding-right: 0.7em;
  padding-bottom: 0.1em;
  padding-left: 0.2em;
}

#suckerfishnav li {
  float: left;
  padding: 0;
  width: 13em;
  height: 2.8em;
}

#suckerfishnav ul {
  position: absolute;
  left: -999em;
  height: auto;
  margin-left: 2em;
  line-height: 1;
  z-index: 500;
}

#suckerfishnav li li {
  width: 9.6em;
  border: solid #eda;
  border-width: 1px;
  padding-top;
  10px;
}

#suckerfishnav li ul a {
  width: 9.8em;
}

#suckerfishnav li ul ul {
  margin: -0.20em 0 0 9.8em;
}

#suckerfishnav li ul {
  position: absolute;
  left: -999em;
  height: auto;
  width: 9.9em;
  w\idth: 9.8em;
  font-weight: normal;
  border-width: 0.20em;
  margin: 0;
  z-index: 500;
}

#suckerfishnav li ul a {
  width: 9.9em;
  w\idth: 9.8em;
}

#suckerfishnav li:hover ul ul,
#suckerfishnav li:hover ul ul ul,
#suckerfishnav li.sfhover ul ul,
#suckerfishnav li.sfhover ul ul ul {
  left: -999em;
}

#suckerfishnav li:hover ul,
#suckerfishnav li li:hover ul,
#suckerfishnav li li li:hover ul,
#suckerfishnav li.sfhover ul,
#suckerfishnav li li.sfhover ul,
#suckerfishnav li li li.sfhover ul {
  left: auto;
}

#suckerfishnav li:hover,
#suckerfishnav li.sfhover {
  background: #eda;
  width: 9.5em;
  w\idth: 9.4em;
}

i'm having a problem with a couple attributes for my CSS dropdowns.

view the page here
(both CSS and XHTML are on the same page)

specifically my .hoverBase:hover .hoverLaunch {} class
which reads as such:
Code:

.hoverBase:hover .hoverLaunch {
	display:block;
	position:absolute;
	top:15px;
	left:-3px;
	width:70px;
	border:3px solid #000000;
	text-align: center;
	z-index: 30;
}

the problem is that IE6 will not display the .hoverLaunch class like FireBird does, in fact, it does not display at all. Another awesome feature of IE6 is that the :hover i have applied on the .hoverbase does not work either. Any help is appreciated.

Thanks in advance.

I'm looking to add a drop down menu for my site but Instead of the menu dropping down i want it to go up and I found a few things about it but nothing really helped me I was wondering how can i get a css drop down to go up? sorry if this is the wrong forum to post on.. but i am clueless on this part i am going to be starting on the script soon just wanted to know how to code the script to make it go up

Thank you
Smackadoo