自动调整菜单列表CSS HTML的大小 [英] Auto resize of my menu list CSS HTML

查看:91
本文介绍了自动调整菜单列表CSS HTML的大小的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当我将光标放在GOOGLE按钮上时,块会自动调整大小,我希望孙子元素在parrent按钮之外。



代码:< br $> b $ b

when i get the cursor on the "GOOGLE" button, the block resize for it self i want the grandchild element 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>





我尝试过:



i我的代码有一些变化,但我什么都没有



What I have tried:

i had some changes in my code but i got nothing

推荐答案

添加这个



add this

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


您好,



您可以参考此链接



自动调整我的菜单列表CSS HTML - Stack Overflow [ ^ ]


这篇关于自动调整菜单列表CSS HTML的大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆