4 replies [Last post]
Peter77
Peter77's picture
Offline
newbie
Canada
Last seen: 4 years 7 weeks ago
Canada
Timezone: GMT-7
Joined: 2010-07-02
Posts: 2
Points: 3

My new horizontal menu worked perfectly when the CSS was in the internal style sheet. I moved the CSS to an external style sheet and the menu went vertical. I moved the CSS back to the internal style sheet and the menu is still vertical.
Here is what I am doing differently from what I have done in the past: Beginning all of my selectors with a number sign. (That is something I do not understand. I was just following what the tutorial said to do.)

The HTML:

<ul class = "bigger">
			<li><a href="index.php">Home</a></li>
			<li><a href="classifieds.php">Classifieds</a></li>
			<li><a href="promotion.php">Business Promotion</a></li>
			<li><a href="design.php">Website Design</a></li>
			<li><a href="opportunity.php">Opportunity</a></li>
			<li><a href="register.php">Register</a></li>
	      </ul>

The CSS:

#navigation{
	width:100%;
	height:30px;
	background-color:#000033;
}
#navigation ul{
	margin:0px; padding:0px;
}
#navigation ul li{
	list-style:none; 
	margin-left:30px;
	display:inline; 
	height:30px; 
	float:left; 
	list-style:none;
	position:relative;
}
#navigation li a{
	color: #4682B4; 
	text-decoration:none;
}
#navigation li a:hover{
	color:#fff; 
	text-decoration:underline;
}
navigation li ul{
	margin:0px;
	padding:0px;
	display:none;
	position:absolute;
	left:0px;
	top:20px;
	background-color:#000033;
}
#navigation li:hover ul{
	display:block;
	width:160px;
}
#navigation li li{
	list-style:none;
	display:list-item;
}
#navigation li li a{
	color:#fff; 
	text-decoration:none;
}
#navigation li li a:hover{
	color:#fff; 
	text-decoration:underline;
}

The page can be found at http://worldwide-classifieds.biz/test.php.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 1 year 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Peter77 wrote: Beginning all

Peter77 wrote:

Beginning all of my selectors with a number sign.

That means you're targetting elements with an ID, rather than an element with a class or an element without ID or class. If you don't understand something, you should be careful about doing it, because for all you know, the tutorial might be wrong.

The problem as I see it is that you've got all these rules for #navigation in your CSS, but no element with an ID of navigation in your HTML.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 17 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

You also have navigation li

You also have navigation li ul with no hash mark in the front.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 32 weeks 2 days ago
London
Joined: 2004-06-06
Posts: 15650
Points: 2788

Don't simply follow tutorials

Don't simply follow tutorials blindly, if you do not understand a part of them and tbh a pretty important thing such as an ID then you MUST do some more general tutorials on the basics of CSS and Markup.

There is altogether far too much skipping forward past the basics nowadays due to all these copy and paste tutorials they simply allow people to avoid really learning a craft.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Peter77
Peter77's picture
Offline
newbie
Canada
Last seen: 4 years 7 weeks ago
Canada
Timezone: GMT-7
Joined: 2010-07-02
Posts: 2
Points: 3

My horizontal menu works now

Thank you (both of you) for your comments.

I began taking the W3Schools CSS tutorial and it led me to the answer. I put my menu inside a division with the name of "navigation" like this

<div id="navigation">
				     <?php 
					include("menuClassAPeter.php"); 
				     ?>
			         </div>
.

Now it works perfectly.