感覺這個方法并不實用啊 加上overflow：hidden;
感覺這個方法并不實用啊 加上overflow：hidden;?確實是可以不在頂部也達(dá)到這種效果 但是一般情況是也有下拉菜單的 使用overflow：hidden；以后下拉菜單就沒有了 求個能換成英文加顯示下拉菜單的
慕移動7208282
2017-09-18
3 回答
舉報
0/150
提交
取消
2017-09-19
層次不是我寫的，我直接在慕課練習(xí)上寫的，我只是在上面改了一點代碼，要這兩樣功能也就這樣了，更好的辦法我不知道，懶的去管。
2017-09-19
/*我就是既把一級菜單換成英文的，又把二級菜單顯示出來了*/
<!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">
??????? *{margin:0;padding:0;}
??????? .top-nav
??????? {
??????????? font-size: 12px;
??????????? font-weight: bold;
??????????? list-style: none;
??????????? border-bottom: 8px solid #DC4E1B;
??????????? overflow: hidden;
??????? }
??????? .top-nav li
??????? {
??????????? float: left;
??????????? margin-right: 1px;
??????????? margin-top:1px;
??????????? position:relative;
??????? }
??????? .top-nav li a
??????? {
??????????? line-height: 20px;
??????????? text-decoration: none;
??????????? background: #DDDDDD;
??????????? color: #666666;
??????????? display: block;
??????????? width: 80px;
??????????? text-align: center;
??????? }
????? ?
??????? /*設(shè)置正常狀態(tài)英文菜單隱藏*/
??????? .top-nav li span{display:none;}
?????? ?
??????? /*鼠標(biāo)移動到鏈接上面時將英文菜單顯示*/
??????? .top-nav li:hover span{display:block;}
?????? ?
??????? /*鼠標(biāo)移動到鏈接上面時將中文菜單位置上移
??????? .top-nav li:hover {margin-top:-20px;}? 這里注釋了，后面3個li標(biāo)簽自然就不能上移了，
??????? 兩種方法適合兩種情況*/
?????? ?
??????? .top-nav li ul{display:none;list-style:none;width:80px;}
??????? .top-nav li:hover ul{margin-top:-21px;display:block;} /*我前面在li上加了個margin-top:1px;所以這里要多移1px；*/
?
??? </style>
</head>
<body>
??? <ul class="top-nav">
??????? <li><a href="#">首頁</a>
??????????? <ul>
??????????????? <li><a href="#">Home</a></li>
??????????????? <li><a href="#">二級菜單</a></li>
??????????????? <li><a href="#">二級菜單</a></li>
??????????? </ul>
??????? </li>
??????? <li><a href="#">課程大廳<span>Course</span></a></li>
??????? <li><a href="#">學(xué)習(xí)中心<span>Learn</span></a></li>
??????? <li><a href="#">關(guān)于我們<span>About</span></a></li>
??? </ul>
</body>
</html>
2017-09-19
那你把英文Home當(dāng)作二級標(biāo)題，然后移入效果是二級菜單往上走就行了
??????? <li><a href="#">首頁</a>
??????????? <ul>
??????????????? <li><a href="#">Home</a></li>
??????????????? <li><a href="#">二級菜單</a></li>
??????????????? <li><a href="#">二級菜單</a></li>
??????????? </ul>
??????? </li>
??????? .top-nav li ul{display:none;list-style:none;width:80px;}
??????? .top-nav li:hover ul{margin-top:-20px;display:block;}