CSS - Dropdown Problem

Hello,

I am working on a website and this website got a dropdown menu and this menu works fine!
But when I want to make a submenu in the dropdown, it will not work correctly. The submenu is not placed in a new row, it is placed in the main dropdown menu.

The next picture shows the problem:
"Test" has to be a submenu from "Wie zijn we?", but it is placed just under it.

URL

I have used the next HTML-Code:

Code:

   <!-- Navigation item -->
          <ul>
             <li><a href="#">Almelo Sociaal<!--[if IE 7]><!--></a><!--<![endif]-->
              <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul>
                  <li><a href="aswiezijnwe.html"target="iframe">Wie zijn we?</a>
                  <ul><li><a href="aswiezijnwe.html"target="iframe">test?</a></li></ul></li>
                  <li><a href="aswatdoenwe.html"target="iframe">Wat doen we?</a></li>
                  <li><a href="asbestuur.html"target="iframe">Organisatie</a></li>
                  <li><a href="asnieuws.html"target="iframe">Nieuws</a></li>
                  <li><a href="asactiviteiten.html"target="iframe">Activiteiten</a></li>
                  <li><a href="asafspraken.html"target="iframe">Afsprakenlijst</a></li>
                </ul>

And I have used the next CSS-Code:

Code:

/*Drop-down menu*/
.nav2 {white-space:nowrap /*IE hack*/; float:left; width:954px; background:rgb(228,22,34); color:rgb(100,100,100); font-size:130%;} /*Color navigation bar normal mode*/
.nav2 ul {list-style-type:none;}
.nav2 ul li {float:left; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px rgb(175,175,175);}
.nav2 ul li a {float:none; !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:2.1em; line-height:2.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:normal; color: rgb(235,235,235);}
.nav2 ul li ul {display:none; border:none;}

/*Non-IE6 hovering*/
.nav2 ul li:hover {position:relative;} /*Sylvain IE hack*/
.nav2 ul li:hover a {background-color:rgb(228,22,34); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:2.0em; margin-top:0.1em; left:0;}
.nav2 ul li:hover ul li a {white-space:normal; display:block; width:10.0em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(240,240,240); font-weight:normal; color:rgb(100,100,100);} /*Color subcells normal mode*/
.nav2 ul li:hover ul li a:hover {background-color:rgb(175,175,175); text-decoration:none;} /*Color subcells hovering mode*/

/*IE6 hovering*/
.nav2 table {position:absolute; top:0; left:-1px; border-collapse:collapse;}
.nav2 ul li a:hover {position:relative /*Sylvain IE hack*/; z-index:1000 /*Sylvain IE hack*/; background-color:rgb(20,25,231); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li a:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:2.1em; t\op:2.0em; left:0; marg\in-top:0.1em;}
.nav2 ul li a:hover ul li a {white-space:normal; display:block; w\idth:10.0em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(240,240,240); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.nav2 ul li a:hover ul li a:hover {background-color:rgb(215,215,215); text-decoration:none;} /*Color subcells hovering mode*/

Can someone help me to fix the submenu in the dropdown menu? I think myself it is a problem in the CSS. Maybe something has to be added there, but I don't know what

Hi there,

While this menu works in IE and FF, there's still a little problem with it working perfectly in FF. Basically, it's when you want to mouse over and get the second dropdown option...it only shows part of the button. I'm almost positive this has to do with it not "escaping" the container I have set for the whole design, as the menu option stops right at the border/width of the parent container.

For instance, if you go here (with FireFox), and then select from the right side menu:

Homes for Sale > Fort Collins, CO > Homestead

You'll notice that it only says "Homest" when you want to view the second dropdown option. I need it to show the whole name. I tried setting the z-index higher for these particular classes, but no dice. Is there something I'm missing?

Here's the code:

Code:

/* Sidebar / Menu */

#sidebar {
	float: left;
	top: 16px;
	left: 2px;
	display: block;
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color:#FFFFFF;
	letter-spacing: 1px;
	text-align:right;
	z-index: 3;
}

#sidebar ul {
	list-style-type: none;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	z-index: 4;
}

#sidebar li {
	display: block;
	float: left;
	min-height: 20px;
	position: relative;
	text-align: left;
	padding: 5px 20px 4px 16px;
	margin: 0px 0px 0px 0px;
}

#sidebar h2 {
	font-size: 1.2em;
	padding: 0;
	margin: 0;
}

#sidebar li ul {
	width: 150px;
	height: auto;
	top: 100%;
	left: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	letter-spacing: 3px;
}

#sidebar li.LargeMenu ul {
	width: 200px;
	height: auto;
	top: 100%;
	left: 0px;
}

#sidebar li ul li {
	text-align: left;
	width: 118px;	
	height: auto;
	min-height: auto;
	display: block;
}

#sidebar li.LargeMenu ul li {
	text-align: left;
	width: 198px;	
	height: auto;
	min-height: auto;
	display: block;
}

#sidebar a {
	text-decoration: none;
	letter-spacing: 1px;
	}

#sidebar li li ul {
	top: 0;
	left: 0;
}

#sidebar li li:hover ul {
	left: 150px;
}

/* initialy hide all sub sidemenus */
#sidebar ul ul,
#sidebar ul li:hover ul ul,
#sidebar ul ul li:hover ul ul,
#sidebar ul ul ul li:hover ul ul,
#sidebar ul ul ul ul li:hover ul ul {
	position: absolute;
	display:none;
}

/* display them on hover */
#sidebar li:hover ul,
#sidebar ul li:hover ul,
#sidebar ul ul li:hover ul,
#sidebar ul ul ul li:hover ul,
#sidebar ul ul ul ul li:hover ul,
#sidebar ul ul ul ul ul li:hover ul {
 	 display: block;
}

#sidebar #PhpWebcontent {
	display:none;
}	

/* define the consecutive colors */

#sidebar {
	color: #FFFFFF;
}

#sidebar ul{
	-moz-opacity: 1; /* for mozilla */
	opacity: 1; /* for safari */
	khtml-opacity: 1/* for konquerer and older safari */
}

#feeds li {
  background: url(images/feed.png) top left no-repeat;
  padding-left: 18px;
}

#sidebar h2 {
	color: #FFFFFF;
}

#sidebar a {
	color: #ffffff;
	letter-spacing: 1px;
	}

#sidebar ul li:hover {
	background: #333333;
	z-index: 900;
}

#sidebar ul li ul {
}

#sidebar ul li ul li {
	background: #333333;
}

#sidebar ul li ul li:hover {
	background: #666666;
}

#sidebar ul li ul ul li{
	background: #666666;
	
}

#sidebar ul li ul ul li:hover {
	background: #999999;
}
/* End Sidebar / Menu */

Thanks in advance.

Hi all-

My first post here, and I'm hoping someone here can help me out.

I'm beginning to build a client site, and I've got an elusive problem with my multiple-tier CSS dropdown menu not vertically spacing its <li> elements correctly in IE7. The problem doesn't seem to happen in IE6, or Mozilla browsers.

This menu began its life as a Project Seven "PopMenu Magic" menu, but I've modified it quite a bit with hand-coding. Other that this small problem in IE7, I'm happy with its look and it's functioning as intended.

What's further complicating my troubleshooting is that the problem only happens on second-level pages of my site, but not on the homepage. All of the pages use the same "included" CSS and navigation code (I'm building the site in ExpressionEngine and am embedding the navigation in a manner similar to a PHP include).

All CSS and xHTML validates, and I'm at wit's end.

Links

NOTE: The blocked "URL" in all of these following links is to be replaced with "falmouth academy dot org" . I guess because I'm new the forum thinks i'm a spammer.

The vertical dropdown menu listings SHOULD be spaced as seen here URL /index.php

The spacing problem reveals itself he
URL /index.php/about/introduction

The code that should be controlling the vertical spacing is found in this css file:
URL /index.php?css=home/stylesheet.v.1212113978

And the specific code segment in that file is:

#p7PMnav li ul li a { /* second tier navigation */
color : #ffffff;
height : 14px;
padding : 4px;
}

I'm not sure, but it appears that in IE7, only the first item in the list is getting the height and padding attributes applied. The color, however, is applied to all elements as it should.

Very puzzling. Hopefully this explanation is clear, but the problem is still as clear as mud. Any help is appreciated - I'm not a CSS guru, and I'm hoping there's something I'm overlooking.

I have dropdown menus completly made of UL lists within UL lists. And i control them with css to show and hide them using :hover.

Example:

div#navDiv li:hover ul {display:block; z-index:11;}


well this works completly fine in Mozilla. But i recently encountered a problem in mozilla. Below the dropdown menu's when I put a <div> and when i add the value overflow:auto; it breaks the menu. The menu still works, but when im hovering over the dropdown UL that goes over this <div> with the scrollbar it will disappear right when i get over the <div> below it.

But the UL dropdown menu will not disappear if i just remove that one css property "overflow:auto"

is there any way to fix this in mozilla? It works fine in IE.

I'm trying to create a css only drop-down menu like the ones in html. Here is my code for trying to do so.
/* setting dealing with selecting particular guest book entries */

Code:

#menuSelectGuestEntries
{
    position: relative;
    margin-top: 10px;
    padding-left: 466px;
}

#menuSelectGuestEntries form
{
   color: #000;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 2.12em;
}

#menuSelectGuestEntries .guestBookPages{
   visibility:hidden;
}

#menuSelectGuestEntries .guestBookPages:hover{
   visibility:visible;
}

#selectGuestBookEntries {
   border: solid 1px grey;
   background-color: white;
   padding-right; 5px;
   width: 70px;
   font-size: 13px;
   height: 16px;
   overflow: auto;
}

#menuSelectGuestEntries ul.guestBookPages {
   position: absolute;
   color: black;
   background-color: white;
   font-size: 20px;
   top: 1px;
   left: 517px;   
   list-style-type: none;
   padding-left:0;
   padding-right: 0;
   margin-left: 0;
   width: 66px;
   border: solid 1px grey; 
   border-top: none;
}

ul.guestBookPages a {
  display: block;
  text-decoration: none;
  width: 70px;
  zoom: 1;
}

ul.guestBookPages a:hover {
  background-color: #104E8B;
  font-weight: bold;
  width: 66px;
}
html code
<div id="menuSelectGuestEntries">
		<form action="">
		Page: <a href=""><</a>
	        <span name="selectGuestBookEntries" id="selectGuestBookEntries">
		1 of 212&ensp;<img src="images/dropDownBox.jpg" width="12" height="13"/></span>
		<a href="">></a>
		<ul class="guestBookPages">
			<li><a href="">1 of 212</a></li>
			<li><a href="">2 of 212</a></li>
			<li><a href="">3 of 212</a></li>
		        <li><a href="">4 of 212</a></li>
			<li><a href="">5 of 212</a></li>
		</ul>
                </form>
</div>

What I've tried to do is make the form with id Code:

#menuSelectGuestEntries

relative positioned is it looks like the first option of a drop-down menu. Then what I was hoping for was to have the drop-down list named Code:

#menuSelectGuestEntries

absolutely positioned so when someone hovered over the span with id
Code:

selectGuestBookEntries 

which contains the first entry all the entries in list Code:

guestBookPages

would become visible. I'm trying to avoid the Javascript methods of doing this if possible, not a big fan. Any ideas of code I could use in the above scenario to make the listing in the id Code:

guestBookPages

visible using the hover tag somewhere? Any help greatly appreciated. The visibility option is not working at moment, probably incorrect.

Hi

I am using suckerfish drop down menu without problem on my local server, however, on the remote server them menu won't work when jscript is turned off (when viewed on IE). Do you have any idea why this might be? has anyone had this problem before? (here is the url: (URL address blocked: See forum rules))

thanks a lot

This is sort of an addendum to my earlier post on CSS, but with a new problem, now the problem is with IE.

I am trying to get the SuckerFish drop downs to work and have been successful in Firefox, but IE is giving me problems. The best thing to do is look at it in action:

http://www.forma3.com/stuff/css/index-v1.2.html
http://www.forma3.com/stuff/css/css/index-v1.2.css

I am guessing it is related to the parent child relationship in IE, namely the drop down is adopting the style (float: left) that is set for the horizontal menu. I had to put in an underscore for the "#nav li" since it was causing problems in Mozilla. Unfortunately, this causes a validation error.

hello,

i was reading the well-known suckerfish dropdown tutorial and was trying to do something like it. i thought i had understood the logic behind it, but i can't get it to work.

the nested unordered lists appear like so:

ITEM1
subitem1 subitem2 subitem3
ITEM2
subitem1 subitem2 subitem3

i wanted them to appear like so:

subitem1____subitem1
subitem2____subitem2
subitem3____subitem3
ITEM1_______ITEM 2

the positioning isn't too relevant, all i really wanted was to pull the nested ul out of the flow...

i made sure that the li ul part was positioned absolutely, but i can't do anything with it (no styling, no anything). my css/code must be the problem, but i can't see what i'm doing wrong. here's the relevant code:

CSS:
Code:

#menu ul { 
position: relative;
margin: 8em 0 0 0;
float: left; 
background-color: #D60078;
list-style-type: none;
}

#menu li 	{ 
display: inline; 
padding: 0 2.5em 0 0;
position: relative; 
}

#menu li a:link, a:visited { 
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
}

#menu li a:hover, a:active 	{ 
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
}

#menu li ul { position: absolute; 
left: 0; top: 0; 
background-color: #FFF;
display: block; 
} 

HTML:
Code:

<ul id="menu">
<li><a href="">ITEM1</a>
<!-- SUBMENU -->
<ul>
<li><a href="">subitem1</a></li>
<li><a href="">subitem2</a></li>
<li><a href="">subitem3</a></li>
</ul>
</li>

<li><a href="">ITEM2</a>
<!-- SUBMENU -->
<ul>
<li><a href="">subitem1</a></li>
<li><a href="">subitem2</a></li>
<li><a href="">subitem3</a></li>
</ul>
</li>

</ul>

i hope that made sense (after working on this for hours and trying everything that came to mind, i'm getting a little incoherent).

thanks for any help!

I made a drop down menu with css and I can't get it to work with IE6. Can anyone help?

You can view an example of what I have at the following url

mentalgameofmoney.co.uk/example.html

Here is the CSS
Code:

#menu {
position:absolute;
background-color:#FF0000;
overflow:hidden;
height:30px; 
width:91px;
top:0px;
left:0px;
}
#menu:hover{
overflow:visible;
}
#menu a:link{
text-decoration:none;
}
#spacer{
height:30px;
}
#link_box{
background-color:#cbbba2;
border-left:#c1ad90 solid 1px;
border-right:#c1ad90 solid 1px;
border-bottom:#c1ad90 solid 1px;
padding-left:5px;
color:#51351a;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:12px;
text-decoration:none;
text-align:left;
}
#link_box:hover{
background-color:#51351a;
color:#FFFFFF;
}

Here is the HTML
Code:

<div  id="menu">
  <a href="#">
  <div id="spacer"></div></a>
   <a  href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a> 
   <a href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a>
  </div>

I've developed a dropdown navigation menu from a tutorial. The basic menu works perfect in IE and FF. But I would like to change a few things that for the life of me I can't get to work. First would be that under each item in the dropdown menu I would like there to be a bottom border. So in my css file I added border-bottom to the li li {} section. Now I am faced with two problems.

First in firefox the border expends maybe 5px. Apon further investigation I found that for some reason FF has the <li> tags only about 5px wide all over the place! In IE it extends atleast below the text but won't will the entire <li> like it should! FF also doesn't give the border to all the links like it should.

The next problem is in the width of the elements. Instead of the dropdown part being a set width, I would like the the part that drops down to stretch so that each link is on one line. But the entire part that drops down would be still remain rectangular like it does now.
Code:

Ex:
[Link1][Link2][Link3]  *with the mouse over the link 1

|Url1      |
|Url2      |
|Much Longer|

instead of

[Link1][Link2][Link3]  *with the mouse over the link 1
|Url1 |
|Url2 |
|Much|
|Longer|

I think this has something to do with the width of the li, so I set the width to auto. No change.

To recap my lengthy post. Getting a bottom border on the li tags in the dropdown Getting FF to behave with the bottom border and widths Each link should be on only one line
I think that getting the <li> width to behave will solve most of my problems. I've attached the original css and html pages.

Hi,

I'm trying to solve a little CSS issue with, guess what!, IE6.

92 (dot) 48 (dot) 108 (dot) 113 (forward slash) ~anyjob

In FF all is good, but when viewed in IE the nav bar has been forced down to misalign with my background red strip.

Also the dropdowns don't work.

Could anyone point me in the right direction. I don't think this is a float issue and I've read up as much as possible but this is really confusing me. Any help would be very much appreciated.

Thanks,

Brian

Hi all!


Been a while! A couple of quickies if people wouldn't mind!

1) my nested list menus break in FF3. They display OK in FF2, IE7 and IE8 beta!? Anyone know what might be wrong?

page is he

http://www.wellandpower.net Very strage!

Also, a seperate qustion you can set a div to display: table-cell; This works fine on FF2 and 3, but in IE it doesnt work.

You can see the difference he

http://www.xxl.me.uk

Hello guys

I sure would appreciate some help integrating a css dropdown menu into a site. If you visit in FF, the drop down works find, If you open it in IE9 the dropdown does not work.
i am new to css.so cant solve the poblem.



Thanks for any help.