I am trying to create a top-level menu like you would see in most applications, using HTML, CSS & Javascript. I know there's a ton of pre-built ones, but I want to create my own.
----------------------
| File | Edit | Help |
----------------------
| New |
| Save |
| Save As |
---------
I've been trying various CSS styles to get the following list to layout properly. Is this the appropriate HTML structure, or would you recommend a different one? What CSS is required to properly layout the menu? I'm not concerned about functionality at this point.
I'm open to any HTML 5 techniques as this is only a personal propject.
<ul>
<li>File</li>
<ul>
<li>New</li>
<li>Save</li>
<li>Save As</li>
</ul>
<li>Edit</li>
<ul>
<li>Cut</li>
<li>Copy</li>
<li>Paste</li>
</ul>
<li>Help</li>
<ul>
<li>About</li>
</ul>
</ul>
<ul>
<li>
<a href="#">File</a>
<ul>
<li><a href="#">New</a></li>
<li><a href="#">Save</a></li>
<li><a href="#">Save As</a></li>
</ul>
</li>
<li>
<a href="#">Edit</a>
<ul>
<li><a href="#">Cut</a></li>
<li><a href="#">Copy</a></li>
<li><a href="#">Paste</a></li>
</ul>
</li>
<li>
<a href="#">Help</a>
<ul>
<li><a href="#">About</a></li>
</ul>
</li>
</ul>
Take a look at sample here:
http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With