Hemlock Posted October 26, 2009 Report 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 Report 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 Report 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
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 accountSign in
Already have an account? Sign in here.
Sign In Now