Trying to build a simple multilevel menu

HTML & CSS
1

here is my html:

                 <ul class="top">
    		<li >aaaaa</li>
    		<li>bbbbb</li>
    		<li>ccccc</li>
    		<li>ddddd</li>
    		<li class="submenu">eeeee
    			<ul>
    				<li>111</li>
    				<li>222</li>
    				<li>222</li>
    				<li>444</li>
    			</ul>
    		</li>
    		<li>fffff</li>
    	</ul><!-- end top -->

here is my css:

li {
	list-style: none; 
	width: 75px; height: 40px;	
	background-color: #6f6;
	border: 1px solid black;
}
.top li { display: inline-block; }:

output can be viewed here:
http://codepen.io/jimeast/pen/MyXmPw

2

Did you forget to post a question? :slight_smile:

Are you stuck at this point, or? You’ll obviously need to add in anchors etc, so best to proceed with that before worrying about the functionality.

3

I forgot to mention that I’m trying to get the li that contains eeeee in line with ddddd and fffff

4

The functionality is what I’m interested in. I just now added a tags to the codepen example it made no difference.

5

Maybe I have to use absolute positioning?

6

If you are trying to build a drop down menu then the mested ul needs to be placed absolutely so that it does not interrupt the top level.

Add position:relative to the top level list item and then place the nested ul at position:absolute; left:0 and top:100%;

Assuming that is what you are trying to achieve :slight_smile:

7

Well I did a search for simple multilevel menu and hit gold. Usually when I search I find examples that are too hard, too simple or ones that just don’t work. So anyway I cheated and found the perfect example, one that does all that I’d hoped and that I could easily wrap my head around. I made a code pen so I can share. http://codepen.io/jimeast/pen/MyXmPw

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.