你可以 去网站找一下 CSS 导航菜单代码……然后借鉴代码 弄出你的产品……
假如你熟悉 Flash的话，个人建议直接用 Flash 直接实现了你的功能……
各个点，变为按钮素材， 第二帧 在按钮那儿加个 文本框就OK 了……
用 CSS 弄 还是麻烦些……
给你一段借鉴代码，你自己琢磨：
<style type="text/css">
body {
margin:0
padding:0
font: bold 11px/1.5em Verdana
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif
color: #000
margin: 0px
padding: 0px 0px 0px 15px
}
img {
border: none
}
/*- Menu Tabs 1--------------------------- */
#tabs1 {
float:left
width:100%
background:#F4F7FB
font-size:93%
line-height:normal
border-bottom:1px solid #BCD2E6
}
#tabs1 ul {
margin:0
padding:10px 10px 0 50px
list-style:none
}
#tabs1 li {
display:inline
margin:0
padding:0
}
#tabs1 a {
float:left
background:url("images/tableft1.gif") no-repeat left top
margin:0
padding:0 0 0 4px
text-decoration:none
}
#tabs1 a span {
float:left
display:block
background:url("images/tabright1.gif") no-repeat right top
padding:5px 15px 4px 6px
color:#627EB7
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs1 a span {float:none}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#627EB7
}
#tabs1 a:hover {
background-position:0% -42px
}
#tabs1 a:hover span {
background-position:100% -42px
}
</style>
</head>
<body>
<div id="tabs1">
<ul>
<li><a href="#" title="鼠标移到此位置，显示此文字"><span>Link 1</span></a></li>
<li><a href="#" title="希望对你有用，呵呵……"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6"><span>Link 6</span></a></li>
<li><a href="#" title="Link 7"><span>Link 7</span></a></li>
</ul>
</div>
</body>
方法一：1.引入css和jscss: 在html的head标签内添加
<link rel="stylesheet" type="text/css" href="你下载的css文件路径" />
js: <script type="text/javascript" src="你下载的js文件路径"></script>
2.在html页面中添加房子该内容的div，添加id与js和css中的id对应
方法二：
你下载的文件里面应该是有html文件的吧
你在你的页面里面直接引入他的html页面，至于引入的方式有用js 有用框架的
