Hemlock Posted October 26, 2009 Share Posted October 26, 2009 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 More sharing options...
lastlifelost Posted October 30, 2009 Share Posted October 30, 2009 Try this: ul li ul li { width: 100px; display:inline-block;} It may need some more tweaking, but I think that this will help you out. You may need to put your year li's inside a div to make this work fully. Link to comment Share on other sites More sharing options...
roundcorners Posted October 30, 2009 Share Posted October 30, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.