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

Đăng nhận xét

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

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

Hình ảnh
dung lượng RAM lớn nhất mà HĐH cấu trúc 32-bit nhận được 1Gb =1024MB 1Mb=1024Kb 1Kb=1024byte 1byte=8bit Như vậy 1Gb ram sẽ có chứa số bit là 2^10 x 2^10 x 2^10 x 2^3 = 2^33 bit. 4Gb ram sẽ là 2^2 x 2^33 = 2^35 bit. Vậy với 4Gb ram sẽ có 2^35 địa chỉ ô nhớ . Trong khi đó win 32 bit chỉ hỗ trợ max là 2^32 bit địa chỉ ô nhớ. Chính vì sự chênh lệch này mà nó sẽ ko thể nhận đủ 4Gb ram khi hoat động. Win 64bit thì support vô tư vì nó có thể xử lí được đến 2^64 địa chỉ ô nhớ Due to fallout from a recent computer catastrophe at work, I had the opportunity to salvage 2 GB of memory. I installed the memory in my work box, which brings it up to 4 gigabytes of RAM-- 4,096 megabytes in total. But that's not what I saw in System Information: Only 3,454 megabytes. Dude, where's my 4 gigabytes of RAM? The screenshot itself provides a fairly obvious hint why this is happening: 32-bit Operating System . In any 32-bit operating system, the virtual address space is limited, by definiti...
Đọc thêm

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

AAK Alive And Kicking AAR At Any Rate AAS Alive And Smiling ADN Any Day Now AFAIK As Far As I Know AFK Away From the Keyboard AFN that's All For Now AOTA All Of The Above a/s/l or asl Age/Sex/Location - (used to ask a chatter their personal information) AV Avatar - Graphical representation (a picture) often used in chat rooms to depict a person that is in the room and chatting. b4 Before BAK Back At Keyboard (I'm back) BBL Be Back Later BBS Be Back Soon BCNU I'll Be Seeing You. b/f Boyfriend (also shown as bf, B/F, or BF) BEG Big Evil Grin BFN Bye For Now BMA Bite My A** (became popular with the Simpson's cartoon show) boot To get kicked out of a chat room, or have to restart the computer because you couldn't talk in the chat room anymore. BR Best Regards BRB Be Right Back BRH Be Right Here BSEG Big S**t Eatin Grin BTA But Then Again.... BTW By The Way btw BeTWeen you and me ... chat room A web page where peopl...
Đọc thêm

Ubuntu LAMP Server

Get this content from link http://www.zaphu.com/2007/08/07/ubuntu-lamp-server-setup-guide-with-desktop-gui/ Step 1: Install Ubuntu Server Edition with LAMP server components. Download the disk image (*iso) for Ubuntu Server Edition (currently version 8.04 Hardy Heron) and burn it to a CD. Ensure that your BIOS is configured to boot from the CD-ROM drive. Restart with the Ubuntu disk in the drive and the machine should boot into the Ubuntu installation shell. If you would like to configure a static IP address, select F6 - Other Options and enter netcfg/disable_dhcp=true at the end of the options string, and the install script will prompt you for network information during the installation. Otherwise, the static IP must be configured post installation as per the second part of step 2 below, and your network will be automatically configured using DHCP (as long as DHCP is enabled on your router). In either scenario, you must enter a hostname when prompted. As you work through the installat...
Đọc thêm