HTML-块未按预期显示(嵌入列表)
我想知道你们这些优秀的人是否能够并且愿意帮助一个新手D 我处于非常早期的阶段,正在创建导航栏div:HTML-块未按预期显示(嵌入列表),html,css,Html,Css,我想知道你们这些优秀的人是否能够并且愿意帮助一个新手D 我处于非常早期的阶段,正在创建导航栏div: <div class="NavBar"> <ul> <li><a class="active" href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Portfo
<div class="NavBar">
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Test Item 1</a></li>
<li><a href="#">Test Item 2</a></li>
<li><a href="#">Test Item 3</a></li>
</ul></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Process</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
<img src="C:\Users\Charlie\Creative Cloud Files\Logo_v4_(pink_background_no_border_no_text).png" height=40px, width=auto, align="right">
</div>
我使用这段代码的目的是能够将鼠标悬停在其中一个菜单项上(在初始标记中),以便显示子菜单项(在嵌入的标记中),以便它们垂直排列。然而,到目前为止,它们还没有按预期排列
此时,下拉列表(在ul li悬停上)显示在“关于”部分的右侧。我想知道解决这个问题的合适方法是什么(让下拉列表与“关于”部分垂直对齐)。试试这个
正文{
字体系列:Arial;
背景色:#D3;
}
保险商实验室{
列表样式:无;
保证金:0;
填充;0;
}
ulli{
浮动:左;
宽度:100px;
高度:40px;
线高:40px;
文本对齐:居中;
背景色:#ED1E79;
位置:相对位置;
}
ullia{
文字装饰:无;
颜色:白色;
显示:块;
}
悬停{
背景色:白色;
颜色:#ED1E79;
字体大小:粗体;
}
ul li ul{
显示:无;
位置:绝对位置;
右:0;
最高:100%;
z指数:1;
}
ul-li:悬停ul{
显示:块;
}
ulli ulli{
垂直对齐:顶部;
浮动:左;
显示:块;
边际:0px;
边际上限:0px;
填充:0px;
文字装饰:无;
}
ul li:悬停ul li:悬停{
背景色:白色;
颜色:#ED1E79;
字体大小:粗体;
}
.头衔{
颜色:#ED1E79;
}
NavBar先生{
背景色:#ED1E79;
高度:40px;
宽度:75%;
}
.主动{
背景色:#9e005d;
颜色:白色;
字体大小:粗体;
}
-
虽然这不是我应该做的(我不建议使用float进行定位。我传统上使用“display:inline block”,但现在flexbox是最好的解决方案),但只要将子菜单项的“float:left;”更改为“float:right;”就足以让它按您的需要工作。
body {
font-family: Arial;
background-color: #D3D3D3;
}
ul {
list-style: none;
margin: 0;
padding; 0;
}
ul li {
float: left;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #ED1E79;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: white;
color: #ED1E79;
font-weight: bold;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
vertical-align: top;
float:left;
display: block;
margin: 0px;
margin-top: 0px;
padding: 0px;
text-decoration: none;
}
ul li:hover ul li:hover {
background-color: white;
color: #ED1E79;
font-weight: bold;
}
.title {
color: #ED1E79;
}
.NavBar {
background-color: #ED1E79;
height:40px;
width:75%;
}
.active {
background-color: #9e005d;
color: white;
font-weight: bold;
}