菜单栏

无意间发现一个网址，里面讲的挺详细，也很清楚：http://www.runoob.com/css/css-tutorial.html

自己练了一个菜单栏，讲真，做的很一般，就当是先做个铺垫了。

样式如下：

代码实现：

1.HTML部分：

    <div id="nav">
        <button id="total">新闻</button>
        <div id="list">
            <a href="#home">新闻1</a>
            <a href="#home">新闻2</a>
            <a href="#home">新闻3</a>
        </div>
    </div>

2.总菜单样式：

       #total{
            border:none;
            150px;
            text-align:center;
            padding:12px 15px;
            background-color:666699;
            color:CC6633;
            font-size:20px;
            font-weight:bold;
        }

3.子菜单样式：

        #list{
            display:none;
            position:absolute;
            min-200px;
            background-color:white;
            box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);
        }
        #list a{
            display:block;
            color:black;
            padding:14px 16px;
        }

4.鼠标经过时显示出子菜单及样式变化：

        #nav:hover #list{
            display:block;
        }
        #nav:hover #total{
            background-color:663399;
        }
        a:hover{
            background-color:#B0B0B0;
        }

完整代码如下：

<html>
<head>
    <meta charset="utf-8">
    <title></title>
    
    <style type="text/css">
        *{
            padding:0;
            margin:0;
            text-decoration:none;
        }
        #total{
            border:none;
            width:150px;
            text-align:center;
            padding:12px 15px;
            background-color:666699;
            color:CC6633;
            font-size:20px;
            font-weight:bold;
        }
        #list{
            display:none;
            position:absolute;
            min-width:200px;
            background-color:white;
            box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);
        }
        #list a{
            display:block;
            color:black;
            padding:14px 16px;
        }
        #nav:hover #list{
            display:block;
        }
        #nav:hover #total{
            background-color:663399;
        }
        a:hover{
            background-color:#B0B0B0;
        }
    </style>
</head>


<body>
    <div id="nav">
        <button id="total">新闻</button>
        <div id="list">
            <a href="#home">新闻1</a>
            <a href="#home">新闻2</a>
            <a href="#home">新闻3</a>
        </div>
    </div>
</body>
</html>

View Code

注意：

给下面子菜单（父元素）设置“绝对定位”很重要。似乎也没有那么重要，奇怪，

position：absolute；//不要这个

min-width：200p；//替换成200px;

好像也没有什么影响。

总结：

对于定位相关的知识，了解了绝对定位以及相对定位，上面的注意就没什么意思了。