關(guān)于導(dǎo)航菜單被遮住的問題
老師好，在學(xué)習(xí)過程中，我是把做的導(dǎo)航放在一個(gè)div里，但是當(dāng)鼠標(biāo)放上導(dǎo)航欄時(shí)，如果給的div長度不夠，導(dǎo)航欄原本拉長的效果就會(huì)被遮蔽起來。如果把DIV長度自由，又會(huì)使得整個(gè)div隨著導(dǎo)航欄拉長的效果拉長。這個(gè)應(yīng)該怎么改進(jìn)呢？謝謝老師啦。
代碼是下面的，因?yàn)槭遣藛斡悬c(diǎn)多，不過中間都不需要看。
.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 /*鼠標(biāo)移動(dòng)到上面時(shí)，應(yīng)用的樣式*/
{
? 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"> ? ?
<div class="kuang_left">
? ?<ul class="topmenu"><!--導(dǎo)航菜單開始-->
? ? ? ? <div class="toptitle">
? ? ? ? ? ? 全部商品分類
? ? ? ? </div>
? ? ? ? <li><a href="#">圖書、音像、數(shù)字商品</a><span></span> <b><a href="#">文學(xué)</a> <a href="#">經(jīng)管</a>
? ? ? ? ? ? <a href="#">暢讀VIP</a></b>
? ? ? ? ? ? <div class="submenu">
? ? ? ? ? ? ? ? <div class="leftdiv">
? ? ? ? ? ? ? ? ? ? <dl>
? ? ? ? ? ? ? ? ? ? ? ? <dt><a href="#">電子書</a></dt>
? ? ? ? ? ? ? ? ? ? ? ? <dd><a href="#">免費(fèi)</a> <a href="#">小說</a> <a href="#">勵(lì)志與成功</a>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#">婚戀/兩性</a><a href="#">文學(xué)</a> <a href="#">經(jīng)管</a>?
? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#">暢讀VIP</a>
? ? ? ? ? ? ? ? ? ? ? ?</dd>
? ? ? ? ? ? ? ? ? ? </dl>
? ? ? ? ? ? ? ? ? ? <dl>
? ? ? ? ? ? ? ? ? ? ? ? <dt><a href="#">數(shù)字音樂</a></dt>
? ? ? ? ? ? ? ? ? ? ? ? <dd><a href="#">通俗流行</a> <a href="#">古典音樂</a> <a href="#">搖滾說唱</a>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#">爵士藍(lán)調(diào)</a><a href="#">鄉(xiāng)村民謠</a> <a href="#">有聲讀物</a>
? ? ? ? ? ? ? ? ? ? ? ?</dd>
? ? ? ? ? ? ? ? ? ? </dl>
? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ?
? ? ? ? </li><!--圖書、音像、數(shù)字商品結(jié)束-->
? ? ? ? <li><a href="#">家用電器</a> <span></span>
? ? ? ? ? ? <div class="submenu">
? ? ? ? ? ? ? ? <div class="leftdiv">
? ? ? ? ? ? ? ? ? ? <dl>
? ? ? ? ? ? ? ? ? ? ? ? <dt><a href="#">大 家 電</a></dt>
? ? ? ? ? ? ? ? ? ? ? ? <dd>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#">平板電視</a> <a href="#">空調(diào)</a> <a href="#">冰箱</a>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">洗衣機(jī)</a> <ahref="#">家庭影院</a> <a href="#">DVD</a>?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">迷你音響</a> <a href="#">煙機(jī)/灶具</a><a href="#">熱水器</a>?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#">消毒柜/洗碗機(jī)</a> <a href="#">酒柜/冷柜</a> <a href="#">家電配件</a>
? ? ? ? ? ? ? ? ? ? ? ? </dd>
? ? ? ? ? ? ? ? ? ? </dl>
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div class="rightdiv">
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </li><!--家用電器結(jié)束-->
? ? ? ?
? ? ? ?</ul>
</div><!--kuang_left導(dǎo)航菜單區(qū)域結(jié)束-->
?<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 ">設(shè)為首頁</li>
? ? ? ? ? <li class="nav_mid_li ">加入收藏</li>
? ? ? ? ? <li class="nav_mid_li ">聯(lián)系我們</li>
? ? ? ? ? <li class="nav_mid_li ">設(shè)為首頁</li>
? ? ? ? ? </ul>
? ? ? ? ? <div class="nav_mid_right">
? ? ? ? ? <form action=""method="post">
? ? ? ? ? <input type="text"class="search_text"/>
? ? ? ? ? </form>
? ? ? ? ? </div> ?
? ? ? ? ? </div><!--nav mid結(jié)束-->
? ? ? ? ? <div class="num"></div>?
? </div><!--kuang_right_nav結(jié)束-->
??
2014-12-10
沒有代碼我也不好給具體原因。
我感覺是你把div長度寫死了，建議你別寫死，他就可以自適應(yīng)了。
最好還是上一下代碼，給你一個(gè)準(zhǔn)確的答案。
2014-12-10
是不是做了定位什么效果。