菜单思路一：
运用<ul><li>的反复使用，使之为引子，用到CSS的编辑中，运用:hover实现鼠标经过时的美观
其中关键的两个设置为：float:left; 它使得横向排列，形成横向菜单，默认是竖向的
另一个为list-style-type: none; 它使得列表前的黑点消失
例子：
.menu {
font-family: arial, sans-serif;
width:860px;
margin:0;
}
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
.menu ul li {
float:left;
position:relative;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-align:center;
text-decoration:none;
width:285px;
height:30px;
color:#000;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#C5B7F2;
line-height:30px;
font-size:12px;
}
.menu ul li a {
display:block;
background:#faeec7;
color:#000;
}
.menu ul li a:hover {
background:#dfc184;
color:#000;
}
<div class="menu" align="center"><ul>
<li><a class="hide" href="../menu/index.html">DEMOS1</a></li>
<li><a class="hide" href="../menu/index.html">DEMOS2</a></li>
<li><a class="hide" href="../menu/index.html">DEMOS3</a></li>
</ul></div>
菜单思路二：
运用脚本，引入一个变量，该变量标示着哪个菜单。然后采用两套CSS；
例子：
第一套CSS：没有鼠标作用的时候：
.dis{
display:block;
}
#NewsTop P.topC0 {
cursor:pointer;
background:#faeec7;
color:#000;
width:40px;
border-left: #f2f2f2 1px solid;
}
第二套：有鼠标作用的时候：
.undis{
display:none;
}
#NewsTop P.topC1 {
background:#dfc184;
color:#000;
border-left:#f2f2f2 1px solid;
width:40px;
color:#33FF33;
}
<div id="NewsTop">
<div id="NewsTop_tit">
<p class="topC0">m1</p>
<p class="topC0">m2</p>
<p class="topC0">m3</p>
</div>
<div id="NewsTop_cnt">
<span>。。。</span>
<span>。。。</span>
<span>。。。</span>
</div>
<script type="text/javascript">
var Tags=document.getElementById('NewsTop_tit').getElementsByTagName('p');
var TagsCnt=document.getElementById('NewsTop_cnt').getElementsByTagName('span');
var len=Tags.length;
var flag=0;
for(i=0;i<len;i++){
Tags[i].value = i;
Tags[i].onmousedown=function(){changeNav(this.value)};
TagsCnt[i].className='undis';
}
Tags[flag].className='topC1';
TagsCnt[flag].className='dis';
function changeNav(v){
Tags[flag].className='topC0';
TagsCnt[flag].className='undis';
flag=v;
Tags[v].className='topC1';
TagsCnt[v].className='dis';
}
</script>
</div>
</div>
