Jump to content

Navigational Bar *SOLVED!*


Professor GIBS

Recommended Posts

I'm not assuming anything i know by your example shown, html totallly in the wrong places within the document, css styling totally wrong, which would have picked up if you bothered to validate html or css, and we have to try to work out with this mess on what thehell you are trying to do.

Link to comment
Share on other sites

My CSS is obviously wrong since nothing is working properly. Explain what's wrong with my HTML?

 

 

 

QUESTION: True or False; Everything including; header, and footer is supposed to be within the body tags?

Edited by Professor GIBS
Link to comment
Share on other sites

I mean for now here is my HTML:

<!DOCTYPE html><html id="CodeMode"><head><link href="home.css" rel="stylesheet" type="text/css"/><link href="css/layout.css" rel="stylesheet" type="text/css" /><link href="css/menu.css" rel="stylesheet" type="text/css"/>nav {background-color: #999;}#navlist {width: 960px;margin: 0 auto;text-align: left;}#navlist ul {list-style-type: none;padding: 0;margin: 0;position: relative;}#navlist ul li {display: inline-block;}#navlist ul li:hover {background-color: #777;}#navlist ul li:visited {color: #ccc;display: block;padding: 5px;}#navlist ul li:hover {color: ccc;text-decoration: none;}
I would personally object using multiple stylesheets for unit blocks of a page (as in your menu, home, layout up there). They're all part of the page. One stylesheet is enough for this. And you need to target specific elements too. You used too many styles for your navigation list. Everything in the nav list need not be styled differently. You can target all links in the nav tags (for hover, active, visited, link) without creating a #navlist id. And you should try to keep it simple -- I mean KISS! I think you should view the source code of the page you're trying to imitate to know what they really did. *just my opinion*
Link to comment
Share on other sites

I appreciate it! I did view the source code too, just didn't make much out haha. But hey! I made a great working navigational bar with a working dropdown menu. FROM THIS GUIDE!

My only problem is that I cannot get the second drop down menu to appear..? That's all I need, and then I can finally move on!! Thanks guys!

 

*Sorry to give you a different HTML/CSS each time, I try to keep it clean, and make it from scratch each time so I get it all to stick.*

Just if you need it here is my HTML:

<!DOCTYPE html><html lang="en">	<head>		<title>CodeMode - Home</title>		<link href="index.css" rel="stylesheet" type="text/css">		<meta charset="UTF-8">	</head>	<header>		<a href="index.html"><img src="logo.png" /></a>		<nav>			<ul>				<li><a href="#" id="firstNav">Home</a></li>				<li><a href="#">Forums</a></li>				<li><a href="#">Program</a></li>				<li><a href="#">Development Teams &blacktriangledown;</a>					<ul>						<li><a href="#">Graphic Design</a></li>						<li><a href="#">Game Design</a></li>						<li><a href="#">Web Design</a></li>						<li><a href="#">App Design</a></li>						<li><a href="#">Special »</a>							<ul id="special">								<li><a href="#">Technology Era</a></li>								<li><a href="#">Languages</a></li>								<li><a href="#">Computers</a></li>								<li><a href="#">Phones</a></li>							</ul>												</li>					</ul>				</li>				<li><a href="#">Contact</a></li>				<li><a href="#">Chat</a></li>			</ul>		</nav>	</header>	<body>		<p>BODY GOES HERE BEFORE YOU KNOW IT!</p>	</body>	<footer>		</footer>	</html>

Here is my CSS:

* {	margin: 0 auto;	background-color: black;}header {	width: 960px;	background-color: black;	padding: 10px 0 50px 0;}body {	width: 960px;	color: #999;	background-color: black;}/*<NAVIGATION BAR>*/nav li:hover ul {	display: block;}nav li ul:hover ul {	display: inline;}nav {	display: block;	position: relative;	background-image: url("background_logo.jpg");	border: 1px solid black;	font-weight: bold;	font-size: 16px;	font-family: Arial, Helvetica, sans-serif, Georgia, serif;	height: 38px;	width: 100%;	margin: 0 auto;}nav li a:hover {	color: white;	background-image: url("background_logo_hover.jpg");	-webkit-transition:opacity 0.4s linear, visibility 0.4s linear; 	-moz-transition:opacity 0.4s linear, visibility 0.4s linear; 	-o-transition:opacity 0.4s linear, visibility 0.4s linear; 	transition:opacity 0.4s linear, visibility 0.4s linear;}nav li a {	text-decoration: none;	display: block;	padding: 10px 25px;	border-right: 3px solid #222;	color: #888;	text-shadow: 1px 1px 0px #777;	background-image: url("background_logo.jpg");	-webkit-transition: color 0.4s linear, background 0.4s linear;		-moz-transition: color 0.4s linear, background 0.4s linear;	-o-transition: color 0.4s linear, background 0.4s linear;		transition: color 0.4s linear, background 0.4s linear;}#firstNav {	border-left: 3px solid #222;}nav ul {	margin: 0px;	padding: 0px;}nav li {	position: relative;	float: left;	list-style-type: none;}nav ul ul {	position: absolute;	display: none;	left: 45px;	margin: 0;	width: 175px;	background-color: green;}nav ul ul li {	border: 1px solid #222;	width: 175px;}#special {	position: absolute;	display: none;	left: 0px;	width: 0px;}#special:hover {	display: block; /* THIS DOESN'T WORK! */}/*</NAVIGATION BAR>*/
Edited by Professor GIBS
Link to comment
Share on other sites

Don't be so disrespectful, Sir. I did look, in fact tried several different things.. One of which would make it appear, only when hovering over anywhere in the first drop down menu, and not just over the last one. I know where you're talking about here:

 

UPLOADED HERE!: CLICK ME! :good:

/* Drop-Down Navigation */ul#navigation li:hover > ul{/*these 2 styles are very important, being the ones which make the drop-down to appear on hover */	visibility:visible;	opacity:1;}ul#navigation ul, ul#navigation ul li ul {	list-style: none;    margin: 0;    padding: 0;    /*the next 2 styles are very important, being the ones which make the drop-down to stay hidden */    visibility:hidden;    opacity:0;    position: absolute;    z-index: 99999;	width:180px;	background:#f8f8f8;	box-shadow:1px 1px 3px #ccc;/* css3 transitions for smooth hover effect */	-webkit-transition:opacity 0.2s linear, visibility 0.2s linear; 	-moz-transition:opacity 0.2s linear, visibility 0.2s linear; 	-o-transition:opacity 0.2s linear, visibility 0.2s linear; 	transition:opacity 0.2s linear, visibility 0.2s linear; 	}ul#navigation ul {    top: 43px;    left: 1px;}ul#navigation ul li ul {    top: 0;    left: 181px; /* strong related to width:180px; from above */}

But I couldn't get the second menu to work.

Edited by Professor GIBS
Link to comment
Share on other sites

I know I am double posting here, but I just wanted to say I figured it out haha. If you look where my ID "special" is, it's on the ul, when it should of been on the li. Ahah, made that quick change & now my code works! Thanks to all who have helped!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...