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

Tổng quan về overclock

A) CPU SPEED = CPU FREQ X CPU MULTI B) HTT SPEED = CPU FREQ X HT MULTI NOTE: Remember that the HT Bus (AMD systems only) is equivalent to the Bus Speed in Intel systems. Substitute the terms if using an AMD setup.The name 'HT Frequency ratio' should hint that this multiplier is the 'HT Multiplier'. C) RAM DDR2 SPEED = RAM DDR SPEED x 2 D) RAM DDR SPEED = (CPU SPEED / RAM DIVISOR ) x2 E) RAM DIVISOR = CPU MULTI / RAM DIVIDER RATIO F) RAM DIVIDER RATIO = RAM ACTUAL SPEED : CHIPSET HT BUS SPEED G) RAM ACTUAL SPEED = (DDR2 SPEED / 2) / 2 H) CHIPSET HT BUS SPEED = NOMINAL MOBO CHIPSET HT SPEED / NOMINAL HT MULTI AMD systems use a HT Link (also known as a LDT Bus) . CPU - AMD x2 6000+ CPU Freq: 200Mhz - CPU Multiplier: x15 CPU Speed: 3000Mhz Motherboard - M2N32SLI - Chipset HT Bus Speed: 1000Mhz - HT Multiplier: x5 RAM - DDR2-800 - DDR2 speed: 800Mhz Intel CPU Clock Speed = Multiplier x FSB (also known as Bus Speed) DDR RAM Clock Speed (on 1:1 ratio) = 2 x FSB (also known as...
Đọc thêm

Intel Core 2 Duo E4300 Review and Overclocking Analysis

What settings did I use to reach 3.6Ghz with the E4300? * non-standard chilled water cooler with water at 4'C * Corsair TWIN2X2048 PC8888 memory * 400MHz FSB * 9x multiplier * 1000MHz memory * 1.65V core voltage * 2.4V memory voltage * 1.55V northbridge voltage * 1.5V southbridge voltage * 1.215V ich voltage * 4-4-4-12 memory timing But what is truly impressive is that the chip was stable at stock voltages at 3.2GHz (400x8) with the stock cooler! It was also stable at 3.42GHz with a Noctua at 1.575Vcore.
Đọc thêm

About DDR Dual Channel and RAM Timings

Dual Channel Memory can help improve the RAM speed, because this technique doubles it. In order to use Dual Channel Memory, your motherboard has to be capable of supporting this technique and you will also need two equal memory modules. We'll explain this further, but first let's understand deeper the bottleneck problem. Understanding RAM Timings DDR and DDR2 memories follow the DDRxxx/PCyyyy classification. The first number, xxx, indicates the maximum clock speed that the memory chips support. For instance, DDR400 memories work at 400 MHz at the most, and DDR2-667 can work up to 667 MHz. It is important to notice that this is not the real clock speed of the memory: the real clock of the DDR and DDR2 memories is half the labeled clock speed. This way, in fact, DDR400 memories work at 200 MHz and DDR2-667 memories work at 333 MHz. The second number indicates the maximum transfer rate that the memory reaches, in MB/s. DDR400 memories transfer data at 3,200 MB/s at the most, hence...
Đọc thêm