Results 1 to 2 of 2
  1. #1
    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?

  2. #2
    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

  1. Create submenu on existing submenu - (Easy html and css edit)
    By hostyourdream in forum Design Requests
    Replies: 2
    Last Post: 03-10-2013, 01:21 PM
  2. Create sub menu on existing submenu
    By hostyourdream in forum Web Design and Content
    Replies: 3
    Last Post: 03-04-2013, 03:40 PM
  3. html submenu
    By hoachen in forum Programming Discussion
    Replies: 1
    Last Post: 01-10-2006, 01:16 PM
  4. Looking for Javascript vertical menu with submenu
    By hoachen in forum Programming Discussion
    Replies: 3
    Last Post: 12-30-2005, 05:44 PM
  5. submenu in html
    By rubberduck in forum Web Design and Content
    Replies: 1
    Last Post: 04-06-2004, 05:14 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •