Html 带子菜单的堆叠菜单，需要更改子菜单的宽度

我对这个很陌生。我有一个带有子菜单的堆叠菜单，但我需要子菜单的宽度小于菜单，每次我更改子菜单的宽度时，它确实会更改，但也会保持父菜单的宽度

[这是子菜单的外观

HTML

`
















`
CSS
/*菜单*/
@介质（最小宽度：768px）{
.菜单{
宽度：72.5%；
左：100px；
边框：1px实心#129cf3；
位置：绝对位置；
背景色：#F2F2；
字体：18px“Raleway”，无衬线；
文本对齐：居中；
文字装饰：无；
边界塌陷：塌陷；
顶部：250px；
字号：600；
边框底部：无；
过渡：所有1；
盒影：10px 10px 5px#8888888；
}
李先生{
列表样式：无；
文字装饰：无；
}
}
.菜单a{
颜色：#000；
左：800px；
文本转换：大写；
字母间距：.1米；
文字装饰：无；
显示：块；
填充：35px；
边框底部：1px实心#129cf3；
文本对齐：居中；
边界塌陷：塌陷；
过渡：所有1；
}
.菜单a：悬停{
背景色：#129cf3；
颜色：#000；
文字装饰：无；
}
.菜单一{
字号：600；
}
#切换，菜单：之前
#切换：之后{
宽度50%；
}
.菜单列表李a{
左边距：20px；
右边距：20px；
边缘底部：0px；
边际上限：0px；
填充：15px；
边界：0px；
字体大小：12px；
文本对齐：居中；
}

这就是css /*菜单*/

   ul{

      list-style:none;
      padding:0;margin:0;
    }
    @media (min-width: 768px) {
        .menu {
            width:72.5%;
            left: 100px;
            border: 1px solid #129cf3;
            position: relatve;
            background-color: #f2f2f2;
            font: 18px 'Raleway', sans-serif;
            text-align: center;
            text-decoration: none;
            border-collapse: collapse;
            top: 250px;
            font-weight: 600;
            border-bottom: none;
            transition: all 1s;
            box-shadow: 10px 10px 5px #888888;
        }
        .menu>li {
            list-style: none;
            text-decoration: none;
        }
    }
    .menu >li>a {
        color: #000;
        left: 800px;
        text-transform: uppercase;
        letter-spacing: .1em;
        text-decoration: none;
        display: block;
        padding: 35px;
        border-bottom: 1px solid #129cf3;
        text-align: center;
        border-collapse: collapse;
        transition: all 1s;
    }
    .menu >li> a:hover {
        background-color: #129cf3;
        color: #000;
        text-decoration: none;
    }
    .menu i {
        font-weight: 600;
    }

    #toggle,menu:before
    #toggle:after{
        width 50%;
    }

  .menu-list >li >a{
     margin: 0 auto;
    padding: 15px;
    border: 0px;
    font-size: 12px;
    text-align: center;
    color: #000;
   text-transform: uppercase;
    letter-spacing: .1em;
    text-decoration: none;
    text-align: center;
    width: 80%;
    background: red;
    display: block;

    }

---

和fiddler链接

您好，谢谢您的帮助，我想从子菜单中删除主菜单填充。menu-list>li>a{}这是子菜单，您可以根据需要更改填充

   ul{

      list-style:none;
      padding:0;margin:0;
    }
    @media (min-width: 768px) {
        .menu {
            width:72.5%;
            left: 100px;
            border: 1px solid #129cf3;
            position: relatve;
            background-color: #f2f2f2;
            font: 18px 'Raleway', sans-serif;
            text-align: center;
            text-decoration: none;
            border-collapse: collapse;
            top: 250px;
            font-weight: 600;
            border-bottom: none;
            transition: all 1s;
            box-shadow: 10px 10px 5px #888888;
        }
        .menu>li {
            list-style: none;
            text-decoration: none;
        }
    }
    .menu >li>a {
        color: #000;
        left: 800px;
        text-transform: uppercase;
        letter-spacing: .1em;
        text-decoration: none;
        display: block;
        padding: 35px;
        border-bottom: 1px solid #129cf3;
        text-align: center;
        border-collapse: collapse;
        transition: all 1s;
    }
    .menu >li> a:hover {
        background-color: #129cf3;
        color: #000;
        text-decoration: none;
    }
    .menu i {
        font-weight: 600;
    }

    #toggle,menu:before
    #toggle:after{
        width 50%;
    }

  .menu-list >li >a{
     margin: 0 auto;
    padding: 15px;
    border: 0px;
    font-size: 12px;
    text-align: center;
    color: #000;
   text-transform: uppercase;
    letter-spacing: .1em;
    text-decoration: none;
    text-align: center;
    width: 80%;
    background: red;
    display: block;

    }