我想知道你们中是否有任何优秀的人能够并愿意帮助新手? :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:UsersCharlieCreative Cloud FilesLogo_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 li 悬停时)显示在"关于"部分的右侧。我想知道解决此类问题的适当方法是什么(使下拉列表与"关于"部分垂直对齐)。
试试这个。
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:UsersCharlieCreative Cloud FilesLogo_v4_(pink_background_no_border_no_text).png" height=40px, width=auto, align="right" alt="" />
</ul>
</div>