Tạo menu chính có submenu xuất hiện ở hàng dưới

Bạn down về chạy thử. Việc thêm thắc để có menu đẹp là do chính bạn. Thay đổi thuộc tính của thẻ <a> như hover link...v..v.
<html>
<head>
        <title>... test ...</title>
<style type="text/css">
.glossymenu{
        position: relative;
        padding: 0 0 0 5px;
        margin:0px;
        background:url(image/menu.gif) repeat-x  bottom; /*tab background image path*/
        height: 25px;
        list-style: none;
}

.glossymenu li{
        float:left;
        border-right:#FFFFFF 1px groove;
}

.glossymenu li a{
        float: left;
        display: block;
        color:#FFFFFF;
        text-decoration: none;
        font-family: sans-serif;
        font-size: 13px;
        padding:0 0 0 5px; /*5px = width of menu1*/
        height: 25px;
        line-height: 25px;
        text-align: center;
        cursor: pointer;       
}

.glossymenu li a span{
        float: left;
        display: block;
        padding: 0 10px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
        color:#000000;
        background: url(image/menu1.gif) no-repeat  bottom; /*left tab image path*/
        background-position: left;
}

.glossymenu li.current a span, .glossymenu li a:hover span{
        color:#000000;
        background: url(image/menu2.gif) no-repeat right bottom; /*right tab image path*/
}
a { text-decoration:none;}
a:hover {color:#FF9900;}
</style>
<script language="javascript">
var menu_2 = new Array()
menu_2[0] = '<a href="#">Sup menu demo 1</a>'
menu_2[1] = '<a href="#">Sup menu demo 2</a>'
menu_2[2] = '<a href="#">Sup menu demo 3</a>'
menu_2[3] = '<a href="#">Sup menu demo 4</a>'

var menu_3 = new Array()
menu_3[0] = '<a href="#">Sup menu demo 5</a>'
menu_3[1] = '<a href="#">Sup menu demo 6</a>'
menu_3[2] = '<a href="#">Sup menu demo 7</a>'
        function show(id)
        {
                var men="menu"+id;
                document.getElementById(men).style.display='block';
               
        }
        function hiden(id)
        {
                var men="menu"+id;
                document.getElementById(men).style.display='none';
        }
</script>
<head>
<body bgcolor="#CCCCCC">
<div style="width:600px;">
<ul class="glossymenu">
  <li><a href="#" onMouseOver="show(1)" onMouseOut="hiden(1)" ><span>Trang Nhất</span></a></li>
  <li><a href="#" onMouseOver="show(2)" onMouseOut="hiden(2)"><span>Xã hội</span></a></li>
  <li><a href="#" onMouseOver="show(3)" onMouseOut="hiden(3)"><span>Thế giới</span></a></li>
  <li><a href="#" onMouseOver="show(4)" onMouseOut="hiden(4)"><span>Kinh Doanh</span></a></li>
  <li><a href="#" onMouseOver="show(5)" onMouseOut="hiden(5)"><span>Văn hóa</span></a></li>
  <li><a href="#" onMouseOver="show(6)" onMouseOut="hiden(6)"><span>Thể Thao</span></a></li>
</ul>
</div>
<div style="background:#d0d8e0; width:600px; height:20px;" >
        <div id="menu1" style="display:none;" onMouseOver="show(1)" onMouseOut="hiden(1)">
                <a href="#"> Link demo 1.1</a>
                <a href="#"> Link demo 1.2</a>
                <a href="#"> Link demo 1.3</a>
                <a href="#"> Link demo 1.4</a>
        </div>
        <div id="menu2" style="display:none;" onMouseOver="show(2)" onMouseOut="hiden(2)">
                <a href="#"> Link demo 2.1</a>
                <a href="#"> Link demo 2.2</a>
                <a href="#"> Link demo 2.3</a>
                <a href="#"> Link demo 2.4</a>
        </div>
        <div id="menu3" style="display:none;" onMouseOver="show(3)" onMouseOut="hiden(3)">
                <a href="#"> Link demo 3.1</a>
                <a href="#"> Link demo 3.2</a>
                <a href="#"> Link demo 3.3</a>
                <a href="#"> Link demo 3.4</a>
        </div>
        <div id="menu4" style="display:none;" onMouseOver="show(4)" onMouseOut="hiden(4)">
                <a href="#"> Link demo 4.1</a>
                <a href="#"> Link demo 4.2</a>
                <a href="#"> Link demo 4.3</a>
                <a href="#"> Link demo 4.4</a>
        </div>
        <div id="menu5" style="display:none;" onMouseOver="show(5)" onMouseOut="hiden(5)">
                <a href="#"> Link demo 5.1</a>
                <a href="#"> Link demo 5.2</a>
                <a href="#"> Link demo 5.3</a>
                <a href="#"> Link demo 5.4</a>
        </div>
        <div id="menu6" style="display:none;" onMouseOver="show(6)" onMouseOut="hiden(6)">
                <a href="#"> Link demo 6.1</a>
                <a href="#"> Link demo 6.2</a>
                <a href="#"> Link demo 6.3</a>
                <a href="#"> Link demo 6.4</a>
        </div>
</div>
</body>
</html>

Nhận xét

Bài đăng phổ biến từ blog này

Ký tự viết tắt trong chat & email

dung lượng RAM lớn nhất mà HĐH cấu trúc 32-bit nhận được

Ubuntu LAMP Server