Page 1 of 1

Drop down image?

Posted: Fri Oct 21, 2011 12:36 pm
by ebgames56
im having troubles with my navigation bar

I made it and I cant fix the drop down box problem. The text shows its all good but the background image behind the drop down box doesnt work. like it shows a image though it is weird i can t explain it

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Guitar Manifesto</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" href="styles.css" type="text/css" />
    <style type="text/css">
		body {
	background-color: #00b3ff;
	background-image: url(background1.png);
	background-repeat: repeat-x;
}
        body
        {
            background-color: #00b3ff;
        }
        body,td,th
        {
            color: #FFF;
        }
        .parentmenu
        {
            position: relative;

        }
        .submenu
        {
            display: none;
            margin: 0;
            padding: 0;
			background-color: #82c7ea;
        }
        .parentmenu:hover .submenu
        {
            display: block;
            position: absolute;
            top: 30px;
            left: 0;
			text-align: center ;

        }
        #dolphincontainer #dolphinnav ul .parentmenu .submenu {
	color: #FFFFFF;
}
    </style>
</head>
<body>
       <img class="logo" src="Szerykblue_sm.png" alt=".." />
        <div id="dolphincontainer">
          <div id="dolphinnav">
                <ul>
      				<li><a href=""class="current"><span>Home</span></a></li>
                    <li><a href="tour.html"><span>Tour</span></a></li>
                    <li><a href="album.html"><span>Album</span></a></li>
                    <li><a href="band.html"><span>Band</span></a></li>
                    <li class="parentmenu">
                        <a><span>Media</span></a>
                        <ul class="submenu">
                            <li><a href="media.html"><span>Photos</span></a></li>
                            <li><a href="media.html"><span>Videos</span></a></li>
                        </ul>
                    </li>
                    <li><a href="contact.html"><span>Contact</span></a></li>
                </ul>
            </div>
        </div>
   <iframe src="frame.html" frameborder="0"
width="100%" height="350">
  <p>Your browser does not support iframes.</p>
       </iframe>
</body>
<div align="center" id="footer"><hr />Site Design by: Matt Brown</div>
</html>

Code: Select all

h1 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:bold;
	margin:0;
	padding:0;
	}

hr {
	border:none;
	border-top:1px solid #CCCCCC;
	height:1px;
	margin-bottom:25px;
	}
IMG.logo {
    display: block;
    margin-left: auto;
    margin-right: auto 
	}
	


h2 {text-align:center}
h4 {text-align:center}
p {text-align:center}

#footer {
position: absolute;
bottom: 0px;
width: 99%;
}

/* ---------------------- Dolphin nav ---------------------- */
#dolphincontainer{
	position:relative;
	height:56px;
	color:#E0E0E0;
	width:100%;
	font-family:Helvetica,Arial,Verdana,sans-serif;
	
	}
#parentmenu{
	position: center;
}
#dolphinnav{
	position:relative;
	height:33px;
	font-size:12px;
	text-transform:uppercase;
	font-weight:bold;
	background: url(dolphin_bg.gif) repeat-x bottom left;
	padding:0 0 0 425px;
	}

#dolphinnav ul{
	margin:0;
	padding:0;
	list-style-type:none;
	width:auto;
	float:left;
	}

#dolphinnav ul li{
	display:block;
	float:left;
	margin:0 1px;
	}

#dolphinnav ul li a{
	display:block;
	float:left;
	color:#EAF3F8;
	text-decoration:none;
	padding:0 0 0 20px;
	height:33px;
	}

#dolphinnav ul li a span{
	padding:12px 20px 0 0;
	height:21px;
	float:left;
	}

#dolphinnav ul li a:hover{
	color:#fff;
	background:transparent url(dolphin_bg-OVER.gif) repeat-x bottom left;
	}

#dolphinnav ul li a:hover span{
	display:block;
	width:auto;
	cursor:pointer;
	}

#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{
	color:#fff;
	background:#1D6893 url(dolphin_left-ON.gif) no-repeat top left;
	line-height:275%;
	}

#dolphinnav ul li a.current span{
	display:block;
	padding:0 20px 0 0;
	width:auto;
	background:#1D6893 url(dolphin_right-ON.gif) no-repeat top right;
	height:33px;
	}
/* ---------------------- END Dolphin nav ---------------------- */