Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jun 2011
    Posts
    119
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Vertical Menu with submenus flying out when mouse is hovered

    I am trying to create a vertical menu with fly outs .That is a vertical menu with sub-menus.What is wrong with the following code?

    <html>
    <head>
    <title>Untitled Document</title>
    <style type="text/css">

    #navmenu ul ul li a
    {border:1px solid #888888;
    border-bottom: none;
    font-size:12pt;
    line-height: 1.6em;
    color:#303030;
    background-color:#a5a5a5;
    background-image:none;}
    #navmenu {
    width: 150px; /* set width of menu */
    }

    #navmenu ul
    {list-style-type:none;
    margin:0px;
    padding:0px;}

    #navmenu a
    {text-decoration:none;
    border: 1px solid #303030;
    width:170px;
    display:block;
    text-align:center;
    font-size:14pt;
    line-height:2em;
    background:url(Button_top.gif) repeat-x left;
    font-family:Arial, Helvetica, sans-serif; color:white;}

    #navmenu a:hover {
    color: #a00; /* red text color on hover */
    background: #fff; /* white bgcolor on hover */
    }

    #navmenu li {
    /* make the list elements a containing block for the nested lists */
    position: relative;
    }

    #navmenu ul ul{
    position: absolute;
    top: 0;
    left: 100%; /* to position them to the right of their containing block */
    width: 100%; /* width is based on the containing block */
    }

    #navmenu li {
    /* make the list elements a containing block for the nested lists */
    position: relative;
    }

    #navmenu ul ul
    {display: none;}

    #navmenu ul li:hover ul
    {display:block;}

    </style>

    </head>
    <body>
    <div id="navmenu">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <ul>
    <li><a href="#">Blog 1</a></li>
    <li><a href="#">Blog 2</a></li>
    </ul>
    <li><a href="#">Websites</a></li>
    <ul>
    <li><a href="#">Websites 1</a></li>
    <li><a href="#">Websites 2</a></li>
    </ul>
    <li><a href="#">Photos</a></li>
    </ul>
    </div>

    </body>
    </html>

  • #2
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    0
    Thanked 3 Times in 3 Posts
    What do you currently see when you use this code? it looks correct, but I may have found the error.

    You have to have it set out like

    Code:
     <ul> 
        <li>Menu1
          <ul> 
            <li>SubMenu1</li> 
            <li>SubMenu2 </li> 
          </ul> 
        </li> 
        <li>Menu2
          <ul> 
            <li>SubMenu1</li> 
            <li>Submenu2</li> 
          </ul> 
        </li> 
        <li>Menu3
          <ul> 
            <li>SubMenu1</li> 
            <li>SubMenu2</li> 
          </ul> 
        </li> 
      </ul>
    Excuse if there's any erorrs, I just wrote that off the cuff. (I'm on my ipad)
    Last edited by JustinJD; 08-01-2011 at 06:58 AM.

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Try this code.. You have to change color of main navigation

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    
    <title>Untitled Document</title>
    <style type="text/css">
    
    #navmenu ul li ul li a
    {border:1px solid #888888;
    display:block;
    border-bottom: none;
    font-size:12pt;
    line-height: 1.6em;
    color:#303030;
    background-color:#a5a5a5;
    background-image:none;}
    #navmenu {
    width: 150px; /* set width of menu */
    }
    
    #navmenu ul
    {list-style-type:none;
    margin:0px;
    padding:0px;}
    
    #navmenu a
    {text-decoration:none;
    border: 1px solid #303030;
    width:170px;
    display:block;
    text-align:center;
    font-size:14pt;
    line-height:2em;
    background:url(Button_top.gif) repeat-x left;
    font-family:Arial, Helvetica, sans-serif; color:white;}
    
    #navmenu a:hover {
    color: #a00; /* red text color on hover */
    background: #fff; /* white bgcolor on hover */
    }
    
    #navmenu li {
    /* make the list elements a containing block for the nested lists */
    position: relative;
    }
    
    #navmenu ul ul{
    position: absolute;
    top: 0;
    left: 170px;  /*to position them to the right of their containing block */
    width: 100%; /* width is based on the containing block */
    }
    
    #navmenu li {
    /* make the list elements a containing block for the nested lists */
    position: relative;
    }
    
    #navmenu ul ul
    {display: none;}
    
    #navmenu ul li:hover ul
    {display:block;}
    
    </style>
    
    </head>
    <body>
    <div id="navmenu">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a><ul>
    <li><a href="#">Blog 1</a></li>
    <li><a href="#">Blog 2</a></li>
    </ul></li>
    
    <li><a href="#">Websites</a><ul>
    <li><a href="#">Websites 1</a></li>
    <li><a href="#">Websites 2</a></li>
    </ul></li>
    
    <li><a href="#">Photos</a></li>
    </ul>
    </div>
    
    </body>
    </html>
    Always define DOCTYPE


  •  

    Posting Permissions

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