将表格标签格式复制到ul& li标签

时间:2012-02-20 17:35:24

标签: html css

将列表图像和背景图像添加到<li>项目......

CSS代码: -

.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: disc;
font:bold 14px Verdana;
width: 180px; /* Main Menu Item widths */
border: 2px solid skyblue;
}
.sidebarmenu ul li{
position: relative;

}
/* Top level menu links style */
.sidebarmenu ul li a{
display: list-item;
overflow: auto; /*force hasLayout in IE7 */
color: red;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
 background-color: lightblue;/*background of tabs (default state)#012D58*/
}
.sidebarmenu ul li a:visited{
color: black;
}
.sidebarmenu ul li a:hover{
background-color: lightskyblue;
}
/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}
.sidebarmenu a.subfolderstyle{
background: url(images/right.gif) no-repeat 97% 50%;
}

HTML表格: -

<body>
        <div class="sidebarmenu">
<ul id="sidebarmenu1">
    <li><a href="#">Add Location</a>
<ul>
    <li><a href="http://localhost:8084/FBS/add_Flat.jsp">Add Flat</a></li>
    <li><a href="http://localhost:8084/FBS/add_Area.jsp">Add Area</a></li>
    </ul>
</li>
    <li><a href="http://localhost:8084/FBS/logout.jsp">Log Out</a></li>

</ul>
        </div>
         </body>

1 个答案:

答案 0 :(得分:0)

首先......你的桌面结构和你的ul-li结构是不同的:

  • 表格单元格处于同一级别// li级别不同
  • 链接名称不同

我猜你想做的是:

  • 将“images / user_manager.jpg”图片设置为list-style-image
  • 因为我们没有看到图像,也不知道他们看起来像我 相信你想将“images / bg.jpg”图像设置为 {-1}} li-tags

在这样的情况下,屏幕截图或链接会很好。