mardi 31 octobre 2017

Auto resize of my menu list CSS HTML

when i get the cursor on the "GOOGLE" button, the parrent block resize for it self i want the grandchild elements outside the parrent button. when i get the cursor on the "GOOGLE" button, the parrent block resize for it self i want the grandchild elements outside the parrent button.

CODE:

<html>
<head>
   <style type="text/css">

       ol{
           display: none;
       }
       li:hover ol 
       {
           display: block;
           margin-left: -4.2em;
       }
       #shadow li 
       { list-style-type: none;
       border: 2px solid black;
       box-shadow : 5px 5px 5px gray;
       margin-bottom: 10px;
       text-align: center;
       width: 10em;
       margin-left: 1.5em;
       float : left;
           display: block;


       }

</style>
    </head>
<body>
    <div id="shadow">
    <ul>
        <li style="margin-left : -2.5em"> 
            <a href="http://www.google.com">GOOGLE</a>
            <ol type="a"> 
        <li> <a href="http://www.google.com">google1</a>
        </li> 
        <li> <a href="http://www.google.com">google1</a>
        </li>


            </ol>


        </li>

        <li> <a href="http://www.youtube.com">YOUTUBE</a></li>

        <li> <a href="http://www.facebook.com">FACEBOOK</a></li>
        </ul>


    </div>

</body>
</html>




Aucun commentaire:

Enregistrer un commentaire