Html 子菜单，设置更左侧的位置

我的幻灯片菜单有点小问题。幻灯片从下到上逐渐变暗。这也很有效

但是现在我想把位置设置得更靠左边一点，这样我就可以在主菜单上看到一行了

也许有人能帮我。这是我的样品

This is my code...  [Menu][1]  https://jsfiddle.net/Tabes/eb52suo1/15/

这是你的解决方案

.flex-box{
宽度：100%；
最小高度：0；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
柔性包装：包装；
弯曲方向：行；
证明内容：之间的空间；
调整项目：灵活启动；
调整内容：灵活启动；
}
.导航{
背景图像：线性梯度（#444，#111）；
背景色：#111；
宽度：100%；
}
/* ******************************************************************************************* */
/*******主导航-主层*************************************************************************************************/
/* ******************************************************************************************* */
.主导航{
背景：透明；
列表样式：无；
}
.nav_main ul:之前，
.nav_main ul:之后{
内容：“；
显示：表格；
}
.nav_main ul{
列表样式：无外无；
位置：相对位置；
柔性包装：nowrap；
证明内容：中心；
对齐项目：居中；
对齐内容：居中对齐；
边际：0px；
填充：0px；
最小宽度：自动；
最小高度：自动；
缩放：1；
}
李：之前，
李：之后{
内容：“；
显示：内联；
}
.nav_main ul li.图标：之前，
.nav_main ul li.图标：后{
显示：内联块；
保证金：2x15px 0px 0px；
宽度：15px；
高度：15px；
}
.nav_main ul li.图标：之前{
背景：url（“../pic/icons/glyphicons-387-log-in.png”）右上角不重复；
背景尺寸：15px；
浮动：左；
保证金：2x15px 0px 0px；
}
.nav_main ul li.图标：后{
背景：url（“../pic/icons/glyphicons-415-disk-save.png”）不重复左上角；
背景尺寸：15px；
浮动：对；
保证金：2px0px 0px 15px；
}
.nav_main ul li>图像之前，
.nav_main ul li>img.after{
显示：内联块；
保证金：2x15px 0px 0px；
宽度：15px；
高度：自动；
}
.nav_main ul li>安装前{
浮动：左；
保证金：2x15px 0px 0px；
}
.nav_main ul li>img.after{
浮动：对；
保证金：2px0px 0px 15px；
}
李：最后一个孩子{
边界权：无；
盒影：无；
}
.nav_main ul li:悬停{
背景：#444；
显示：内联块；
边际：0px；
填充：10px 35px；
最小宽度：自动；
最小高度：自动；
}
李少光{
右边框：1px实心#222；
盒影：1px0#444；
光标：指针；
文本对齐：居中；
显示：内联块；
flex:0自动；
位置：相对位置；
边际：0px；
填充：10px 35px；
最小宽度：自动；
最小高度：自动；
}
.nav_main ul li>a：悬停{
颜色：#fafafa；
}
.nav_main ul li>a{
字体：粗体12px Arial，Helvetica；
文本转换：大写；
文字装饰：无；
文本阴影：0 1px 0#000；
颜色：#999；
}
.nav_main ul li:悬停>ul{
能见度：可见；
不透明度：1；
保证金：0；
}
/* ******************************************************************************************* */
/*******主导航-1级*************************************************************************************************************/
/* ******************************************************************************************* */
.nav_main ul{
列表样式：无外无；
位置：绝对位置；
背景：#444；
框阴影：0-1px0RGBA（255,255,255,0.3）；
边界半径：3px；
弯曲方向：立柱；
调整项目：灵活启动；
可见性：隐藏；
不透明度：0；
顶部：40px；
左：0；
z指数：5；
过渡：所有0.2秒缓进缓出；
保证金：10px 0px 0px 0px；
填充：0px；
最小宽度：185px；
最小高度：35px；
宽度：自动；
}
李：以前，
海军陆战队：之后{
内容：“；
显示：内联；
}
.nav_main ul li.图标：之前，
.nav_main ul li.图标：后{
显示：内联块；
保证金：4px35px0px0px；
宽度：15px；
高度：15px；
}
.nav_main ul li.图标：之前{
背景：url（“../pic/icons/glyphicons-387-log-in.png”）右上角不重复；
背景尺寸：15px；
浮动：左；
保证金：4px35px0px0px；
}
.nav_main ul li.图标：后{
背景：url（“../pic/icons/glyphicons-415-disk-save.png”）不重复左上角；
背景尺寸：15px；
浮动：对；
保证金：4px0px 0px 35px；
}
.nav_main ul li>图像之前，
.nav_main ul li>img.after{
显示：内联块；
保证金：4px35px0px0px；
宽度：15px；
高度：自动；
}
.nav_main ul li>安装前{
浮动：左；
保证金：4px35px0px0px；
}
.nav_main ul li>img.after{
浮动：对；
保证金：4px0px 0px 35px；
}
.nav_main ul li:悬停{
背景：#444；
背景图像：线性梯度（#04acec，#0186ba）；
背景色：#0186ba；
显示：内联块；
边际：0px；
填充：5px15px；
最小宽度：185px；
最小高度：35px；
}
.nav_main ul li:第一个孩子：悬停{
边界半径：3px 3px 0px 0px；
}
nav_main ul li:最后一个孩子：悬停{
边界半径：0px 0px 3px 3px；
}
李少光{
边界：无；
盒影：无；
文本对齐：左对齐；
显示：内联块；
flex:0自动；
边际：0px；
填充：5px15px；
最小宽度：185px；
最小高度：35px；
}
.nav_main ul li>a:悬停{
颜色：#fafafa；
}
.nav_main ul li>a{
字体：粗体12px Arial，Helvetica；
文本转换：大写；
文字装饰：无；
文本阴影：0 1px 0#000；
颜色：#999；
}
.nav_main ul li:悬停>ul{
能见度：可见；
不透明度：1；
保证金：0；
}