Pixel2Life Forum > Nav CSS Bar issues

Pixel2Life Forum > Help Section > HTML, XHTML, CSS and General Web Design

Steve Marcano

Mar 6 2009, 01:57 PM

Here's my css but it's not showing the nav correctly.

CODE

#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; list-style: none;}
#main-nav ul li                        { margin:0px; padding:0 4px 0 0px; float:left; list-style:none; position: absolute;}
#main-nav ul li a                      { border:none;}
*html #main-nav ul li                  { margin:0 0px 0 5px; padding:0px; float:left; list-style:none;}
#main li:hover ul                        {left: auto;}
#main li:hover ul, #nav li.sfhover ul  {left: auto;}

Here's the coding for the nav bar itself.

CODE

<div id="main-nav">
                      <ul id="nav">
                        <li><a href="#"><img src="images/btn-roster.jpg" alt="Roster" width="71" height="36" border="0"></a>
                        <ul>
            <li><a href="#">Remoras</a></li>
            <li><a href="#">Tilefishes</a></li>
            <li><a href="#">Bluefishes</a></li>
            <li><a href="#">Tigerfishes</a></li>
        </ul>
</li>

                        <li><a href="#"><img src="images/btn-events.jpg" alt="Events" width="75" height="36" border="0"></a>
                        <ul>
            <li><a href="#">Remoras</a></li>
            <li><a href="#">Tilefishes</a></li>
            <li><a href="#">Bluefishes</a></li>
            <li><a href="#">Tigerfishes</a></li>
        </ul>
</li>
                        <li><a href="#"><img src="images/btn-multimedia.jpg" alt="Multimedia" width="108" height="36" border="0"></a>
                        <ul>
            <li><a href="#">Remoras</a></li>
            <li><a href="#">Tilefishes</a></li>
            <li><a href="#">Bluefishes</a></li>
            <li><a href="#">Tigerfishes</a></li>
        </ul>
</li>
                        <li><a href="#"><img src="images/btn-info.jpg" alt="Info" width="61" height="36" border="0"></a>
                        <ul>
            <li><a href="#">Remoras</a></li>
            <li><a href="#">Tilefishes</a></li>
            <li><a href="#">Bluefishes</a></li>
            <li><a href="#">Tigerfishes</a></li>
        </ul>
</li>
                    </ul>
                  </div>

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

Jacorre

Mar 23 2009, 03:09 PM

What's wrong with it?

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.