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 Rachy06's Avatar
    Join Date
    Apr 2006
    Posts
    123
    Thanks
    1
    Thanked 3 Times in 3 Posts

    css menu....help???

    hi... i have used the following code to create a menu in css, and obviously used the appropriate html to create the links. I was wondering if there is anyway i can create a time delay so that the menu doesn't automatically disappear on mouseout? would i have to use javascript?
    Code:
    * CSS Popout menuv */
    /* Fix IE. Hide from IE Mac \*/
    * html #menuv ul li{float:left;height:1%;}
    * html #menuv ul li a{height:1%;}
    /* End */
    #menuv                                   /* position, size, and font of  menu */
     { 
     
     width: 150px;                /* [1] width of menu item (i.e., box) */
     text-align: center;
     font-size: 10pt;
     font-family: helvetica, arial, geneva, sans-serif;
     }
    #menuv a
     {
     width: 120px;
     display:block;      
     padding-top: 0.2em;      /* expands menu box vertically*/
     padding-bottom: 0.2em;
     border-bottom:1px solid #555;  /* adds bottom border */
     white-space:nowrap;
     delay: 0.90;
     }
    #menuv a, #menuv a:visited    /* all menus at rest */
     {
     color: white;
     background: url(./normal.jpg);
     text-decoration:none;           /* removes underlines from links */
     }
    #menuv a:hover                 /* all menus on mouse-over */
     {
     color: black;
     background: url(./mouseover.jpg);
     }
     
    #menuv li
     {
     list-style-type:none;              /* removes bullets */
     }
    #menuv ul li
     {
     position:relative;
     }
    #menuv li ul
     {
     position: absolute;
     top: 0;
     left: 120px;                     /* distance from  left menu (this should be the same as width value in #menuv [1]) above */
     display: none;
     }
    div#menuv ul, #menuv ul ul, div#menuv ul ul ul
     {
     margin:0;                   /* keeps the menu parts together */
     padding:2px;
     width: 120px;                 /* width of sub menus  (this should be the same as width value in #menuv [1]) above */
     }
    div#menuv ul ul, div#menuv ul ul ul, div#menuv ul li:hover ul ul, div#menuv ul li:hover ul ul ul
     {
     display: none;
     }
    div#menuv ul li:hover ul, div#menuv ul ul li:hover ul, div#menuv ul ul ul li:hover ul
     {
     display: block;
     }
    No longer an active user

  • #2
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    I wasn't aware of the fact that there was a CSS property dubbed "delay". I'm pretty sure you do need javascript for this.
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #3
    Regular Coder Rachy06's Avatar
    Join Date
    Apr 2006
    Posts
    123
    Thanks
    1
    Thanked 3 Times in 3 Posts
    yeh i know you need javascript, i was messing around.
    No longer an active user


  •  

    Posting Permissions

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