Sample drop down menu wont work, please help...

Hall of Famer · January 24, 2012

Well I've tried to use a sample drop down on the site I am developing, and then work on a PHP script to allow users to change navlinks/menu as they wish. I am already stuck at the very beginning though, the problem is that the css of drop down wont show, and the way it looks is just weird: (Note: Do not worry about the content of the drop down links so far, I will change them once the css is working...)

I've copy/pasted the template.html file(where the template is defined and included) and style.css file here, please help me find out why it wont work. I did upload the graphics to the correct location, they just wont show...

template.html:

<!DOCTYPE html>

<head>
<title>:BROWSERTITLE:</title>
<link rel="stylesheet" href="templates/simple2-final/media/style.css" type="text/css" />


</head>

<body>

<div class="menu">
	<ul>
		<li><a href="#" >Home</a></li>
		<li><a href="#" id="current">Products</a>
			<ul>
				<li><a href="#">Drop Down CSS Menus</a></li>
				<li><a href="#">Horizontal CSS Menus</a></li>
				<li><a href="#">Vertical CSS Menus</a></li>
				<li><a href="#">Dreamweaver Menus</a></li>
		   </ul>
	  </li>
		<li><a href="/faq.php">FAQ</a>
                <ul>
                <li><a href="#">Drop Down CSS Menus</a></li>
                <li><a href="#">Horizontal CSS Menus</a></li>
                <li><a href="#">Vertical CSS Menus</a></li>
                <li><a href="#">Dreamweaver Menus</a></li>
                </ul>
          </li>
		<li><a href="/contact/contact.php">Contact</a></li>
	</ul>
</div>

<div id="wrapper">

<table cellspacing="0" cellpadding="0">
<tr><td colspan="2" id="image"><span><a href="index.php">Mysidia Adoptables v1.3.0 Alpha</a></span></td></tr>
<tr><td id="menu">
:SIDEFEED:


</td><td id="content">
<h1>:ARTICLETITLE:</h1>
<p>:ARTICLECONTENT:</p>

</td></tr>
<tr><td colspan="2" id="footer">
<p>Your Site ©Copyright Your Name Year - Year &#9733; Powered by <a href="http://www.mysidiaadoptables.com">Mysidia Adoptables</a></p>
</td></tr>


</table>
</div>

</body>

</html>

style.css file:

html {
background:#222;
font-family:Verdana, Arial, Tahoma, sans-serif;
color:#333;
font-size:12px;
}

#wrapper {
width:950px;
margin:0 auto;
}

table {
width:100%;
background:#fff;
}

/* Here's for the top most links */

th {
padding:10px;
}

th a {
font-weight:bold;
color:#000;
text-decoration:none;
display:block;
width:25%;
height:35px;
font-size:14px;
padding-top:15px;
text-align:center;
float:left;
}

/* Here is where you can change the backgrounds for the top links. */

.one {
background:#1693A5;
border-bottom:5px solid #222;
}

.two {
background:#7FFF24;
border-bottom:5px solid #222;
}

.three {
background:#00cdac;
border-bottom:5px solid #222;
}

.four {
background:#c3ff68;
border-bottom:5px solid #222;
}

th a:hover {
background:#222;
color:#fff;
border-bottom:5px solid #aaa;
}

/* Next is our background for the title box, just save your image to the media folder, and put it's name and type in the box. */

#image {
border-left:10px solid #fff;
border-right:10px solid #fff;
border-bottom:5px solid #fff;
background:url("gemstone.jpg");
height:150px;
}

#image span {
position:relative;
font-size:25px;
padding:10px;
font-family:Georgia, Times New Roman, serif;
}

/* Change the color of the link for your site title here */

#image a{
color:#222;
text-decoration:none;
font-style:italic;
font-weight:bold;
text-shadow: 0px 1px 1px #eee;
}
#image a:hover {
color:#7FFF24;
text-shadow: 0px 1px 1px #fff;
}

/* Standard table cell definitions */

td {
background:#fff;
}

.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
	float:left;
	padding:0px;
	}
.menu li a{
	background:#333333 url("images/seperator.gif") bottom right no-repeat;
	color:#cccccc;
	display:block;
	font-weight:normal;
	line-height:35px;
	margin:0px;
	padding:0px 25px;
	text-align:center;
	text-decoration:none;
	}
	.menu li a:hover, .menu ul li:hover a{
		background: #2580a2 url("images/hover.gif") bottom center no-repeat;
		color:#FFFFFF;
		text-decoration:none;
		}
.menu li ul{
	background:#333333;
	display:none;
	height:auto;
	padding:0px;
	margin:0px;
	border:0px;
	position:absolute;
	width:225px;
	z-index:200;
	/*top:1em;
	/*left:0;*/
	}
.menu li:hover ul{
	display:block;

	}
.menu li li {
	background:url('images/sub_sep.gif') bottom left no-repeat;
	display:block;
	float:none;
	margin:0px;
	padding:0px;
	width:225px;
	}
.menu li:hover li a{
	background:none;

	}
.menu li ul a{
	display:block;
	height:35px;
	font-size:12px;
	font-style:normal;
	margin:0px;
	padding:0px 10px 0px 15px;
	text-align:left;
	}
	.menu li ul a:hover, .menu li ul li:hover a{
		background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
		border:0px;
		color:#ffffff;
		text-decoration:none;
		}
.menu p{
	clear:left;
	}	



#content {
vertical-align:top;
}

#footer {
font-size:10px;
text-align:center;
}


#content p {
padding:3px;
margin:auto 10px;
}

#content h1 {
font-size: 16pt;
border-bottom: 1px solid #DDD;
margin:10px;
color: #000;
}


a{
text-decoration:none;
color:#02AAB0;
}
a:hover {
color:#333;
}

sunfighter · January 24, 2012

Hall of Famer, It's working for me, but I put the CSS into the head of the HTML. Maybe your link is wrong.

Hall of Famer · January 24, 2012

umm what do you mean it is working for you? I tried on both firefox and google chrome and the drop down menu wont show. Can you show me a screenshot of how it appears on your computer?

Hall of Famer · January 25, 2012

umm anyone can help?

Proletarian · January 25, 2012

Works for me, too. You're probably linking it wrong.

By linking it wrong, I mean, href="templates/simple2-final/media/style.css" is probably incorrect somehow or the style.css file is not actually in that directory.

Ivan Ivković · January 25, 2012

Try putting them into the same folder and replace the link with:

Hall of Famer · January 26, 2012

Thanks for all your kind replies, I will give a try later tonight. But still, can anyone of you please show me a screenshot of how it appears on your computer? I still wonder why you said it was okay for you guys but couldnt receive the same result for myself.

Sign In

Sample drop down menu wont work, please help...

Recommended Posts

Hall of Famer

Link to comment

Share on other sites

sunfighter

Link to comment

Share on other sites

Hall of Famer

Link to comment

Share on other sites

Hall of Famer

Link to comment

Share on other sites

Proletarian

Link to comment

Share on other sites

Ivan Ivković

Link to comment

Share on other sites

Hall of Famer

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information