导航栏制作时出现的问题及解决方法

下拉菜单出现的问题

1. 下拉菜单排版问题

question:
在进行下拉菜单的的制作时当我想要沿着x轴的时候，它会出现直接就 沿着y轴进行排版。
solution:
我使用的是margin-left对大盒子整体进行移动，但是觉得灵活性很差，目前还没有找到合适的方法。其实觉得bootstrap的网格布布局对其进行列嵌套应该也是可以达到想要的效果，方法不唯一。

2. 下拉菜单如何在页面滚动时不被隐藏

question:
当我在用鼠标控制页面的滚动时，此时导航栏是固定的，但是当我想用鼠标点击下拉菜单时就发现下拉菜单根本就显示不出来。

solution:
对导航栏以下的盒子加上z-index属性:

.name{
z-index:-1;
}

3.下拉菜单使用button按钮时不是维持一个按钮的样式

question:
当使用button按钮时，它会显示为一个一个的按钮，对于导航栏来说就会显得很难看。

solution:
对此按钮加一个透明属性。

   .dropdown:hover .dropbtn {
            background-color: transparent;
        }

关于我写的完整的下拉菜单的代码展示：

/* 下拉菜单 */
.content {

    position: relative;
    float: left;
    margin-left: 400px;
    padding: 0px;
    margin-top: -30px;
    margin-bottom: 0px;

}


/* 下拉按钮样式 */
.dropbtn {
    background-color: transparent;
    color: white;
    border: none;
    /* opacity: 0; */
    font-size: 16px;
    cursor: pointer;
}

/* 容器 <div> - 需要定位下拉内容 */

.content .dropdown {
    position: relative;
    display: inline-block;
    height: 20px;
    margin-bottom: 50px;
}

/* 下拉内容 (默认隐藏) */
.content .dropdown .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: - 1;
}

/* 下拉菜单的链接 */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {
    background-color: #f1f1f1
}

/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
    display: block;
}

/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
    background-color: transparent;
}

背景图片添加问题

4 图片双重叠加问题

question
当加入一个最大的背景图片时，再加入一个小的图片作为装饰是，我加入的时候它会溢出最大的盒子
solution
给父盒子加：

.div{
overflow：hidden；
}

但是此时要注意其他地方是否加了浮动，否则此属性会清除浮动，使得页面达不到我们想要的效果。
除此之外：
对父子盒子加入定位属性：
可以使用子绝父相试试，

position：relative/abousulate;

/*大背景图*/
```javascript
.content{
background-image:url（）;
}