menu代码

最新推荐文章于 2024-10-04 06:11:34 发布

viphahaha

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量201

点赞数

文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/viphahaha/article/details/84301056

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>13styles.com - Style #5</title>
<script language="javascript" type="text/javascript">
    function Show(idx) {
        var subName = 'submenu' + idx;
        document.getElementById(subName).style.display = 'Block';
    }
    function Hide() {
        document.getElementById('submenu1').style.display = 'None';
        document.getElementById('submenu2').style.display = 'None';
    }
	function showInit() {
		document.getElementById('submenu1').style.display = 'Block';
		document.getElementById('submenu2').style.display = 'none';
	}
</script>
<style type="text/css">
.menu{
    width:500px;
    display:block;
    height:0px;
    margin:0 auto;
}
    .menu ul li a:hover {
      background:red;
      color:black;
    }
    .menu ul li ul li a {
      background:gray;
      color:#fff;
    }
    .menu ul li ul li a:hover {
      background:green;
      color:black;
    }
.menu ul{
    margin:0px auto;
    padding:0;
    list-style-type:none;
    width:auto;
}
.menu a {
    display:block;
    width:100px;
    line-height:32px;
    background:black;
    color:#ff8040;
    text-decoration:none;
}
.menu ul li a.bg1 {
    background:white;
}
.menu ul li a.bg2 {
    background:yellow;
}
.menu ul li{
    float:left;
}
.menu ul ul{
	visibility:hidden;
    position:absolute;
}
    /*??????????*/
    .menu ul li:hover ul.second{/* fei IE6*/
      visibility:visible;
    }
.menu ul ul li {
   clear:both;
   text-align:center;
}
</style>
</head>

<body οnlοad="showInit();">
<div align="center">
<table width="760px" align="center">
<tr>
<div class="menu">
    <ul>
        <li οnclick="Hide();Show(1);"><a href="#" title="" style="background:white">Menu1</a></li>
        <li οnclick="Hide();Show(2);"style="background:yellow"><a href="#" title="" style="background:yellow">Menu2</li>
        <li><a href="" title="" style="background:blue">Menu3</li>
        <li><a href="" title="" style="background:green">Menu4</li>
        <li><a href="" title="" style="background:pink">Menu5</li>
    </ul>
</div></tr>
<tr>
<div class="menu">
    <ul id="submenu1">
        <li><a href="" title="" class="bg1">Menu1sub1
            <ul class="second">
                <li><a href="" title="">sub1sub1</li>
                <li><a href="" title="">sub1sub2</li>
                <li><a href="" title="">sub1sub3</li>
            </ul>
        </li>
        <li><a href="" title="" class="bg1">Menu1sub2
            <ul class="second">
                <li><a href="" title="">sub2sub1</li>
                <li><a href="" title="">sub2sub2</li>
                <li><a href="" title="">sub2sub3</li>
            </ul>
        </li>
        <li><a href="" title="" class="bg1">Menu1sub3</li>
        <li><a href="" title="" class="bg1">Menu1sub4</li>
        <li><a href="" title="" class="bg1">Menu1sub5</li>
    </ul>
    <ul id="submenu2">
        <li><a href="" title="" class="bg2">Menu2sub1
            <ul class="second">
                <li><a href="" title="">sub21sub1</li>
                <li><a href="" title="">sub21sub2</li>
                <li><a href="" title="">sub212sub3</li>
            </ul>
        </li>
        <li><a href="" title="" class="bg2">Menu2sub2
            <ul class="second">
                <li><a href="" title="">sub22sub1</li>
                <li><a href="" title="">sub22sub2</li>
                <li><a href="" title="">sub22sub3</li>
            </ul>
        </li>
        <li><a href="" title="" class="bg2">Menu2sub3</li>
        <li><a href="" title="" class="bg2">Menu2sub4</li>
        <li><a href="" title="" class="bg2">Menu2sub5</li>
    </ul>

</div>
</tr>
</table>
</body>
</html>