编程狮在线代码实例

Tab
<>
""
''
()
{}
[]
/
:
;
?
,
.
$
输入
运行
xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>编程狮(w3cschool.cn)</title>
<style>
    *{ margin:0px; padding: 0px; } 
    #nav { 
    font-family: arial, sans-serif; 
    position: relative; 
    width: 390px; 
    height:56px; 
    font-size:14px; 
    color:#999; 
    margin: 0 auto; 
    } 
    #nav ul { 
    list-style-type: none; 
    } 
    #nav ul li { 
    float: left; 
    position: relative; 
    } 
    #nav ul li a { 
    text-align: center; 
    border-right:1px solid #e9e9e9; 
    padding:20px; 
    display:block; 
    text-decoration:none; 
    color:#999; 
    } 
    #nav ul li ul { 
    display: none 
    } 
    #nav ul li:hover ul { 
    display: block; 
    position: absolute; 
    } 
    #nav ul li:hover ul li a { 
    display:block; 
    background:#12aeef; 
    color:#ffffff; 
    width: 110px; 
    text-align: center; 
    border-bottom: 1px solid #f2f2f2; 
    border-right: none; 
    } 
    #nav ul li:hover ul li a:hover { 
    background:#6dc7ec; 
    color:#fff; 
    } 
</style>
<body>
    <div id="nav"> 
        <ul> 
            <li class="first"><a href="#">Home</a></li> 
            <li><a href="#">About Me</a></li> 
            <li><a href="#">Portfolio</a> 
        <ul> 
            <li><a href="#">Web</a></li> 
            <li><a href="#">Print</a></li> 
            <li><a href="#">Photos</a></li> 
        </ul> 
        </li> 
            <li><a href="#">Contact Me</a></li> 
        </ul> 
    
    </div> 
</body>
</html>
实例代码
运行结果