Results 1 to 2 of 2
Thread: CSS Submenu help
-
08-03-2013, 07:17 PM #1Web Hosting Evangelist
- Join Date
- Aug 2005
- Posts
- 521
CSS Submenu help
I have a horizontal inline menu
<ul>
<li>Item 1
<ul>
<li>Item 1 Sub 1</li>
<li>Item 1 Sub 2</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Item 2 Sub 1</li>
<li>Item 2 Sub 2</li>
</ul>
</li>
</ul>
I would like Item 2 sub items to be align left under the first item
Item 1 Item2 Item3
Item 2 Sub 1 Item 2 Sub 2
Any ideas?
-
08-04-2013, 08:15 PM #2WHT Addict
- Join Date
- Nov 2009
- Location
- Morocco
- Posts
- 138
here is a full example with what you want to make! hope that help :
Code:<!DOCTYPE html> <html lang="en"> <head> <title>CSS Menu</title> <style> #my-menu {position: relative;} #my-menu li { list-style:none; float: left; } #my-menu li a { display: block; padding: 8px 12px; text-decoration: none; } #my-menu li a:hover { background-color:red; color:#FFF; opacity:1; } /* first level menu */ #my-menu { top:150px; min-width:850px; background:#fff; opacity:0.5; display: block; height: 34px; z-index: 100; position: absolute; } #my-menu > li > a { } /* second level menu */ #my-menu li ul { color: #333; display: none; position: absolute; width:850px; } #my-menu li ul li { display: inline; } #my-menu li ul li a { background: #fff; border: none; line-height: 34px; margin: 0; padding: 0 8px 0 10px; } #my-menu li ul li a:hover { background-color:red; color:#FFF; opacity:1; } /* Third level menu */ #my-menu li ul li ul{ top: 0; } ul.child { background-color:#FFF; } /* CSS fallback */ #my-menu li:hover > ul.child { left:0; top:34px; display:inline; position:absolute; text-align:left; } </style> </head> <body> <ul id="my-menu"> <li> <a href="#">Item 1</a> <ul class="child"> <li><a href="#">Item 1 Sub 1</a></li> <li><a href="#">Item 1 Sub 2</a></li> </ul> </li> <li> <a href="#">item 2</a> <ul class="child"> <li><a href="#">Item 2 Sub 1</a></li> <li><a href="#">Item 2 Sub 2</a></li> </ul> </li> </ul> </body> </html>
Similar Threads
-
Create submenu on existing submenu - (Easy html and css edit)
By hostyourdream in forum Design RequestsReplies: 2Last Post: 03-10-2013, 01:21 PM -
Create sub menu on existing submenu
By hostyourdream in forum Web Design and ContentReplies: 3Last Post: 03-04-2013, 03:40 PM -
html submenu
By hoachen in forum Programming DiscussionReplies: 1Last Post: 01-10-2006, 01:16 PM -
Looking for Javascript vertical menu with submenu
By hoachen in forum Programming DiscussionReplies: 3Last Post: 12-30-2005, 05:44 PM -
submenu in html
By rubberduck in forum Web Design and ContentReplies: 1Last Post: 04-06-2004, 05:14 PM