纯洁CSS实现下拉菜单和下拉容器（纯洁CSS导航栏和导航下拉容器）

 虽然网上课程似即使案件大同小异，但我还是写，记笔记，也为您提供参考

我希望你能指导批评~~

首先，我们必须列出ul li 开始我们的导航栏菜单也能说生产：

在下面的页面，我们先建XHTML结构体：

<body>
  <ul id="navWrapper">
    <li>
      <a href="#">Menu A</a>
      <ul>
        <li><a href="#">Menu A, Item 1</a></li>
        <li><a href="#">Menu A, Item 2</a></li>
        <li><a href="#">Menu A, Item 3</a></li>
        <li><a href="#">Menu A, Item 4</a></li>
        <li><a href="#">Menu A, Item 5</a></li>
        <li><a href="#">Menu A, Item 6</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Menu B</a>
      <div id="test"><a href="#">Menu B, Item 1</a></div>
    </li>
  </ul>
  <div id="banner"></div>
  <div id="content">
    <p>Page content here.</p>
  </div>
</body>
View Code

效果：

接着。我们来一步一步设计样式及功能（先给每一个元素加个边框以便兴许样式设计差别）：

样式代码：

<style>
    ul{
        border:1px solid red;
    }
    li{
        border:1px solid lightgreen;
    }
    div{
        border:1px solid black;
    }
</style>
View Code

效果：

 

这样我们就能够好区分。好设计了~~

以下去掉链接的下滑线和列表的“.”“。

”，而且使父级的列表横向排列。子级列表还是纵向排列，这样才像下拉菜单嘛~~（这里是两级列表嵌套，一个父级一个子级）

样式代码：

<style>
    ul{
        border:1px solid red;
    }
    li{
        border:1px solid lightgreen;
    }
    div{
        border:1px solid black;
    }
    

    a{
        text-decoration:none;
    }
    ul#navWrapper li{
        float:left;
        list-style:none;
    }
    ul#navWrapper li ul li{
        float:none;
    }
    div#banner{
        clear:both;
    }
</style>
View Code

效果：

以下来隐藏子级列表和子级容器（这里子级容器是指id为test的div容器），当鼠标移动到父级列表时相相应的子级列表显现出来，通过“ :hover ”实现，隐藏显现通过display的“ none ”和“ block ”来实现，注意这里不用visibility的“ hidden ”和“ visible ”来实现，至于差别大家能够把相应的属性换成visibility来看看效果。这里就不实现了

样式代码：

<style>
    ul{
        border:1px solid red;
    }
    li{
        border:1px solid lightgreen;
    }
    div{
        border:1px solid black;
    }
    

    a{
        text-decoration:none;
    }
    ul#navWrapper li{
        float:left;
        list-style:none;
    }
    ul#navWrapper li ul li{
        float:none;
    }
    div#banner{
        clear:both;
    }
    

    ul#navWrapper ul,ul#navWrapper div#test{
        display:none;
        position:absolute;
    }
    ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{
        display:block;
    }
</style>
View Code

效果：

这里有一点须要注意，当不设置子级的position为“ absolute ”时，鼠标移动到父级，出现的子级会在页面占领一定的位置。那么“ Page content here ”将会产生移动。这是十分不好的。所以我们设置子级“ position:absolute; ”，这样便能够使它们脱离正常的流程。不影响后面的内容位置。

再将父级位置略微偏移下和将第一个父级下的自己列表向左偏移与父级边框对齐，而且给第二个父级下的div容器一定的“容积”

样式代码：

<style>
    ul{
        border:1px solid red;
    }
    li{
        border:1px solid lightgreen;
    }
    div{
        border:1px solid black;
    }
    
    a{
        text-decoration:none;
    }
    ul#navWrapper li{
        float:left;
        list-style:none;
    }
    ul#navWrapper li ul li{
        float:none;
        
        margin-left:-41px;
    }
    div#banner{
        clear:both;
        
        height:50px;
        margin-top:30px;
    }
    
    ul#navWrapper ul,ul#navWrapper div#test{
        display:none;
        position:absolute;
    }
    ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{
        display:block;
    }
    
    ul#navWrapper{
        margin-left:-41px;
    }
    ul#navWrapper div#test{
        height:200px;
        width:600px;
        background:lightgray;
    }
</style>
View Code

效果：

将全部边框去掉后这里最主要的结构就设计好了，其它的样式能够任意调整啦~~

 

比方：

将全部边框去掉后，并对总体进行下设计

样式代码：

<style>
    body,div,ul,li{
        padding:0;
        margin:0;
    } 
    a{
        text-decoration:none;
    }
    ul#navWrapper li{
        float:left;
        list-style:none;
        
        height:45px;
        line-height:45px;
    }
    ul#navWrapper li ul li{
        float:none;
    }
    div#banner{
        clear:both;
        
        height:50px;
        margin-top:50px;
        margin-left:50px;
    }
    div#content{
        margin-left:50px;
    }
    ul#navWrapper ul{
        display:none;
        position:absolute;
        background:#CCC;
    }
    ul#navWrapper div#test{
        display:none;
        position:absolute;
        height:200px;
        width:600px;
        background:#cde6c7;
    }
    ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{
        display:block;
    }
    
    ul#navWrapper{
        background:#CCC;
        height:45px;
        width:960px;
        margin:0 auto;
        margin-top:30px;
    }
    
    li a{
        font-size:24px;
        color:#333;
        display:block;
        height:45px;
        padding:0 20px;
    }
    li a:hover{
        color:#fff;
        background:#000;
    }
</style>
View Code

效果：

　　图一：

 　　图二：

 OK。这就是在以上基本结构上设计的一个样例了。

假设还须要设计。仅仅须要在以上最基本结构上设计即可了~~

 

參考文献：微软官方档“如何创建CSS下拉式菜单”

 

版权声明：本文博主原创文章。博客，未经同意不得转载。

posted @ 2015-09-09 17:02  lcchuguo  阅读(809)  评论(0)  编辑  收藏  举报