                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /商城分類導航效果

關于導航菜單被遮住的問題

老師好，在學習過程中，我是把做的導航放在一個div里，但是當鼠標放上導航欄時，如果給的div長度不夠，導航欄原本拉長的效果就會被遮蔽起來。如果把DIV長度自由，又會使得整個div隨著導航欄拉長的效果拉長。這個應該怎么改進呢？謝謝老師啦。

代碼是下面的，因為是菜單有點多，不過中間都不需要看。

.kuang{

? ? ?wight:1000px;

background-color:#000;

}

.kuang_left{

width:225px;

float:left;

background-color:#FFF;

}

.kuang_right{

width:775px;

background-color:#F63;

float:right;

}

.kuang_right_nav {

height: 40px;

background-color:#0FF;

float:left;

}

.nav_left {

width: 10px;

background-color:#363;

/*background:url(../images/nav_left.jpg) no-repeat;*/

}

.nav_mid {

width:765px;

background-color:#033;

/*background:url(../images/nav_bg.jpg) repeat-x;*/

line-height: 40px;

}

.nav_right {

width: 10px;

background-color:#606;

/*background:url(../images/nav_right.jpg)repeat-x;*/

}

.nav_left, .nav_mid, .nav_right {

height: 40px;

float: left;

display: inline;

}

.nav_mid_li {

float: left;

list-style-type: none;

width:85px;

font-family: "微軟雅黑";

text-align: center;

}

.nav_mid_left {

width: 560px;

float: left;

display: inline;

}

.nav_mid_right {

width: 200px;

float: left;

display: inline;

}

.search_text {

width: 190px;

float: left;

height: 25px;

margin-top: 5px;

background:url(../images/search.jpg) no-repeat ? right center;

background-color: #FFF;

border: 1px solid #FFF;

padding-right: 25px;

}

.ad{

? width:560px

? height:310px;

? overflow:hidden;

? float:left;

}

.kuang_right_right{

width:213px;

height:310px;

float:right;

background-color:#FC6;

}

.topmenu

{

? display: block;

? width: 220px;

? border: 2px solid #e4393c;

? margin: 0;

? padding: 0;

}

.toptitle

{

? height: 40px;

? line-height: 40px;

? text-align: left;

? font-size: 11pt;

? font-weight: bold;

? color: White;

? background: #e4393c;

? padding-left: 20px;

}

.topmenu li

{

? height: 30px;

? line-height: 30px;

? font-size: 11pt;

? list-style-type: none;

? text-align: left;

? padding-left: 8px;

? z-index: 3;

? background-image: url(1.png);

? background-repeat: no-repeat;

? background-position: right;

}

.topmenu li a

{

? text-decoration: none;

? color: #313131;

}

.topmenu li a:hover

{

? text-decoration: underline;

? font-weight: bold;

? color: #e4393c;

}

.topmenu .lihover /*鼠標移動到上面時，應用的樣式*/

{

? border: 1px solid #DDD;

? border-right: 0;

? box-shadow: 0 0 8px #DDD;

? -moz-box-shadow: 0 0 8px #DDD;

? -webkit-box-shadow: 0 0 8px #DDD;

? background-image: none;

? height:60px;

? border-left:4px solid #e4393c;

}

.topmenu .lihover .submenu /*懸浮層*/

{

? display: block;

}

.topmenu .lihover span /*白色小方框*/

{

? background: white;

? display: inline-block;

? z-index: 20;

? width: 20px;

? height: 60px;

? float: right;

? position: relative;

}

.topmenu li b

{

?display:none;

}

.topmenu .lihover b

{

? display:block;

? height:30px;

? line-height:30px;

? font-weight:normal;

? font-size:10pt;

}

.submenu

{

? display: none;

? width: 715px;

? left: 220px;

? position: absolute;

? top: 40px;

? border: 1px solid #DDD;

? z-index: 4;

? background: white;

? box-shadow: 0 0 8px #DDD;

? -moz-box-shadow: 0 0 8px #DDD;

? -webkit-box-shadow: 0 0 8px #DDD;

}

.leftdiv

{

? float: left;

? width: 490px;

? margin: 5px;

}

.rightdiv

{

? float: left;

? width: 200px;

? margin: 5px;

}

.leftdiv dl

{

? display: block;

? border-bottom: 1px solid #EEE;

? padding-bottom: 6px;

? overflow: hidden;

}

.leftdiv dl dt

{

? display: block;

? float: left;

? width: 60px;

? text-align: right;

? height: 22px;

? line-height: 22px;

? padding-right: 6px;

}

.leftdiv dl dt a

{

? color: #e4393c;

? font-weight: bold;

? text-decoration: underline;

? font-size: 10pt;

}

.leftdiv dl dd

{

? display: block;

? overflow: hidden;

}

.leftdiv dl dd a

{

? display: block;

? float: left;

? border-left: 1px solid #CCC;

? color: #737373;

? font-size: 9pt;

? padding: 0 8px;

? height: 14px;

? line-height: 14px;

? margin: 4px 0;

}

.rightdiv dl dd

{

? margin: 3px 0;

}

.rightdiv dl dt

{

? color: #e4393c;

? font-weight: bold;

? font-size: 10pt;

}

.rightdiv dl dd a

{

? font-size: 9pt;

? color: #737373;

? line-height: 22px;

}

.rightdiv dl dd a:hover

{

? color: #737373;

? font-weight: normal;

}

.rightPic

{

position:relative;

right:-35px;

bottom:-30px;

}

上面是CSS樣式。

<div class="kuang"> ? ?

? ?<ul class="topmenu">

? ? ? ? <div class="toptitle">

? ? ? ? ? ? 全部商品分類

? ? ? ? </div>

? ? ? ? <li><a href="#">圖書、音像、數字商品</a><span></span> <b><a href="#">文學</a> <a href="#">經管</a>

? ? ? ? ? ? <a href="#">暢讀VIP</a></b>

? ? ? ? ? ? <div class="submenu">

? ? ? ? ? ? ? ? <div class="leftdiv">

? ? ? ? ? ? ? ? ? ? <dl>

? ? ? ? ? ? ? ? ? ? ? ? <dt><a href="#">電子書</a></dt>

? ? ? ? ? ? ? ? ? ? ? ? <dd><a href="#">免費</a> <a href="#">小說</a> <a href="#">勵志與成功</a>

? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#">婚戀/兩性</a><a href="#">文學</a> <a href="#">經管</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#">暢讀VIP</a>

? ? ? ? ? ? ? ? ? ? ? ?</dd>

? ? ? ? ? ? ? ? ? ? </dl>

? ? ? ? ? ? ? ? ? ? <dl>

? ? ? ? ? ? ? ? ? ? ? ? <dt><a href="#">數字音樂</a></dt>

? ? ? ? ? ? ? ? ? ? ? ? <dd><a href="#">通俗流行</a> <a href="#">古典音樂</a> <a href="#">搖滾說唱</a>

? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#">爵士藍調</a><a href="#">鄉村民謠</a> <a href="#">有聲讀物</a>

? ? ? ? ? ? ? ? ? ? ? ?</dd>

? ? ? ? ? ? ? ? ? ? </dl>

? ? ? ? ? ? ? ? ? ?

? ? ? ? </li>

? ? ? ? <li><a href="#">家用電器</a> <span></span>

? ? ? ? ? ? <div class="submenu">

? ? ? ? ? ? ? ? <div class="leftdiv">

? ? ? ? ? ? ? ? ? ? <dl>

? ? ? ? ? ? ? ? ? ? ? ? <dt><a href="#">大家電</a></dt>

? ? ? ? ? ? ? ? ? ? ? ? <dd>

? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#">平板電視</a> <a href="#">空調</a> <a href="#">冰箱</a>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">洗衣機</a> <ahref="#">家庭影院</a> <a href="#">DVD</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">迷你音響</a> <a href="#">煙機/灶具</a><a href="#">熱水器</a>?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">消毒柜/洗碗機</a> <a href="#">酒柜/冷柜</a> <a href="#">家電配件</a>

? ? ? ? ? ? ? ? ? ? ? ? </dd>

? ? ? ? ? ? ? ? ? ? </dl>

? ? ? ? ? ? ? ? ? ??

? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? <div class="rightdiv">

? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? </div>

? ? ? ? </li>

? ? ? ?

? ? ? ?</ul>

</div>

?<div class="kuang_right">

? ? <div class="kuang_right_nav">

? ? ? ?<div class="nav_left"></div>

? ? ? ? ?<div class="nav_mid">

? ? ? ? ?<div class="nav_mid_left"></div>

? ? ? ? ? <ul>

? ? ? ? ? <li class="nav_mid_li ">設為首頁</li>

? ? ? ? ? <li class="nav_mid_li ">加入收藏</li>

? ? ? ? ? <li class="nav_mid_li ">聯系我們</li>

? ? ? ? ? <li class="nav_mid_li ">設為首頁</li>

? ? ? ? ? </ul>

? ? ? ? ? <div class="nav_mid_right">

? ? ? ? ? <form action=""method="post">

? ? ? ? ? <input type="text"class="search_text"/>

? ? ? ? ? </form>

? ? ? ? ? </div> ?

? ? ? ? ? </div>

? ? ? ? ? <div class="num"></div>?

? </div>

NDegree

2014-12-10

源自：商城分類導航效果

關注問題我要回答

1535

操作

收起

2 回答

Tracy_
2014-12-10

沒有代碼我也不好給具體原因。

我感覺是你把div長度寫死了，建議你別寫死，他就可以自適應了。

最好還是上一下代碼，給你一個準確的答案。

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

收起回答

NDegree 提問者

恩，謝謝你。我把div長度改成自動，但是整個div會隨著菜單拉長而拉長的變動。代碼我再加下，謝謝你

2014-12-10 回復有任何疑惑可以回復我~

小于飛飛
2014-12-10

是不是做了定位什么效果。

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

收起回答

舉報

0/150

提交

取消

商城分類導航效果

參與學習 63734 人
解答問題 315 個

兩種方法實現分類導航，同時擴展講解其它商城分類導航的制作方法

進入課程

本課相似問答

2 回答關于二級菜單懸浮在一級菜單上的問題

1 回答求大神指導，怎么實現一級菜單與二級菜單的分割效果？

1 回答為什么submeu不設置z-index也可以把標題div遮住?

1 回答京東導航欄優化疑問

2 回答為什么加入position: relative;才能遮住邊框呢？

搜索更多本課相關問答

關于導航菜單被遮住的問題

我要回答關注問題

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

關于導航菜單被遮住的問題

2 回答

本課相似問答

關于導航菜單被遮住的問題