Works in Chrome not Firefox

Right have made zoom button which work fine within Chrome but not Firefox

<input type="button" value="A" ONCLICK="zoomin();" class="zoombutton" >
<input type="button"  value="a" ONCLICK="zoomout();" class="zoombutton" >
<script language="JavaScript" type="text/javascript">

function zoomin(){
if(parent.parent.document.body.style.zoom!=0) 
parent.parent.document.body.style.zoom*=1.2; 
else 
parent.parent.document.body.style.zoom=1.2;
}
function zoomout(){
if(parent.parent.document.body.style.zoom!=0) 
parent.parent.document.body.style.zoom*=0.833; 
else 
parent.parent.document.body.style.zoom=0.833;
}

</script>

Instead of creating a new topic, I am trying to implement and drop down menu, but me being stupid and deciding to want to do this at the end is there a simple way of implementing one without re modifying the entire css?

<ul>
<li><a href="#" id="homenav">HOME</a></li>
<li><a href="#" id="aboutus">ABOUT US</a></li>
<li><a href="#" id="services">OUR SERVICES</a></li>
<li><a href="#" id="working">WORKING FOR US</a></li>
<li><a href="#" id="faqs">FAQS</a></li>
<li><a href="#" id="contact">CONTACT US</a></li>
</ul>
.nav{
	width:100%;
	background:url(images/nav_bg.jpg) repeat-x;
	height:42px;
	clear:both;
	
}

.nav ul {  
    margin: 0 auto;  
    width: auto;  
	padding-left:15px;
    list-style: none; 
	
}  

.nav ul li {  
    float: left;
	
}  
  
.nav ul li a {  
        display: block;  
        margin-right: 20px;
		padding-left:20px;
		padding-right:20px;
		color:#FFF;
        width: auto;  
        font-size: 13px;  
		font-weight:bolder;  
        text-align: center;  
        text-decoration: none;
		line-height:42px;  
}

.nav ul li a:hover {  
        display: block;  
        margin-right: 20px;
		padding-left:20px;
		padding-right:20px;
		color:#FFF;
        width: auto;  
        font-size: 13px;  
		font-weight:bolder;  
        text-align: center;  
        text-decoration: none;
		line-height:42px;
		background:url(images/nav_hover.jpg);  
} 

Thanking You
Adam

Your code or comments don’t say clearly what is it that you want.

So, starting from this, probably, what exactly is it that you want?

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

<html lang="en"><head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Drop down question</title>
 
  <style type="text/css">
    .nav{
      width:100%;
      background:url(images/nav_bg.jpg) repeat-x;
      height:42px;
      clear:both;
    }

    .nav ul {  
      margin: 0 auto;
      padding-left:15px;
      list-style: none; 
    }  

    .nav ul li {  
      float: left;
    }  
      
    .nav ul li a {  
      display: block;  
      margin-right: 20px;
      padding-left:20px;
      padding-right:20px;
      /*color:#FFF;*/
      font-size: 13px;  
      font-weight:bolder;  
      text-align: center;  
      text-decoration: none;
      line-height:42px;  
    }

    .nav ul li a:hover {  
      background:url(images/nav_hover.jpg);  
    }
  </style>
  
</head><body>

  <div class="nav">
    <ul>
      <li><a href="#" id="homenav">HOME</a></li>
      <li><a href="#" id="aboutus">ABOUT US</a></li>
      <li><a href="#" id="services">OUR SERVICES</a></li>
      <li><a href="#" id="working">WORKING FOR US</a></li>
      <li><a href="#" id="faqs">FAQS</a></li>
      <li><a href="#" id="contact">CONTACT US</a></li>
    </ul>
  </div>

</body></html>

I’m just looking for a drop down to appear when you either hover or click on the main link. Preferebly using CSS but if jQuery is needed then that is fine.

Something similar to this:

http://designreviver.com/wp-content/uploads/2008/10/example.html

http://htmldog.com/articles/suckerfish/dropdowns/

You’ll notice that the “drop-down”, is another <ul>, inside a <li>.

This is because of accessibility issues. And it’s more of a drill than a drop, so a better name for it would be a drill-down menu.

    <ul>
      <li><a href="#" id="homenav">HOME</a></li>
      <li><a href="#" id="aboutus">ABOUT US</a></li>
      <li><a href="#" id="services">OUR SERVICES</a>
        <ul>
          <li><a href="#">Service#1</a></li>
          <li><a href="#">Service#2</a></li>
        </ul>
      </li>
      <li><a href="#" id="working">WORKING FOR US</a></li>
      <li><a href="#" id="faqs">FAQS</a></li>
      <li><a href="#" id="contact">CONTACT US</a></li>
    </ul>

Righty, thank you for the link very helpful I’ve got to the final stage:

<ul id="nav">
<li><a href="#" id="homenav">HOME</a></li>
<li><a href="#" id="aboutus">ABOUT US</a></li>
<li><a href="#" id="services">OUR SERVICES</a>
        <ul>
                <li><a href="#">Desktop</a></li>
<li><a href="#">Blah Blash</a></li>
      	</ul>
</li>
<li><a href="#" id="working">WORKING FOR US</a></li>
<li><a href="#" id="faqs">FAQS</a></li>
<li><a href="#" id="contact">CONTACT US</a></li>
</ul>
.nav{
	width:100%;
	background:url(images/nav_bg.jpg) repeat-x;
	height:42px;
	clear:both;
	
}

.nav ul {  
    margin: 0 auto;  
    width: auto;  
	padding-left:15px;
    list-style: none; 
	
}  


.nav ul li {  
    float: left;
	
}  
  
.nav ul li a {  
        display: block;  
        margin-right: 20px;
		padding-left:20px;
		padding-right:20px;
		color:#FFF;
        width: auto;  
        font-size: 13px;  
		font-weight:bolder;  
        text-align: center;  
        text-decoration: none;
		line-height:42px;  
}

.nav ul li a:hover {  
        display: block;  
        margin-right: 20px;
		padding-left:20px;
		padding-right:20px;
		color:#FFF;
        width: auto;  
        font-size: 13px;  
		font-weight:bolder;  
        text-align: center;  
        text-decoration: none;
		line-height:42px;
		background:url(images/nav_hover.jpg);  
} 


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

#nav a {
	display: block;
	
}

#nav li {
	float: left;
	margin-left:10px;
}
#nav li ul {
	position: absolute;
	width:200px;
	left: -999em;
	background:#695e62;
}


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

All looks fine until you hover over a link in the sub menu, it is picking up the class nav that I have used for my main nav and picking up its hover attributes. I basically want it to be a grey back background with my img at 200px.

A link or a more complete page code, like the one I provided, would help. I’m having difficulties picturing your problem.

.nav and #nav… Not a good idea.

Also, you don’t need to reiterate rules from .nav ul li a in .nav ul li a:hover.
background:url(images/nav_hover.jpg); will do.

Not sure what you are saying here, you do

    <ul>
      <li><a href="#" id="services">OUR SERVICES</a>
        <ul>
          <li><a href="#">Service#1</a></li>
          <li><a href="#">Service#2</a></li>
        </ul>
      </li>
    </ul>

vs

    <ul>
      <li><a href="#" id="services">OUR SERVICES</a></li>
        <ul>
          <li><a href="#">Service#1</a></li>
          <li><a href="#">Service#2</a></li>
        </ul>
    </ul>

Cause block one is proper coding, not “makes it accessible.” Check out YUI Menu, it is better than suckerfish

@rguy84

Could you please be more clear. I don’t understand weather you’re agreeing or not with:

      <li><a href="#" id="services">OUR SERVICES</a>
        <ul>
          <li><a href="#">Service#1</a></li>
          <li><a href="#">Service#2</a></li>
        </ul>
      </li>

This code is about accessibility too, not only about correctness. Why is that? Do you really have to ask? :wink:


What’s with the second BAD example and where did it came from?

    <ul>
      <li><a href="#" id="services">OUR SERVICES</a></li>
[COLOR="Red"]        <ul>
          <li><a href="#">Service#1</a></li>
          <li><a href="#">Service#2</a></li>
        </ul>[/COLOR]
    </ul>

Are you saying that’s the way to do it?

You need to remember a third way:

    <ul>
      <li><a href="#" id="services">OUR SERVICES</a></li>
    </ul>
[COLOR="DeepSkyBlue"]<ul>
          <li><a href="#">Service#1</a></li>
          <li><a href="#">Service#2</a></li>
</ul>[/COLOR]

Any epiphany on your side?

Valid code is the sub list goes before the list item prior to the ends. Look at the blocks closely. Make the code valid, it becomes accessible. :wink: Also that is why I pointed him to YUI vs suckerfish. Suckerfish is good, and accessible. YUI is good, accessible, and keyboard navigatable…

Still distraught by what you mean…

What “also that is why you pointed”? How “make the code valid”? I thought you said is nothing about “accessible”, but “valid”. Now, suddenly, “valid” means “accessible”? Aside from your inclination towards using frameworks, your points are all… blurry.

You forget that you could make a less accessible drop down menu by choosing not to nest the second <ul> in a <li> from the first <ul>. You could just make a separate second <ul>, as a sibling element to the first <ul>, have a valid code all along, and use a slightly changed CSS to make the drop down. Like in the blue highlighted code I provided. You missed this point.

Using the second <ul> in a <li> means a DRILL DOWN menu. You missed this point also. You only provided an invalid code, where you put the second <ul> as a direct descendant for the first <ul>, which is a stupid and wrong thing to do, and than start mumbling about YUI. Did you even look at the requirements for a YUI drill down menu? Only if you use their framework extensively will a YUI menu ever become something to begin considering to use.

Make up your mind, please! And acknowledge that I provided VALID CODE ALL ALONG!