这是我的代码,我想要做的是我必须将图像放在垂直导航栏的旁边,而不会打扰列表的顺序。我尝试了很多次,但我没有成功,这是我的代码 HTML部分
<ul class="navbar">
<li><a href="#">» Computers</a>
</li>
<li><a href="#">» Storage Media</a></li>
<li><a href="#" >» Networking Solutions</a></li>
<li><a href="#/">» Security Solutions</a></li>
<li><a href="#">» Office Automations</a></li>
<li><a href="#">» Gadgets</a></li>
<li><a href="#">» Projectors and Display Screens</a></li>
<li><a href="#">» Softwares</a></li>
<li class="lastitem"><a href="#">» Customized Solutions</a></li>
</ul>
CSS PART(仅描述列表的行为)
.navbar{
list-style-type: none;
margin: 0;
padding: 10 0px;
width: 280px; /* width of menu */
position:absolute;
}
.navbar li{
border-bottom: 1px solid white; /* white border beneath each menu item */
}
.navbar li a{
background: #333 url(media/sexypanelright.gif) no-repeat right top; /*color of menu by default*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0; /* Vertical (top/bottom) padding for each menu link */
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black;
}
.navbar li a:visited, .navbar li a:active{
color: white;
}
.navbar li a:hover{
background-color: black; /*color of menu onMouseover*/
color: white;
border-bottom: 1px solid black;
}
.navbar ul li:hover{
background-color: black;
color: #ff0066;
display:block;
width:200px;
height:200px;
opacity:0.75;
}
.navbar ul li:hover{
padding:5px;
margin:0px;
background-color:#666666;
border-width:1px;
border-style:solid;
border-color:#333333;
}
答案 0 :(得分:1)
.navbar li {
border-bottom: 1px solid white;
margin-left: 40%;
}
.navbar {
list-style-type: none;
margin: 0px;
width: 100%;
position: absolute;
}
答案 1 :(得分:0)