CSS - Began With A Javascript Drop Down And Went To A Css Drop Down

Hi, I'm trying to get this drop down to work in IE, but I'm not exactly sure what the problem is, can anyone help me?

idatedsatan . net / ewzine / index.html

Thanks.

http:// idatedsatan . net / ewzine / index.html

I've posted this before and the last time I was using a really bad workaround to get this drop down to work in IE. Now I'm using the suckerfish method, and it seems to work fine in firefox, opera, ie7, but in ie6 the drop down is offset and I think it's due to the container being offset. I'm not sure how I can make this work in ie6. Also there is supposed to be a background in the dropdown, but that's not showing up in ie6 either.

Please help me if you can, much appreciated.

Hey guys im having a really big problem with my site. It shows up fine in every browser except the old version of any IE. Can you guys help me out.

the problem image is attached.URL

Here's the HTML code:

Code:

<tr>
<td>
        
<div id="wrapper">
<div id="navMenu">


  <ul>

     <li><a href="home.html">Home</a>
       <ul>
   
       </ul> <!-- end inner UL -->


  </li> 
     <!-- end main LI -->

  </ul> <!-- end main UL -->
  
    <ul>

     <li><a href="aboutus.html">About</a>
   
       <ul>

       </ul> <!-- end inner UL -->


  </li> 
     <!-- end main LI -->

    </ul> <!-- end main UL -->
  
    <ul>

     <li><a href="aboutvictoria.html">Victoria</a>
   
  <ul>

    <li><a href="victoriastilwellarticle.html">Articles</a></li>

    <li><a href="philosophy.html">Philosophy</a></li>

    <li><a href="vspdt.html">VSPDT</a></li>
</ul> <!-- end inner UL -->


  </li> 
     <!-- end main LI -->

    </ul> <!-- end main UL -->
  
      <ul>

     <li><a href="photos.html">Photos</a>
   
  <ul>
  </ul> <!-- end inner UL -->


  </li> 
     <!-- end main LI -->

      </ul> <!-- end main UL -->
  
      <ul>

     <li><a href="links.html">Links</a>
   
  <ul>
  </ul> <!-- end inner UL -->


  </li> 
     <!-- end main LI -->

      </ul> <!-- end main UL -->
  
      <ul>

     <li><a href="trainingprograms.html">Training</a>
   
  <ul>
  
  <li><a href="trainingmethods.html">Methods</a></li>

    <li><a href="whyreinforcement.html">Positive(+R)</a></li>

    <li><a href="class.html">C.L.A.S.S</a></li>
    
  </ul> <!-- end inner UL -->


  </li> 
     <!-- end main LI -->

      </ul> <!-- end main UL -->
  
      <ul>

     <li><a href="http://dynamitedogtraining.blogspot.com/">Blog</a>
   
  <ul>
  </ul> <!-- end inner UL -->


  </li> 
     <!-- end main LI -->

      </ul> <!-- end main UL -->
  
      <ul>

     <li><a href="contact.html">Contact</a>
   
  <ul>
  </ul> <!-- end inner UL -->


  </li> 
     <!-- end main LI -->

      </ul> <!-- end main UL -->
  
  

    <br class="clearFloat" />

 
 </div> <!-- end navMenu -->
 </div> 
<!--end wrapper -->
 
 </td>
 </tr>

And here's the CSS code:


Code:

#navMenu {
    margin:0;
    width:auto;
    background-image: url(images/Home_top_06.jpg);
    padding:0;
}

  #navMenu ul {
    margin:0;
    padding:0;
    line-height:30px;
    background-color: #333;
    
 }

  #navMenu li {
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position:relative;    
}

  #navMenu ul li a {
    text-align:center;
    height:36px;
    width:70px;
    display:block;
    font-family:"Comic Sans MS", cursive;
    text-decoration:none;
    color:#FFF;
    text-shadow:0;
    font-size: 15px;
    font-variant: normal;
}

  #navMenu ul ul {
    visibility:hidden;
    top:32px;
    width: 120px;
    font-style: italic;
    position: absolute;
    margin-left: -20px;
    text-indent: 9px;
    text-align: center;
 }

  #navMenu ul li:hover ul {
    visibility:visible;
    z-index:9999;
    
 }

  /**********************************************/

  /*sets top level hover color*/

  #navMenu li:hover {
    font-weight: bold;
    font-style: italic;
 }

  /*sets link items hover color and background*/

  #navMenu ul li:hover ul li a:hover {
    color:#000;
    background-color: #E71923;
    width: 120px;
 }

  /* Changes text color on hover for main menu hover*/

  #navMenu a:hover {
    color:#FFF;
 } 
  
 /* Contains the Float */

 .clearFloat {
    clear:both; 
    margin:0;
    padding:0;
 }

#navMenu #holder ul li{
    display:inline;
    float:left;
    clear:left;
}

Please if you guys can help it would be awesome thank you

I know it's possible,

Anyone know how to do it or point me to a good learning tutorial?

Hey folks,

having a bit of trouble with a css-based drop down menu in IE7. It works fine in IE8/FF/Chrome etc., but not 7.

The problem is when the rollover pops out, if you try and navigate down through the dropdown, it disappears.

The issue can be seen here.

Here's the code:
Code:

#mainMenu {
width:225px;
}

* + html #mainMenu {
margin-top:0;
}

#mainMenu li {
font-size:12px;
text-align:right;
margin-left:5px;
position:relative;
}

* html #mainMenu li { margin-left:10px; }

#mainMenu li a, #mainMenu li#clock {
background:none transparent;
display:block;
width:221px;
height:28px;
padding:8px 5px 0 0;
border-bottom:1px solid #e1dbcb;
color:#eee;
}

#mainMenu li#clock {
text-align:center;
padding-left:5px;
width:216px;
font:small-caps bold 12px Georgia, "Times New Roman", Times, serif;
color:#e1dbcb;
}

#mainMenu li a:hover {
background:#e1dbcb;
color:#21729d;
}

	li ul {
	position: absolute;
	left: 225px;
	top: -1px;
	display: none;
	border:solid #e1dbcb;
	border-width:1px 5px 1px 0; 
	z-index:200;
	}

	* html li ul { left:220px; }

	#mainMenu li li {
	background:#21729d;
	}

	li ul li a {
	display: block;
	text-decoration: none;
	}
	
	li:hover ul, li.over ul { 
	display: block; 
	}

Thanks!

Hi there,

First I should mention, I have been doing a lot of research to learn CSS, and this is basically the first time implementing it for my company's website. I have A LOT to learn still! I'm using Dreamweaver MX and MX 2004 (2004 seems to keep crashing on me today, and i can't run it)...anyways...

I am working on a dropdown menu using pure CSS....WHICH is a library item that I am dropping into a table cell below the top banner on the index page, and others.

However, I'm having problems with some styling and the best way to work some things.

First, if you click he

Interface

I hope someone can help me!! I'm so frustrated!



You can see HOW I want the nav to look.

I seem to have a problem with the aligning of the text, as well as roll over effects: basically, I would like my nav button to turn blue w/ white text. And I'd like to have my buttons closer together, having it look as close as possible to my interface img above.

Also having issues w/ IE...which I assume would happen.

Here is my CSS and HTML code (remember, no body or title tags because it's an lbi item:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;


}

#nav a {
display: block;
width: 10em;
color: rgb(0,50,94);
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
}

#nav li {
float: left;
width: auto;


}

#nav li ul {
position: absolute;
background: #C5D1DC;
width: 10em;
left: -999em;
margin: 3px;
border: 1px solid rgb(0,50,94);
padding:5px;

}

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

.button {
background-color: #C5D1DC;
padding: 3px;
border-top: 1px solid #003A66;
border-right: 0px solid #003A66;
border-bottom: 1px solid #003A66;
border-left: 0px solid #003A66;
}
</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>




<ul id="nav">

<li class="button"><a href="#">Products</a>
<ul>
<li cla><a href="#">Audio</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Home Automation</a></li>
<li><a href="#">Lighting</a></li>
<li><a href="#">PDF Downloads</a></li>
<li><a href="#">Part Index</a></li>

</ul>
</li>

<li class="button"><a href="#">News and Events </a>

<ul>
<li><a href="#">New Products</a></li>
<li><a href="#">User Profile</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Tradeshows</a></li>
<li><a href="#">Newsletter</a></li>

</ul>
</li>

<li class="button"><a href="#">Order</a>
<ul>
<li><a href="#">Distributor List</a></li>
</ul>
</li>

<li class="button"><a href="#">Corporate</a>
<ul>
<li><a href="#">Company Bio</a></li>
</ul>
</li>

<li class="button"><a href="#">Technical Resources</a>
<ul>
<li><a href="#">Connector Cross Reference</a></li>
<li><a href="#">Wire Gage</a></li>
<li><a href="#">Glossary</a></li>
</ul>
</li>


</ul>



(IF you need me to, I can send you my site files over email) I really really appreciate all the help you guy's can give me! I'm on a tight deadline, and I really want to use CSS. If I can't get this to work, I have to take out the drop down menu all together and go w/ a boring static menu system that will add in numerous extra pages....

THANKS!

Valerie

I've tried so many things and can't get it right so I erased what I originally had to show all.

Code:

<div id="main-nav">
				  	<ul>
						<li><a href="#"><img src="images/btn-roster.jpg" alt="Roster" width="71" height="36" border="0"></a></li>
						<li><a href="#"><img src="images/btn-events.jpg" alt="Events" width="75" height="36" border="0"></a></li>
						<li><a href="#"><img src="images/btn-multimedia.jpg" alt="Multimedia" width="108" height="36" border="0"></a></li>
						<li><a href="#"><img src="images/btn-info.jpg" alt="Info" width="61" height="36" border="0"></a></li>
					</ul>
				  </div>

Code:

@charset "windows-1252";   

body {	   
	background: #0a0d12;
	text-align: center;
	padding: 0px;
	margin: 0px;
}  

.main {
	width:1027px; margin:0px auto; padding:0px;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	border-top: 0px;
	border-bottom: 0px;
	
	
}
.header {
	width: 1027px;
	height: 146px;
	background: #0a0d12 url(../images/header.jpg);
	border: 0px;
	margin: 0px;
	padding: 50px 130px 0px 0px;
}
	
.leftside {
 	width: 110px;
	height: 825px;
	background:url(../images/left-side.jpg) right top no-repeat #0a0d12;
	padding: 0;
	margin: 0;
}

.rightside {
 	width: 110px;
	height: 825px;
	background:url(../images/right-side.jpg) left top no-repeat #0a0d12 ; 
	padding: 0;
	margin: 0; border:0px;
}

.contentarea {	  
	color: #eeeeee;
	width: 803px;
	height: 692px;
	background:  #0a0c0d;	
	text-align: left;
	vertical-align: top;
	border-left: 2px solid #000000;
	border-right: 2px solid #000000;
	border-top: 0px;
	border-bottom: 0px;
	margin: 0px;
	padding: 0px;
	float:left;
}

.footer {
	width: 807px;
	height: 133px;	 	
	color: #eeeeee;
	text-align: center;
	vertical-align: top;
	background:url(../images/footer.jpg) center top repeat; 
	padding: 0;
	margin: 0;
}

a img,:link img,:visited img { border:none }
a {outline:none;}

.footer a                              { margin:0px; padding:0px 10px; text-decoration:none; font:bold 12px/18px Arial, Helvetica, sans-serif; color:#fff;}
.top-banner	                           { width:312px; height:69px; background:#313A47; float:right; margin:0px; padding:0px; border:1px solid #000;}

#main-nav                              { width:805px; height:59px; margin:0px; padding:0px; float:left; background:url(../images/top-nav-bg.jpg) left top no-repeat;}
#main-nav ul                           { width:350px; height:39px; margin:9px 10px 0 0; padding:0px; float:right;}
#main-nav ul li                        { margin:0px; padding:0 4px 0 0px; float:left; list-style:none;}
#main-nav ul li a                      { border:none;}
*html #main-nav ul li                  { margin:0 0px 0 5px; padding:0px; float:left; list-style:none;}

#left-box                              { width:168px; height:629px; float:left; margin:0px; padding:2px;/* background:#ccc;*/}


.quote                                 { width:168px; height:97px; float:left; margin:11px 0 0 0; padding:0px; background:#2D3542;}
.quote img                             { float:left; margin:3px 0 0 5px; padding:0px;}
.quote h3                              { width:168px; height:27px; float:left; margin:0px; padding:0px; background:url(../images/box-head-bg.jpg) left top no-repeat;}
.quote-content                         { width:164px; height:70px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }
*html .quote-content                   { width:168px; height:70px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }
.quote-content p                       { margin:0px; padding:5px; text-align:center; font:bold 12px/16px Arial, Helvetica, sans-serif; color:#fff;}
.quote-content p b                     { margin:0px; padding:0px; text-align:right; font:bold 12px/16px Arial, Helvetica, sans-serif; color:#c00;}



.spotlight                             { width:168px; height:202px; float:left; margin:20px 0 0 0; padding:0px; background:#2D3542;}
.spotlight h3                          { width:168px; height:25px; float:left; margin:0px; padding:2px 0 0 5px; background:url(../images/box-head-bg.jpg) left top no-repeat;}
.spotlight-content                     { width:164px; height:175px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }
*html .spotlight-content               { width:168px; height:175px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }
.spotlight-content h4                  { margin:0px; padding:5px; text-align:center; font:bold 11px/12px Arial, Helvetica, sans-serif; color:#fff;}
.spotlight-content p                   { margin:0px; padding:2px 5px; text-align:left; font:normal 10px/11px Arial, Helvetica, sans-serif; color:#fff;}
.spotlight-content img                 { margin:0 0 0 20px; padding:2px 0px; text-align:center; float:left; font:normal 10px/12px Arial, Helvetica, sans-serif; color:#fff;}




.opinion                               { width:168px; height:270px; float:left; margin:15px 0 0 0; padding:0px; background:#2D3542;}
.opinion h3                            { width:168px; height:23px; float:left; margin:0px; padding:4px 0 0 5px; background:url(../images/box-head-bg.jpg) left top no-repeat;}
.opinion-content                       { width:164px; height:243px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }
*html .opinion-content                 { width:168px; height:248px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }
.opinion-content p                     { float:left; margin:0px; padding:10px 5px; text-align:left; font:bold 11px/18px Arial, Helvetica, sans-serif; color:#fff; }
.opinion-content form                  { float:left; margin:0px; padding:10px 5px 0px 5px; text-align:left; font:bold 11px/18px Arial, Helvetica, sans-serif; color:#fff; }
.opinion-content form label            { float:left; margin:5px 0 0 30px; padding:0px; width:50px;font:bold 12px/18px Arial, Helvetica, sans-serif; color:#fff; }
.opinion-content form input            { float:left; margin:5px 0 0 0; padding:0px; }
.opinion-content img                   { margin:0 0 0 40px; padding:0px;}
.opinion-content img a                 { margin:0 0 0 40px; padding:0px; border:none;}

#content-box                           { width:450px; height:623px; float:left; margin:0px; padding:5px;}
.content-banner                        { width: 446px; height: 95px; float:left; margin:0px; padding:2px; }
.content-banner img                    { text-align:center; }




.site-news                             { width:452px; height:218px; float:left; margin:0px; padding:0px; }
.site-news h2                          { width:452px; height:23px; float:left; margin:0px; padding:8px 0 0 10px; background:url(../images/content-box-head-bg.jpg) left top no-repeat; }
*html .site-news h2                    { height:31px;}
.site-news-content                     { width:448px; height:182px; float:left; margin:0px; padding:0px; background:url(../images/box-content-bg.jpg) left top repeat-x #090A0A; border:2px solid #090B0B; border-top:none;}
*html .site-news-content               { width:452px; height:182px; float:left; margin:0px; padding:0px; background:url(../images/box-content-bg.jpg) left top repeat-x #090A0A; border:2px solid #090B0B; border-top:none;}
.site-news-content h3                  { margin:0px; padding:6px 10px 4px 25px; text-align:left; font:bold 11px/18px Arial, Helvetica, sans-serif; color:#fff; }
.site-news-content p                   { margin:0px; padding:6px 10px 5px 25px; text-align:left; font:normal 11px/13px Arial, Helvetica, sans-serif; color:#fff; }


.content-bottom-box                    { width:214px; height:28px; float:left; margin:0px; padding:2px 2px 0px 4px; }
.content-bottom-box h2                 { width:204px; height:23px; float:left; margin:0px; padding:8px 0 0 10px; background:url(../images/content-box-head-bg.jpg) left top no-repeat; }
*html .content-bottom-box h2           { height:31px; width:214px;}
.content-bottom-box-content            { width:212px; height:249px; float:left; margin:0px; padding:0px; background:url(../images/box-content-bg.jpg) left top repeat-x #090A0A; border:2px solid #090B0B; border-top:none;}
*html .content-bottom-box-content      { width:216px; height:249px; float:left; margin:0px; padding:0px; background:url(../images/box-content-bg.jpg) left top repeat-x #090A0A; border:2px solid #090B0B; border-top:none;}
.content-bottom-box-content h3         { margin:0px; padding:6px 10px 4px 15px; text-align:left; font:bold 11px/18px Arial, Helvetica, sans-serif; color:#fff; }
.content-bottom-box-content p          { margin:0px; padding:4px 10px 3px 15px; text-align:justify; font:normal 11px/12px Arial, Helvetica, sans-serif; color:#fff; }
.content-bottom-box-content img        { margin:0 0 0 25px; padding:0px;}
#right-box                             { width:161px; height:629px; float:right; margin:0px; padding:2px;}



.events                                { width:156px; height:253px; float:left; margin:5px 0 0 0; padding:0px; background:#2D3542;}
.events h3                             { width:156px; height:24px; float:left; margin:0px; padding:3px 0 0 5px; background:url(../images/box-sm-head-bg.jpg) left top no-repeat;}
.events-content                        { width:152px; height:221px; float:left; margin:0px; padding:5px 0 0 0; border:2px solid #090B0B; border-top:none; }
*html .events-content                  { width:156px; height:226px; float:left; margin:0px; padding:10px 0 0 0; border:2px solid #090B0B; border-top:none; }
.events-content p                      { margin:3px 0 0 0; height:45px; padding:0px; }
.events-content p span                 { width:146px; float:left; margin:0px; padding:0px 0 0 5px; text-align:left; font:normal 10px/13px Arial, Helvetica, sans-serif; color:#fff;  }
.events-content p span b               { width:50px; float:left; margin:0px; padding:0px; text-align:left; font:normal 10px/13px Arial, Helvetica, sans-serif; color:#fff;  }
.events-content p span a               { width:130px; float:left; margin:0px; padding:0px; text-align:right; font:normal 10px/13px Arial, Helvetica, sans-serif; color:#c00; text-decoration:none;  }


.forum                                 { width:156px; height:161px; float:left; margin:15px 0 0 0; padding:0px; background:#2D3542;}
.forum h3                              { width:156px; height:20px; float:left; margin:0px; padding:7px 0 0 5px; background:url(../images/box-sm-head-bg.jpg) left top no-repeat;}
*html .forum h3                        { width:156px; height:27px; float:left; margin:0px; padding:7px 0 0 5px; background:url(../images/box-sm-head-bg.jpg) left top no-repeat;}
.forum-content                         { width:152px; height:134px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }
*html .forum-content                   { width:156px; height:134px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }





.shop                                  { width:155px; height:157px; float:left; margin:14px 0 0 0; padding:0px; background:#2D3542;}
.shop h3                               { width:155px; height:27px; float:left; margin:0px; padding:0px; background:url(../images/head-shopzone.jpg) left top no-repeat;}
.shop-content                          { width:151px; height:130px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }
*html .shop-content                    { width:155px; height:130px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }

.shop-content img                { text-align:center; margin:0 0 0 20px; padding:0px;}
.clear                                 { margin:0px; padding:0px; clear:both; height:0px;}

http://kansasoutlawwrestling.com/KOW/index.html#

Yep, another problem with IE6. I figured someone has come across every problem so someone might be able to show me some direction on fixing this.

I have a unique drop down menu which works really well in:

- FF3
- IE8
- IE7
- Safari
- Opera
- Safari (mac)
- FF3 (mac)
- Camino (mac)

However, IE6 never plays well with anything like this. It displays everything correctly with the right styles/etc, but when you mouse over elements in the drop down the drop-down flickers.

I am not using a background-image, only a background colour.

So, can anyone help me out? Perhaps an IE6 bug i haven't come across.

HTML:
Code:

<div class="nav">
<ul>
	<li  style="margin-left: 10px;"><a  href=""><b>menu1</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->

		<ul style="height:80px;">
			<li><a  href="">sublink</a></li>
			<li><a  href="">sublink</a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href=""><b>menu2</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul style="height:40px;">
			<li><a href="">sublink</a></li>
			<li><a href="">sublink</a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>			
</ul>
</div>

CSS:
Code:

.nav {
	position:relative; 
	font-size:12px;
	padding-right:10px;
	width: 991px;
}

.nav ul {
	padding:0; 
	margin:0; 
	list-style:none;
	height:32px;
}

.nav ul ul {
	padding:0; 
	margin:0; 
	list-style:none;  
	height:20px;
	width: 981px;
	padding: 10px;
}

.nav table {
	border-collapse:collapse; 
	margin:-1px -5px 0 0; 
	padding:0; 
	width:0; 
	height:0; 
	font-size:1em;
}

.nav li {
	float:left; 
	height:32px; 
	margin: 0;
	padding: 0;
}
.nav li a,.nav li a:hover,.nav li a:active,.nav li a:link,.nav li a:visited {
	float:left; 
	display:block; 
	height:32px; 
	line-height:32px; 
	font-size: 12px;
	color:#ffffff; 
	text-decoration:none; 
	font-family:arial;
	
}
.nav li a b {
	float:left; 
	height:32px; 
	display:block; 
	padding:0 7px 0 7px; 
	cursor:pointer; 
	display:inline; 
	background:#81A3DA; 
	margin-right: 5px;
	
}

.nav li ul{
	position:absolute; 
	top:32px; 
	left:-9999px; 
	z-index:10; 
	background:#81A3DA;
	opacity:0.95;
	/*filter:alpha(opacity=95);*/
	
}

.nav li a:hover {
	cursor:pointer;
}
.nav li a:hover b {
	background: #232323;
}

.nav li:hover > a  {
	cursor:pointer;
}
.nav li:hover > a b {
	background: #232323;
	color:#fff;
}

.nav ul :hover ul {
	left:0; 
	background: #232323;
}

.nav ul :hover ul li{
	height: 20px;	
	float:left;
	cursor: default;
}


.nav ul :hover ul li a, #subnav li a {
	display:block; 
	margin:0; 
	font-size:12px; 
	width:auto; 
	white-space:nowrap; 
	font-weight:normal; 
	border:0; 
	color:#fff; 
	height:20px; 
	line-height:20px;
	text-decoration: none;
	font-family: Arial;
	width: 231px;
	margin-right:10px;
	padding: 0 2px 0 2px;
}

/* this is the one that handles the drop down's colour' */
.nav li a:hover ul li a:hover, .nav li:hover ul li a:hover, .nav li ul li a:hover {
	color:#232323;
	background:#FFFFFF;

}


.nav li.current a:hover ul li a:hover, .nav li.current:hover ul li a:hover, #subnav a:hover, #subnav li a:hover  {
	color:#232323;
background:#a0caf4;
	
}


.nav li.current a:hover ul li a, .nav li.current:hover ul li a, #subnav a {
	color:#fff;
}



.nav li.current a b, .nav li.current ul,  .nav li.current a:hover ul, .nav li.current a:hover b,#subnav {
	background: #5175AF;
	color: #fff;
	
}

Hi everyone,

So I'm implementing the suckerfish dropdown into one of my sites. I'm having a bit of trouble getting something to work correctly. I did most of the grunt work on getting it customized, but I was hoping someone could help me figure out a few minor details.

The version of the drop down I had to make has images for the top level (main level) of the navigation, and each image is a unique size. In doing so, as well as adding padding to the second level li for aesthetic purposes, in IE the menu doesn't drop but floats over to the right. I'm not sure why this is.

Also, I know this may be more fit for the JavaScript area, and I'll repost there if necessary, but I'd like to keep the top level image in the "over" state while the cursor is on that 2nd level dropdown. Is that possible?

I'll be anxious for your feedback, this has been driving me crazy all day.

Here's the code.

XHTML:
Code:

<div id="nav">
<ul>
<li class="one"><a href="#"><img src="images/home.gif" /></a></li>
<li class="two"><a href="#" onmouseover="document.two.src='images/nav-our_products_on.gif';" onmouseout="document.two.src='images/nav-our_products_off.gif';"><img name="two" src="images/nav-our_products_off.gif" /></a>
<ul>

<li><a href="#">sublink 1</li></a>
<li><a href="#">sublink 2</li></a>
</ul>
</li>
</ul>
</div>

CSS
Code:

#nav {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #67670f;
}

#nav ul {
margin: 0;
padding: 0;
list-style: none;
}

#nav ul li.one {
float: left;
margin: 0;
padding: 0;
width: 51px;
list-style: none;
}

#nav ul li.one img {
border: 0;
}

#nav ul li.two {
float: left;
margin: 0;
padding: 0;
width: 118px;
list-style: none;
position: relative;
}

#nav ul li.two img {
border: 0;
}

/* - begin level 2 - */

#nav ul li ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
left: -999em;
border: solid 1px #ddd;
width: 118px;
voice-family: "\"}\""; 
voice-family:inherit;
width: 116px;
}

#nav ul li ul li a {
display: block;
padding: 3px 0 3px 3px;
margin: 0;
color: #67670f;
text-decoration: none;
width: 118px;
voice-family: "\"}\""; 
voice-family:inherit;
width: 113px;

}

#nav ul li.two ul li a:hover {
color: #52432c;
background-color: #e4e2db;
text-decoration: none;
}

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

JavaScript
Code:

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

It seems that in IE something isn't being cleared, as it almost appears that the second level is in place directly next to the top level link that is activating the dropdown menu.

I look forward to your insight!

Thanks!

-Brian

Hi,

I have this drop down menu, but the parents are appearing under each other, instead of next to each other. I am trying to create a horizontal menu with sub items appear under the parent items.

this is my code:

PHP Code:
#menu2 {
width: 800px;
float:left
}

#menu2 ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}

#menu2 a, #menu2 h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu2 h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#menu2 a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu2 a:hover {
color: #a00;
background: #fff;
}

#menu2 li {position: relative; float:left; width: 200px;}


a.mainlevel{background-color: #000000!important; display:inline-block}

#menu2 ul ul {
position: absolute;
z-index: 500;
float:left
}

#menu2 ul ul ul {
position: absolute;
top: 0;

}

div#menu2 ul ul,
div#menu2 ul li:hover ul ul,
div#menu2 ul ul li:hover ul ul
{display: none;}

div#menu2 ul li:hover ul,
div#menu2 ul ul li:hover ul,
div#menu2 ul ul ul li:hover ul
{display: block;} 





Can anyone see anything wrong?

Many thanks

How easy is it to create one of these where when you hover over a link a menu appears underneath?

I am trying to create a menu [css / html].
Home | Live Music | Info | Options | Contact

The Live Music tab:
live music > hover over to reveal >
970 px wide div containing music styles jazz , blues, soul etc>
hover over to reveal>
970 px wide div containing band1, band 2, band 3 etc

The Options Tab is a basic drop down menu

After several days of comparing / reading / going round in circles, I am stumped and hope someone can provide a very basic css + html for the problem. The bands' div needs to contain a bg image of 970 x 250.

I spent a long time doing a similar menu but it doesn't do what I need it to do and is restricted by the css.

Help would be really appreciated. TIA

Hi, I am working on my site, and was wondering if anyone knew how to do a menu like this http://www.vh1.com/music/

The one on the left in blue.. how it turns to white. I am pretty sure this is done with css. Can anyone tell me how this is done? Thanks

I am very new to this whole css thing, but am trying to get all learned about it. I think I am doing badly so far.

I am trying to make css drop-down menus, and have pulled code from all over the place, and modified it to look correct (so as to match my design comp). it is based on the suckerfish model <http://www.alistapart.com/articles/dropdowns/> and it works exactly as it should in safari, firefox (mac & pc). but doesn't work correctly at all in IE (mac or pc). I have implemented the "ie fix" with the javascript code several sites instructed me to use, and while it now sorta works (in the sense that the menus drop down), there are still problems. such as in IE on pc you can't roll down to the drop down menus, because they go away as soon as you roll off the top menu item.

in IE on mac they are messed up in a whole other way. you can roll down to them, and they don't go away as soon as you're off the top nav option, but the hover is all jacked, and the menu is broken, sending the last nav button down to the next line! aaahhh!

can anyone help me?! I'm sorry I'm so stupid and helpless, but... well. I am.

any tips/etc would be mighty appreciated!

-daniel

K, finally got a working drop down menu, pretty well exactly how I want it...however, in IE it works properly, but in FF it seems to grow in width and cover the drop down part up.
Probably somethin to do with a preset 'td' width in my html, but not sure.
Here
is what i'm talking about, and here is the style sheet.

Any help is greatly appreciated!