menu seizure works in Opera

[david wright]

The plan was to design a simple header - horizontal menu, background image, small graphic and title in <h1>.
It worked fine, but looked a little flat so Stage 2 began: add some depth by offsetting the text using absolute and relative positoining, z-indices and a bit of colour.
The result can be seen here.
Does it look good?
Anyway - it's an improvement.
Now mouse over the menu.
Works on a Mac using Opera v9.23.
I've tested it using Safari 2.0.4, Firefox 2.0.0.6 and Sunrise 0.895 on a G4 iBook running OSX 10.4.10. In all cases (excepting Opera) the menu seizes up.
Both html and css codes validate.
I'm new to this game.
Is it normal?

<div id="header">
 <div id="head">
  <h1 class="float1">cornwall (uk)</h1>
  <h1 class="float2">cornwall (uk)</h1>
 </div><!--head-->
 <div id="headertext">
  <ul>
   <li class="active">home</li>
   <li><a href="history.html">history</a></li>
   <li><a href="legend.html">legend</a></li>
   <li><a href="industry.html">industry</a></li>
   <li><a href="gallery.html">gallery</a></li>
  </ul>
 </div><!--headertext"-->
  <img src="flag.gif" alt="st.piran's flag" width="42" height="25"
      id="flag" />
 </div><!--header-->

css code:

.float1 {
 color: #333;
 position: relative;
 top: -1px;
 left: 2px;
 z-index: 2;
 }
.float2 {
 color: #abc;
 position: absolute;
 top: -1px;
 left: -1px;
 z-index: 1;
 }

Hoping I've not offered too much or too little code.
Any ideas how I can achieve the effect I'm after without sacrificing the navigation?
Thanks for taking a look.
Best wishes
David

[Centauri]

The <h1> elements are covering over the links, preventing their use. Setting a width for the <h1> solves this :

#header h1 {
 margin-top: -1px;
 font-size: 250%;
 font-weight: bold;
 /*color: #333;*/
 padding: 5px 0 5px 0;
 width: 10em;
 }

Edit: removed the font-family from the style, as the body default Verdana font looks much better here.

[markbrown4]

Does it look good?

Not terribly no. I'm not a fan of black and gray pixelated text with a shadow.
2 identical H1's is a bad move also. You can achieve it much easier and with more control using an image.