                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /形形色色的下拉菜單

感覺這個方法并不實用啊加上overflow：hidden;

感覺這個方法并不實用啊加上overflow：hidden;?確實是可以不在頂部也達到這種效果但是一般情況是也有下拉菜單的使用overflow：hidden；以后下拉菜單就沒有了求個能換成英文加顯示下拉菜單的

慕移動7208282

2017-09-18

源自：形形色色的下拉菜單 4-2

關注問題我要回答

2076

操作

收起

3 回答

錢錢錢錢錢錢錢錢錢錢錢錢錢錢錢錢錢錢回答被采納 +2 積分
2017-09-19

層次不是我寫的，我直接在慕課練習上寫的，我只是在上面改了一點代碼，要這兩樣功能也就這樣了，更好的辦法我不知道，懶的去管。

0 回復有任何疑惑可以回復我~

收起回答

慕移動7208282 提問者

厲害了大佬很強

2017-09-19 回復有任何疑惑可以回復我~

錢錢錢錢錢錢錢錢錢錢錢錢錢錢錢錢錢錢
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;
??????? }
????? ?
??????? /*設置正常狀態英文菜單隱藏*/
??????? .top-nav li span{display:none;}
?????? ?
??????? /*鼠標移動到鏈接上面時將英文菜單顯示*/
??????? .top-nav li:hover span{display:block;}
?????? ?
??????? /*鼠標移動到鏈接上面時將中文菜單位置上移
??????? .top-nav li:hover {margin-top:-20px;}? 這里注釋了，后面3個li標簽自然就不能上移了，
??????? 兩種方法適合兩種情況*/
?????? ?
??????? .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="#">學習中心<span>Learn</span></a></li>
??????? <li><a href="#">關于我們<span>About</span></a></li>
??? </ul>
</body>
</html>

0 回復有任何疑惑可以回復我~

收起回答

慕移動7208282 提問者

我試了試真的簡直強力我先好好看下你這個代碼

2017-09-19 回復有任何疑惑可以回復我~

錢錢錢錢錢錢錢錢錢錢錢錢錢錢錢錢錢錢回復慕移動7208282 提問者

其他沒什么不同，就是整個把ul往上移就行了

2017-09-19 回復有任何疑惑可以回復我~

慕移動7208282 提問者回復錢錢錢錢錢錢錢錢錢錢錢錢錢錢錢錢錢錢

感覺你寫的代碼層次很好很清晰我自己寫的特別亂還老容易出錯自己寫的各種ul li ul li的選擇器自己后來看著都煩

2017-09-19 回復有任何疑惑可以回復我~

查看1條回復

錢錢錢錢錢錢錢錢錢錢錢錢錢錢錢錢錢錢
2017-09-19

那你把英文Home當作二級標題，然后移入效果是二級菜單往上走就行了
??????? <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;}