二级标签li如何以一级标签li的右侧对齐向左侧浮动？

TP_TP 2019-02-17 04:56:27

如图，因二级菜单想要横向排列，所以当视图区域不够时，想要让二级菜单从一级菜单右侧的位置开始横向向左浮动？

...全文

424 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

TP_TP 2019-03-12

打赏
举报

谢啦“麦草CMS”

麦草CMS 2019-02-18

打赏
举报

其他的不变，加上这句

麦草CMS 2019-02-18

打赏
举报

.erjicaidan2{
float: right !important;
display: inline-block;
}

TP_TP 2019-02-18

打赏
举报

@charset "utf-8";
/* CSS Document */
body {
font: 100%;
margin: 0;
padding: 0;
}
header,
nav {
display: block;
background: #1200FF;
}
.logo {
width: 4em;
height: 3em;
margin: 0.6em 0.5em 0.5em 0.5em;
}
ul {
overflow: auto;
margin: 0;
padding: 0;
list-style: none;
display: block;
}
li {
float: left;
}
.yijicaidan {
margin-left: 3em;
margin-top: 0.3em;
padding: 0.2em;
width: 5em;
}
.erjicaidan1,
.erjicaidan2 {
margin-top: 0.3em;
}
a {
display: block;
color: #fff;
font-weight: bold;
text-decoration: none;
}
.yijidaohang .erjidaohang {
left: -999em;
position: absolute;
z-index: 1000;
}
.yijidaohang li:hover .erjidaohang {
display: block;
left: auto;
width: 20em;
}
.yemian {
margin: 1em 0 1em 0;
width: 75%;
height: 28.5em;
background: rgba(239,230,0,1.00);
}
.cebianlan {
margin: 1em 0 1em 0;
width: 25%;
height: 28.5em;
background: rgba(219,26,29,1.00);
}
footer {
padding: 0;
background: #1200FF;
width: 100%;
height: 3em;
clear: left;
}
p {
text-align: center;
padding-top: 0.8em;
color: #eee;
font-weight: bold;
}
div {
float: left;
}

TP_TP 2019-02-18

打赏
举报

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>V&U管理系统</title>
<link rel="stylesheet" href="css/yangshi.css">
</head>

<body>
<header>
<nav>
<ul class="yijidaohang">
<li><img src="image/V&U1.jpg" alt="LOGO" class="logo"></li>
<li class="yijicaidan"><a href="">购进货物</a>
<ul class="erjidaohang">
<li class="erjicaidan1"><a href="">单笔购进</a></li>
<li class="erjicaidan1"><a href="">批量购进</a></li>
<li class="erjicaidan1"><a href="">购进调整</a></li>
</ul>
</li>
<li class="yijicaidan"><a href="">销售货物</a>
<ul class="erjidaohang">
<li class="erjicaidan1"><a href="">单笔销售</a></li>
<li class="erjicaidan1"><a href="">批量销售</a></li>
<li class="erjicaidan1"><a href="">销售调整</a></li>
</ul>
</li>
<li class="yijicaidan"><a href="">库存货物</a>
<ul class="erjidaohang">
<li class="erjicaidan1"><a href="">综合库存</a></li>
<li class="erjicaidan1"><a href="">分类库存</a></li>
<li class="erjicaidan1"><a href="">盘盈盘亏</a></li>
</ul>
</li>
<li class="yijicaidan"><a href="">会员管理</a>
<ul class="erjidaohang">
<li class="erjicaidan1"><a href="">新增会员</a></li>
<li class="erjicaidan1"><a href="">编辑会员</a></li>
</ul>
</li>
<li class="yijicaidan"><a href="">财务报表</a>
<ul class="erjidaohang">
<li class="erjicaidan1"><a href="">综合报表</a></li>
<li class="erjicaidan1"><a href="">分类报表</a></li>
</ul>
</li>
<li class="yijicaidan"><a href="">软件设置</a>
<ul class="erjidaohang">
<li class="erjicaidan2"><a href="">店铺设置</a></li>
<li class="erjicaidan2"><a href="">员工设置</a></li>
<li class="erjicaidan2"><a href="">商品设置</a></li>
<li class="erjicaidan2"><a href="">会员设置</a></li>
</ul>
</li>
<li class="yijicaidan"><a href="">个人中心</a>
<ul class="erjidaohang">
<li class="erjicaidan2"><a href="">结账交接</a></li>
<li class="erjicaidan2"><a href="">注销登出</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<div class="yemian">

</div>
<div class="cebianlan">

</div>
<footer>
<p>
XXX网络科技有限公司联系电话XXX
</p>
</footer>
</body>
</html>

TP_TP 2019-02-18