Jump to content

Css Dropdown


Hemlock

Recommended Posts

Hello Reader,Currently I am trying to create a form of a dropdown menu, however with a little spin to it.

				<ul>					<li><a href="#">Subjects</a>						<ul>							<li>year1</li>								<ul id="subject">									<li>subject1</li>									<li>subject2</li>									<li>subject3</li>									<li>subject4</li>									<li>subject5</li>								</ul>							<li>year2</li>								<ul id="subject">									<li>subject1</li>									<li>subject2</li>									<li>subject3</li>									<li>subject4</li>									<li>subject5</li>								</ul>							<li>year3</li>								<ul id="subject">									<li>subject1</li>									<li>subject2</li>									<li>subject3</li>									<li>subject4</li>									<li>subject5</li>								</ul>							<li>year4</li>								<ul id="subject">									<li>subject1</li>									<li>subject2</li>									<li>subject3</li>									<li>subject4</li>									<li>subject5</li>								</ul>						</ul>					</li>					<li><a href="#">Portfolio</a></li>					<li><a href="#">Blog</a></li>					<li><a href="#">Other</a></li>				</ul>

ul {	margin: 0;	padding: 0;	list-style: none;	}	ul li {	position: relative;	left: 0px;	float: left;}li ul {	position: absolute;	top: 0px;	left: 0px;	display: none;	padding-top: 26px;	}	ul li ul li {	width: 100px;}	ul#subject {	margin-top: 15px;	float: left;}		li:hover ul { display: block; }

What I am trying to establish is; to make sure that the years are next to one another, and the subjects under each year falls under that vertically, but I can't seem to get it strait, and at this point I really don't have a clue as to how to approach this.Regards

Link to comment
Share on other sites

Your lists are nested incorrectlyie. <li>year1</li> <ul id="subject"> <li>subject1</li> <li>subject2</li> <li>subject3</li> <li>subject4</li> <li>subject5</li> </ul>should be; <li>year <ul id="subject"> <li>subject1</li> <li>subject2</li> <li>subject3</li> <li>subject4</li> <li>subject5</li> </ul> </li>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...