CSS/HTML please help. - NextGenUpdate

01-25-2015, 04:31 AM #1

caleb_chaos

Keeper

10

Posts

10

Reputation

0

Credits

Member

Nov 2014

NextGenUpdate

(adsbygoogle = window.adsbygoogle || []).push({}); I seem to be having a problem. I've just started on making the navigation menu for a website, but I can't seem to get these to go in the correct place. A sub menu should be stemming off from "hyperlink 2" ,and the "hyperlink 4" should have a sub menu coming from that as well.

Instead, my menus are all just neatly in rows. Am I missing something or did I put something in wrong perhaps?

    <!DOCTYPE html>



<html>



<head>



<title>Chaos Clothing</title>

<meta charset="utf-8">

<meta name="author" content="Caleb Dunn">



	<!-- Internal Styles -->

	<style>

		*{

			margin: 0px;

			padding: 0px;

		}



		body {

			font-family: verdana;

			background-color: #ABC;

			padding: 50px;

		}

h1 { 

text-align: center;

border-bottom: 2px solid #009;

margin-bottom: 50px;

}

	/* rules for navigation menu */

	/*=============================================*/



	ul#navmenu, ul.sub1, ul.sub2 {

		list-style-type: none;

	}



	ul#navmenu li {

		outline: 1px solid red;

		width: 125px;

		text-align: center;

		position: relative;

		float: left;

		margin-right: 4px;

	}

	</style>



</head>

<body>



<h1>Navigation Menu</h1>



<ul id="navmenu">

	<li><a href="#">hyperlink 1</a></li>

	<li><a href="#">hyperlink 2</a></li>

		<ul class="sub1">

			<li><a href="#">hyperlink 2.1</a></li>

			<li><a href="#">hyperlink 2.2</a></li>

			<li><a href="#">hyperlink 2.3</a></li>

	</ul>

</li>

	<li><a href="#">hyperlink 3</a></li>

	<li><a href="#">hyperlink 4</a></li>

		<ul class="sub1">

			<li><a href="#">hyperlink 4.1</a></li>

			<li><a href="#">hyperlink 4.2</a></li>

			<li><a href="#">hyperlink 4.3</a></li>

				<ul class="sub2">

					<li><a href="#">hyperlink 4.3.1</a></li>

					<li><a href="#">hyperlink 4.3.2</a></li>

					<li><a href="#">hyperlink 4.3.3</a></li>

	

				</ul>

			</li>

		</ul>

	</li>

	<li><a href="#">hyperlink 5</a></li>

</ul>



</body>

</html>

01-25-2015, 06:07 PM #2

CyberNomadic

Web Developer

2,704

Posts

22,355

Reputation

31

Credits

Premium

Aug 2010

NextGenUpdate

The issue is you are closing off your <li> on the main menu. For example:
On Hyperlink 2 you closed of </li> so it kept the <ul> and the <li> seperate.

Here is a little..upgrade to your navbar Good Luck with Chaos Clothing.

    

<html><head>



<title>Chaos Clothing</title>

<meta charset="utf-8">

<meta name="author" content="Caleb Dunn">



	<!-- Internal Styles -->

	<style>

		*{

			margin: 0px;

			padding: 0px;

		}



		body {

			font-family: verdana;

			background-color: #ABC;

			padding: 50px;

		}

h1 { 

text-align: center;

border-bottom: 2px solid #009;

margin-bottom: 50px;

}

	/* rules for navigation menu */

	/*=============================================*/

nav {

	margin: 100px auto; 

	text-align: center;

}



nav ul ul {

	display: none;

}



	nav ul li:hover > ul {

		display: block;

	}





nav ul {

	background: #efefef; 

	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  

	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 

	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 

	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);

	padding: 0 20px;

	border-radius: 10px;  

	list-style: none;

	position: relative;

	display: inline-table;

}

	nav ul:after {

		content: ""; clear: both; display: block;

	}



	nav ul li {

		float: left;

	}

		nav ul li:hover {

			background: #4b545f;

			background: linear-gradient(top, #4f5964 0%, #5f6975 40%);

			background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);

			background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);

		}

			nav ul li:hover a {

				color: #fff;

			}

		

		nav ul li a {

			display: block; padding: 25px 40px;

			color: #757575; text-decoration: none;

		}

			

		

	nav ul ul {

		background: #5f6975; border-radius: 0px; padding: 0;

		position: absolute; top: 100%;

	}

		nav ul ul li {

			float: none; 

			border-top: 1px solid #6b727c;

			border-bottom: 1px solid #575f6a; position: relative;

		}

			nav ul ul li a {

				padding: 15px 40px;

				color: #fff;

			}	

				nav ul ul li a:hover {

					background: #4b545f;

				}

		

	nav ul ul ul {

		position: absolute; left: 100%; top:0;

	}

		

	</style>



</head>

<body>



<h1>Navigation Menu</h1>

<nav>

	<ul>

		<li><a href="#">hyperlink 1</a></li>

		<li><a href="#">hyperlink 2</a>

			<ul>

				<li><a href="#">hyperlink 2.1</a></li>

				<li><a href="#">hyperlink 2.2</a></li>

				<li><a href="#">hyperlink 2.3</a></li>

			</ul>

		</li>

		<li><a href="#">hyperlink 3</a></li>

		<li><a href="#">hyperlink 4</a>

			<ul>

				<li><a href="#">hyperlink 4.1</a></li>

				<li><a href="#">hyperlink 4.2</a></li>

				<li><a href="#">hyperlink 4.3</a>

					<ul>

						<li><a href="#">hyperlink 4.3.1</a></li>

						<li><a href="#">hyperlink 4.3.2</a></li>

						<li><a href="#">hyperlink 4.3.3</a></li>

					</ul>

				</li>

			</ul>

		</li>

		<li><a href="#">hyperlink 5</a></li>

	</ul>





</nav></body></html>

The following user thanked CyberNomadic for this useful post:

caleb_chaos

01-25-2015, 06:33 PM #3

caleb_chaos

Keeper

10

Posts

10

Reputation

0

Credits

Member

Nov 2014

NextGenUpdate

Wow thank you so much! Can't believe I didn't see that. Looks so much better now too c: Much appreciated!