www.webdeveloper.com
Results 1 to 3 of 3

Thread: Plase help with drop down menu

Hybrid View

  1. #1
    Join Date
    Mar 2011
    Posts
    31

    Plase help with drop down menu

    Hey guys

    I need help with a drop down menu I created.
    I want it to reveal other sub-menus once the user clicks on it, instead of hovering with the mouse.
    Is that possible?

    Here is my code:

    HTML

    Code:
    <html>
    <head>
    
     <link rel="stylesheet" type="text/css" href="menu.css">
     </head>
    <body>
    
    <div id="menu">
    <ul>
    <li><a href=""><p>Start</p></a>
    <div class="submenu">
    <ul>
    <li><a href=""><p>Images </p></a></li>
    <li><a href=""><p>Videos</p></a></li>
    <li><a href=""><p>Documents</p></a></li>
    <li><a href=""><p>Settings</p></a></li>
    <li><a href=""><p>Log off</p></a></li>
    </ul>
    </li>
    
    </ul>
    </div>
    </div>
    
    
    </body>
    </html>
    CSS

    Code:
    body{background-color:grey;}
    
    #menu li{width:200px; float:left;list-style-type:none;
    position:relative; top:530px; left:-47px;}
    #menu a{ border-radius:15px; display:block; color:white;
    text-indent:55px; border:1px solid white; background-color:black;
    font-size:18pt; font-weight:bold; text-decoration:none;}
    #menu a:hover{color:black; background: white;}
    
    /*secondary foundation*/
    #menu ul .submenu li{height:75px; float:left; width:250px;}
    #menu li .submenu{position:absolute; left:20px; top:-907px;
    width:10px; height:200px; display:none;}
    
    /*main foundation*/
    #menu li:hover .submenu{display:block; float:left;  height:200px;
    }

  2. #2
    Join Date
    Mar 2011
    Posts
    31
    More info:

    I just want to clarify what I need help with.
    I want to create a toggle menu that pops up when clicked (but not when hovered).

    Please help.

  3. #3
    Join Date
    Mar 2011
    Posts
    31
    bump...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles