我正在为我的一个家庭项目创建自定义侧面导航，最近我被告知，我应该使用单个<nav>而不是使用多个<nav>标记，而不是使用多个.css标记。在里面。然而，这导致复制我设置的侧导航工作方式
以下nav {
display: block;
color: black;
padding: 10px;
text-transform: uppercase;
right: 0px;
position: fixed;
z-index: 3000;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
-webkit-transition: all 250ms ease-out !important;
-moz-transition: all 250ms ease-out !important;
transition: all 250ms ease-out !important;
border: 1mm;
border-color: #CCCCFF;
border-left-style: solid;
}
#topnav:hover,
#nav2:hover,
#nav3:hover,
#nav4:hover,
#nav5:hover,
#nav6:hover,
#botnav:hover {
z-index: 5000;
width: 3cm;
background-color: black;
border-style: solid;
border-right-style: none;
color: white;
-webkit-border-top-left-radius: 4mm;
-moz-border-radius-topleft: 4mm;
border-top-left-radius: 4mm;
-webkit-border-bottom-left-radius: 4mm;
-moz-border-radius-bottomleft: 4mm;
border-bottom-left-radius: 4mm;
}
nav:hover span {
display: none;
}
#topnav {
top: 100px;
background-color: white;
border-top-style: solid;
-webkit-border-top-left-radius: 4mm;
-moz-border-radius-topleft: 4mm;
border-top-left-radius: 4mm;
}
#topnav:hover:before {
content: "Top";
}
#nav2 {
top: 140px;
background-color: red;
}
#nav2:hover:before {
content: "Red";
}
#nav3 {
top: 180px;
background-color: blue;
}
#nav3:hover:before {
content: "blue";
}
#nav4 {
top: 220px;
background-color: green;
}
#nav4:hover:before {
content: "green";
}
#nav5 {
top: 260px;
background-color: purple;
}
#nav5:hover:before {
content: "purple";
}
#nav6 {
top: 300px;
background-color: orange;
}
#nav6:hover:before {
content: "orange";
}
#botnav {
top: 340px;
background-color: white;
border-bottom-style: solid;
-webkit-border-bottom-left-radius: 4mm;
-moz-border-radius-bottomleft: 4mm;
border-bottom-left-radius: 4mm;
}
#botnav:hover:before {
content: "200";
}
是生成侧面导航格式的代码
<li>可以在JSFiddle
上看到这一点在编辑我的代码时，当您将鼠标悬停在列表项上时，我遇到了问题。当<nav>项扩展时，它也会扩展<ul>和<li>。这不是我打算做的。我打算只扩展.sidenav {
display: block;
color: black;
text-transform: uppercase;
right: 0px;
top: 10%;
position: fixed;
z-index: 3000;
text-align: center;
border: 1mm;
border-color: #CCCCFF;
border-style: solid;
border-right-style: none;
-webkit-border-bottom-left-radius: 4mm;
-moz-border-radius-bottomleft: 4mm;
border-bottom-left-radius: 4mm;
-webkit-border-top-left-radius: 4mm;
-moz-border-radius-topleft: 4mm;
border-top-left-radius: 4mm;
}
.sidenav ul {
list-style-type: none;
}
.sidenav li {
padding: 10px;
width: 20px;
height: 20px;
line-height: 20px;
-webkit-transition: all 250ms ease-out !important;
-moz-transition: all 250ms ease-out !important;
transition: all 250ms ease-out !important;
}
.sidenav li:hover {
width: 3cm;
background-color: white;
}
项目。
text-align: right这可以在JSFiddle中找到。
我认为可以通过设置text-align然后更改正在悬停的<li>项目的<li>来掩盖这种情况，只有当它悬停在其上时才会被掩盖。然而，这意味着整个边框移出而不是只有<li>项目周围的边框，而<nav>
<ul>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ul>
</nav>
项目的背景颜色也延伸出来而不仅仅是被盘旋。
问题
基本上我的问题是如何编辑我的css以便导航栏的结构类似
<li>的行为与我在第一个JSFiddle中显示的第一个结构的行为方式相同吗？如何在不影响整个<ul>或<nav>的情况下操作单个{{1}}代码？
答案 0 :(得分：2)
因此，当sidenav元素执行时，li正在扩展的原因是因为在该父元素上没有明确的宽度。所以它默认为width: auto。因此，当li元素扩展时，父元素也会扩展。我有一个解决方案工作，近似你原来的例子。
以下是更新后的fiddle。
我只做了一些小的更新才能让它运转起来。他们在这里：
.sidenav {
width: 40px;
}
.sidenav li {
position: relative;
right: 0;
}
.sidenav li:hover {
right: 200%;
}
注意，除了已经存在的内容之外，还添加了这些样式，没有删除任何内容。希望这至少可以帮助您通过这个新解决方案走上正确的道路！