需要仅在CSS onclick下拉菜单中隐藏溢出文本，但这样做会破坏功能

我有一个css onclick下拉菜单，其中包含动态内容，因此当它是一个很长的字符串时，我需要它来截断或隐藏。我尝试了“溢出：隐藏”，但它中断了下拉菜单，因此子菜单不再下拉。

我希望我已经正确解释了我的问题！

我的html：

<ul id="menu">
    <li>
        <input id="check01" type="checkbox" name="menu"/>
        <label for="check01">fadfadfadakldjfkwpoerikawekrlqkawejndzay6yai1keysb5tz6ptpcjxr1rwcadfa56fgsdf98hrjsijsgfsfgi</label>
        <ul class="submenu">
            <li><a href="#">fadfadfadakldjfkwpoerikawekrlqkawejndzay6yai1keysb5tz6ptpcjxr1rwcadfa56fgsdf98hrjsijsgfsfgi</a></li>
            <li><a href="#">fadfadfadakldjfkwpoerikawekrlqkawejndzay6yai1keysb5tz6ptpcjxr1rwcadfa56fgsdf98hrjsijsgfsfgi</a></li>
        </ul>
    </li>
    </ul>

我的CSS：

/*Style for the first level menu bar*/
ul#menu{
    position:fixed;
    top:0;
    height:3em;
    border: 1px solid #fff;
    border-radius: 3px;
    color: #fff;
    float: left;
    margin-right: 1em;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: .9em;
    max-width: 85%;
    width: auto;
}

ul#menu > li{
    float:left;
    list-style-type:none;
    position:relative;
}

label{
    position:relative;
    display:block;
    padding:0 18px 0 12px;
    line-height:3em;
    transition:background 0.3s;
    cursor:pointer;
}

label:after{
    content:"";
    position:absolute;
    display:block;
    top:50%;
    right:5px;
    width:0;
    height:0;
    border-top:4px solid rgba(255,255,255,.5);
    border-bottom:0 solid rgba(255,255,255,.5);
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    transition:border-bottom .1s, border-top .1s .1s;
}

label:hover,
input:checked ~ label{
    background:rgba(0,0,0,.3);
}

input:checked ~ label:after{
    border-top:0 solid rgba(255,255,255,.5);
    border-bottom:4px solid rgba(255,255,255,.5);
    transition:border-top .1s, border-bottom .1s .1s;
}

/*hide the inputs*/
input{
    display:none
}

/*show the second levele menu of the selected voice*/
input:checked ~ ul.submenu{
    max-height:300px;
    transition:max-height 0.5s ease-in;
}

/*style for the second level menu*/
ul.submenu{
    max-height:0;
    padding:0;
    overflow:hidden;
    list-style-type:none;
    background:#444;
    box-shadow:0 0 1px rgba(0,0,0,.3);
    transition:max-height 0.5s ease-out;
    position:absolute;
    min-width:100%;
}

ul.submenu li a{
    display:block;
    padding:12px;
    color:#ddd;
    text-decoration:none;
    box-shadow:0 -1px rgba(0,0,0,.5) inset;
    transition:background .3s;
    white-space:nowrap;
}

ul.submenu li a:hover{
    background:rgba(0,0,0,.3);
}

编辑：

抱歉，我第一次在此站点上发布...希望这更加清晰...。请忽略上面的代码，而是在这里查看我的小提琴：https : //jsfiddle.net/xw7hzmky/6/

我想应用溢出：隐藏；和文本溢出：省略号；（或剪辑）到ul＃菜单，虽然它可以执行我想要的操作，但最终也隐藏了我的下拉菜单。我需要保持宽度：自动；最大宽度：85％；以便根据字符串调整大小，短时看起来不错，并且长时不会超出某个点（85％）...在那一点上，我希望截断它，因此是我的问题。任何帮助将不胜感激！提前非常感谢您！

编辑：

非常感谢大家的帮助，@ Mridul Kashyap为我解决了这个问题。非常感谢您的光临！