网页开发-练习二 下拉及多级弹出式菜单

实现如图效果网页开发-练习二 下拉及多级弹出式菜单_第1张图片
html代码:

<html>
    <head>
        <title>divtitle>
        <link rel = "stylesheet" type="text/css" href = "layout.css">
    head>
    <body>
        <ul id="nav">
            <li><a href="">文章a>
                <ul id="nav2">
                    <li><a href="">CSS教程a>li>
                    <li><a href="">DOM教程a>li>
                    <li><a href="">XML教程a>li>
                    <li><a href="">Flash教程a>li>
                ul>
            li>
            <li><a href="">参考a>
                <ul id="nav2">
                    <li><a href="">XHTMLa>li>
                    <li><a href="">XMLa>li>
                    <li><a href="">CSSa>li>
                ul>
            li>
            <li><a href="">Bloga>
                <ul id="nav2">
                    <li><a href="">全部a>li>
                    <li><a href="">网页技术a>li>
                    <li><a href="">UI技术a>li>
                    <li><a href="">Flash技术a>li>
                ul>
            li>
            <li><a href="">娱乐a>
                <ul id="nav2">
                    <li><a href="">摇滚a>li>
                    <li><a href="">纯音乐a>li>
                    <li><a href="">古典金曲a>li>
                    <li><a href="">电影原声a>li>
                ul>
            li>
        ul>
    body>
html>

layout.css:

ul {
    padding:0;
    margin:0;
    list-style:none;
}
li{
    float:left;
    width:160px;
    text-align:center;
}
li ul{
    display:none;
    top:20px;
}
li:hover ul, li.over ul {
    display:block;
}
#nav li a{
    display:block;
    font-size:20px;
    border:1px solid #ccc;
    padding:3px;
    text-decoration:blink;
    color:#777;

}
ul li a:hover {
    background-color:#f4f4f4;
}
#nav2 li a{
    font-size:12px;
}

你可能感兴趣的:(网页开发-练习二 下拉及多级弹出式菜单)