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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    fade in out drop down menu?

    Can someone help me, Im trying to make a drop down menu fade in and out, ive managed to get the color to fade in and out, but not the drop down menu itself.
    Code:
    <style>
    #menu, #menu ul, #menu li{
    padding:0;
    margin:0;
    }
    #menu li{
    list-style: none;
    position: relative;
    width:240px;
    text-align :center;
    height: 60px;
    padding-top:10px;
    padding-left:10px;
    background-color:#323232;
    -moz-transform:scale(1.05);
        outline:none;
        transition: all 0.25s ease-in-out;
        -webkit-transition: all 0.25s ease-in-out;
        -moz-transition: all 0.25s ease-in-out;
    }
    #menu li a{
    text-decoration:none;
    color:#fff;
    text-transform:uppercase;
    font-family: Helvetica;
    -moz-transition:-moz-transform .5s, scale .5s;
    }
    #menu li:hover{
    background-color:#0A5BC4;
    -webkit-transform:scale(1.05);
        outline:none;
        opacity:1;
        transition: all 0.25s ease-in-out;
        -webkit-transition: all 0.25s ease-in-out;
        -moz-transition: all 0.25s ease-in-out;
    }
    #menu ul ul, #menu ul li:hover ul ul, #menu ul ul ul{
    position: absolute;top:0px;right:211.5px;visibility:hidden;}
    #menu ul li:hover ul, #menu ul ul li:hover ul{
    visibility:visible;
    }
    </style>
    <div id="menu">
     <ul>
      <li class="more"><a href="##">download</a>
       <ul>
        <li class="more"><a href="##">software</a>
         <ul>
          <li><a href="##">software-1</a></li>
          <li><a href="##">software-2</a></li>
          <li><a href="##">software-3</a></li>
         </ul>
        </li>
        <li><a href="##">plugins</a></li>
       </ul>
      </li>
      <li class="more"><a href="##">blog</a>
       <ul>
        <li class="more"><a href="##">topic</a>
         <ul>
          <li><a href="##">topic-1</a></li>
          <li><a href="##">topic-2</a></li>
         </ul>
        </li>
        <li class="more"><a href="##">authors</a>
         <ul>
          <li><a href="##">authors-1</a></li>
          <li><a href="##">authors-2</a></li>
          <li><a href="##">authors-3</a></li>
          <li><a href="##">authors-4</a></li>
         </ul>
        </li>
        <li><a href="##">link to me</a></li>
       </ul>
      </li>
      <li><a href="##">contact</a></li>
      <li class="more"><a href="##">about</a>
       <ul>
        <li><a href="##">page-1</a></li>
        <li><a href="##">page-2</a></li>
        <li><a href="##">page-3</a></li>
       </ul>
      </li>
     </ul>
    </div>
    Does anyone know what i need to add here? thanks

  • #2
    Regular Coder Arcticwarrio's Avatar
    Join Date
    May 2012
    Location
    UK
    Posts
    723
    Thanks
    20
    Thanked 84 Times in 84 Posts
    There are 10 types of people on CodingForums,
    Those who understand Binary and those who dont.
    Get Cloud Hosting now from only£59 / month


  •  

    Posting Permissions

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