Html 如何防止下拉菜单拉伸导航栏

如何防止下拉菜单拉伸导航栏？我试图找到一种基本的方法，将deals选项卡与下拉列表的其余部分隔离开来，这样就不会影响整个导航栏。顺便说一句，我是网站设计的新手

XHTML：

<div id="nav-bar">
      <ul>
          <li><a href="#home-pge">home</a></li>

          <li class="navbar-drop">
            <a class="navbar-edit">deals</a>
            <div class="navbar-drop-content">
                <a href="#opt1">option 1</a>
                <a href="#opt2">option 2</a>
                <a href="#opt3">option 3</a>
            </div>
          </li>

          <li><a href="#about-us-pge">about us</a></li>
          <li><a href="#contact-pge">contact</a></li>
          <li><a href="#howto-pge">how to</a></li>
      </ul>
  </div>

css的下拉部分：

#nav-bar li a, .navbar-edit{/*edits the "Deals" tab if needed*/
        cursor:             pointer;
    }

    .navbar-drop:hover .navbar-drop-content{/*Displays the "dropdown box" when the navbar element is hovered over*/
        display:            block;
    }

    .navbar-drop-content{/*this edits the dropdown card itself*/
        display:            none;
        box-shadow:         0px 8px 16px 0px rgba(0,0,0,0.2);/*to make the dropdown menu look like a "card"*/
        width:              100%;
    }
    #nav-bar li .navbar-drop-content a{/*edits the links in the drop down*/
        color:              black;
        background-color:   #F5F3EF;
        text-decoration:    none;
        text-align:         left;
    }
     #nav-bar li .navbar-drop-content a:hover{/*edits the links in the dropdown when hovered*/
        background-color:   red;
        cursor:             url("1note.png"), crosshair;
    }

从

#导航栏ul

给出导航条下降的位置：相对位置

给出

导航栏放置内容

位置：绝对

，并相对于导航栏对其进行定位（

50px

看起来大致正确）

#导航条ul{
列表样式类型：无；
保证金：0；
填充：0；
/*溢出：隐藏*/
背景色：#666666；
宽度：100%；
位置：固定；
顶部：80px；
}
#巴里导航{
浮动：左；
右边框：3张灰色插图；
}
#导航栏李a{
显示：块；
高度：25px；
宽度：150px；
文字装饰：无；
文本转换：大写；
文本对齐：居中；
颜色：白色；
填充：15px 15px 10px 15px；
}
#导航栏李a：悬停{
背景色：#C4BCB9；
}
#李国宝：最后一个孩子{
边界权：无；
}
#导航栏李a，
.导航栏编辑{
/*如果需要，编辑“交易”选项卡*/
光标：指针；
}
.导航条下降{
位置：相对位置；
}
.navbar放置：悬停.navbar放置内容{
/*当导航栏元素悬停在上方时，显示“下拉框”*/
显示：块；
}
.导航栏放置内容{
/*这将编辑下拉卡本身*/
显示：无；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
/*使下拉菜单看起来像一张“卡片”*/
宽度：100%；
位置：绝对位置；
顶部：50px；
z指数：1000；
}
#导航栏li.导航栏放置内容a{
/*编辑下拉列表中的链接*/
颜色：黑色；
背景色：#F5F3EF；
文字装饰：无；
文本对齐：左对齐；
}
#导航栏li.导航栏放置内容a:悬停{
/*悬停时编辑下拉列表中的链接*/
背景色：红色；
光标：url（“1note.png”），十字线；
}

从

#导航栏ul

给出导航条下降的位置：相对位置

给出

导航栏放置内容

位置：绝对

，并相对于导航栏对其进行定位（

50px

看起来大致正确）

#导航条ul{
列表样式类型：无；
保证金：0；
填充：0；
/*溢出：隐藏*/
背景色：#666666；
宽度：100%；
位置：固定；
顶部：80px；
}
#巴里导航{
浮动：左；
右边框：3张灰色插图；
}
#导航栏李a{
显示：块；
高度：25px；
宽度：150px；
文字装饰：无；
文本转换：大写；
文本对齐：居中；
颜色：白色；
填充：15px 15px 10px 15px；
}
#导航栏李a：悬停{
背景色：#C4BCB9；
}
#李国宝：最后一个孩子{
边界权：无；
}
#导航栏李a，
.导航栏编辑{
/*如果需要，编辑“交易”选项卡*/
光标：指针；
}
.导航条下降{
位置：相对位置；
}
.navbar放置：悬停.navbar放置内容{
/*当导航栏元素悬停在上方时，显示“下拉框”*/
显示：块；
}
.导航栏放置内容{
/*这将编辑下拉卡本身*/
显示：无；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
/*使下拉菜单看起来像一张“卡片”*/
宽度：100%；
位置：绝对位置；
顶部：50px；
z指数：1000；
}
#导航栏li.导航栏放置内容a{
/*编辑下拉列表中的链接*/
颜色：黑色；
背景色：#F5F3EF；
文字装饰：无；
文本对齐：左对齐；
}
#导航栏li.导航栏放置内容a:悬停{
/*悬停时编辑下拉列表中的链接*/
背景色：红色；
光标：url（“1note.png”），十字线；
}

#nav-bar li a, .navbar-edit{/*edits the "Deals" tab if needed*/
        cursor:             pointer;
    }

    .navbar-drop:hover .navbar-drop-content{/*Displays the "dropdown box" when the navbar element is hovered over*/
        display:            block;
    }

    .navbar-drop-content{/*this edits the dropdown card itself*/
        display:            none;
        box-shadow:         0px 8px 16px 0px rgba(0,0,0,0.2);/*to make the dropdown menu look like a "card"*/
        width:              100%;
    }
    #nav-bar li .navbar-drop-content a{/*edits the links in the drop down*/
        color:              black;
        background-color:   #F5F3EF;
        text-decoration:    none;
        text-align:         left;
    }
     #nav-bar li .navbar-drop-content a:hover{/*edits the links in the dropdown when hovered*/
        background-color:   red;
        cursor:             url("1note.png"), crosshair;
    }