您的位置：首页 > Web前端 > CSS

css简单导航触到主菜单显示子菜单横栏展示

2016-05-07 18:08 423 查看
<!DOCTYPE HTML>

<html>

  <head>

     <title>css简单导航触到主菜单显示子菜单横栏展示</title>

     <style type="text/css">

           body{ text-align:center; margin:0px; padding:0px;}

           .header{margin:0 auto; width:1200px; height:200px; background-color:Gray; }

           .mainmenu ul{float:left; width:100px; background-color:White;}

           .mainmenu ul li{list-style:none; height:54px;float:left; }

           .mainmenu ul li:hover ul{display:block;height:25px; background-color:transparent;}

           .mainmenu ul li ul{width:1000px; display:none; float:left; position:absolute; left:50px; top:40px; color:red; z-index:2;}

           .mainmenu ul li ul li{float:left; width:100px; height:25px;}

           a{ text-decoration:none; color:Red;}

           .submenu{float:left; position:absolute; z-index:1; top:40px;  background-color:Blue; width:1000px; height:30px;}

     </style>

  </head>

  <body>

    <div class="header">

    <div class="mainmenu">

      <ul> 

        <li><a href="javascript:void(0);">海南</a>

            <ul>

              <li><a href="http://www.yipanwang.com">海口房产</a></li><li><a href="http://www.yipanwang.com">三亚房产</a></li><li><a href="http://www.yipanwang.com">文昌</a></li> <li>万宁</li><li>陵水</li><li>东方</li>

            </ul>

        </li>

      </ul>

      <ul> 

         <li><a href="javascript:void(0);">北京</a>

            <ul>

               <li>东城</li><li>西城</li><li> 崇文 </li> <li> 宣武 </li><li>朝阳 </li><li>门头沟</li>

            </ul>

         </li>

      </ul>

    </div>

    <div class="submenu"></div>

    </div>

   

  </body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航