-
$=jQuery查看全部
-
http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
查看全部 -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
? ? <title></title>
? ? <style type="text/css">
? ? ? ? .top-nav
? ? ? ? {
? ? ? ? ? ? font-size: 12px;
? ? ? ? ? ? font-weight: bold;
? ? ? ? ? ? list-style: none;
? ? ? ? ? ? border-bottom: 8px solid #DC4E1B;
? ? ? ? ? ? overflow: auto;
? ? ? ? }
? ? ? ? .top-nav li
? ? ? ? {
? ? ? ? ? ? float: left;
? ? ? ? ? ? margin-right: 1px;
? ? ? ? }
? ? ? ? .top-nav li a
? ? ? ? {
? ? ? ? ? ? line-height: 20px;
? ? ? ? ? ? text-decoration: none;
? ? ? ? ? ? background: #DDDDDD;
? ? ? ? ? ? color: #666666;
? ? ? ? ? ? display: block;
? ? ? ? ? ? width: 80px;
? ? ? ? ? ? text-align: center;
? ? ? ? }
? ? ? ?
? ? ? ? /*設置正常狀態英文菜單隱藏*/
? ? ? ??
? ? ? ? .top-nav li a span{
? ? ? ? ? ? display:none;
? ? ? ? }
? ? ? ? /*鼠標移動到鏈接上面時將英文菜單顯示*/
? ? ? ? .top-nav li a:hover span{
? ? ? ? ? ? display:block;
? ? ? ? ? ? background-color:#DC4E1B;
? ? ? ? ? ? color:#fff;
? ? ? ? }
? ? ? ??
? ? ? ? /*鼠標移動到鏈接上面時將中文菜單位置上移*/
? ? ? ? .top-nav li a:hover{
? ? ? ? ? ? margin-top:-20px;
? ? ? ? }
?
? ? </style>
</head>
<body>
? ? <ul class="top-nav">
? ? ? ? <li><a href="#">首頁<span>Home</span></a></li>
? ? ? ? <li><a href="#">課程大廳<span>Course</span></a></li>
? ? ? ? <li><a href="#">學習中心<span>Learn</span></a></li>
? ? ? ? <li><a href="#">關于我們<span>About</span></a></li>
? ? </ul>
</body>
</html>
查看全部 -
hover鼠標經過查看全部
舉報