我想知道你们中的任何一个人是否能够并愿意帮助一个新手? :d
我处于非常早期的阶段,正致力于创建导航栏div:
<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>
与此相关的CSS如下:
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;
}
我对此代码的意图是能够将鼠标悬停在其中一个菜单项(在初始标签中)以显示子菜单项(在嵌入式标签中),以便它们垂直排列。但是,它们尚未按预期排列。
目前,下拉菜单(在ul lover上)显示在“关于”部分的右侧。我想知道这个问题的适当解决办法是什么(让下拉列表垂直排列'关于'部分。)
答案 0 :(得分:1)
试试这个。
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;
position:relative;
}
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{
display: none;
position: absolute;
right: 0;
top: 100%;
z-index: 1;
}
ul li:hover ul{
display:block;
}
ul li 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;
}
<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" alt="" />
</ul>
</div>