网络编程

首页 > 网络编程 > 浏览文章

一个新的CSS菜单代码

(编辑：jimmy 日期: 2024/12/25 浏览：3 次 )

<html>
<head>

<style>
body {
  font-family: verdana, helvetica, arial, sans-serif;
}
#mainMenu {
  background-color: #EEE;
  border: 1px solid #CCC;
  color: #000;
  width: 203px;
}
#menuList {
  margin: 0px;
  padding: 10px 0px 10px 15px;
}
li.menubar {
  background: url(/images/plus.gif) no-repeat 0em 0.3em;
  font-size: 12px;
  line-height: 1.5em;
  list-style: none outside;
}
.menu, .submenu {
  display: none;
  margin-left: 15px;
  padding: 0px;
}
.menu li, .submenu li {
  background: url(/images/square.gif) no-repeat 0em 0.3em;
  list-style: none outside;
}
a.actuator {
  background-color: transparent;
  color: #000;
  font-size: 12px;
  padding-left: 15px;
  text-decoration: none;
}
a.actuator:hover {
  text-decoration: underline;
}
.menu li a, .submenu li a {
  background-color: transparent;
  color: #000;
  font-size: 12px;
  padding-left: 15px;
  text-decoration: none;
}
.menu li a:hover, submenu li a:hover {
  /*border-bottom: 1px dashed #000;*/
  text-decoration: underline;
}
span.key {
  text-decoration: underline;
}
</style>
</head>
<body>

<ul id="menuList">
        <li>
          Phones
          <ul id="productsMenu" class="menu">
            <li>
              New Phones
              <ul id="newPhonesMenu" class="submenu">
                <li>9290</li>
                <li>8390</li>
                <li>8290</li>
                <li>8270</li>
              </ul>
            </li>
            <li>
              Compare
              <ul id="compareMenu" class="submenu">
                <li>All Phones</li>
                <li>Service Provider</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    
  </body>
</html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：客齐集OEM的CSS解析与开发经验
下一篇：创建无表格网站的原因和原则译文

友情链接:杰晶网络 DDR爱好者之家南强小屋黑松山资源网白云城资源网站点地图 SiteMap

Copyright © 2006~2024 白云城资源网 All Rights Reserved.

Design by m.dyhadc.com