您的位置:程序门 -> web 开发 -> html(css)



下拉菜单背景问题!求教各位~~~~~


[收藏此页] [打印本页]选择字色:背景色:字体:[][][]


下拉菜单背景问题!求教各位~~~~~[已结贴,结贴人:zhenglingfei05]
发表于:2007-09-03 10:48:17 楼主
/*   set   up   the   overall   width   of   the   menu   div,   the   font   and   the   margins   */
.menu   {
font-family:   arial,   sans-serif;  
width:817px;  
margin-left:0px;  
margin:0px   0;
background:url(../pic/menu_top_bg.jpg);
background-repeat:repeat-x;
}
/*   remove   the   bullets   and   set   the   margin   and   padding   to   zero   for   the   unordered   list   */
.menu   ul   {
padding:0;  
margin:0;
list-style-type:   none;

}
/*   float   the   list   so   that   the   items   are   in   a   line   and   their   position   relative   so   that   the   drop   down   list   will   appear   in   the   right   place   underneath   each   list   item   */
.menu   ul   li   {
float:left;  
position:relative;
border-right-style:dotted;
border-right-width:1px;
border-right-color:#ffffff;
}
/*   style   the   links   to   be   104px   wide   by   30px   high   with   a   top   and   right   border   1px   solid   white.   set   the   background   color   and   the   font   size.   */
.menu   ul   li   a,   .menu   ul   li   a:visited   {
display:block;  
text-align:center;  
text-decoration:none;  
width:150px;  
height:35px;  
color:#fff;  
border-bottom:1px   solid   #fff;
background:url(../pic/menu_top_bg.jpg);
background-repeat:repeat-x;
line-height:30px;  
font-size:12px;
}
/*   make   the   dropdown   ul   invisible   */
.menu   ul   li   ul   {
display:   none;
}
/*   specific   to   non   ie   browsers   */
/*   set   the   background   and   foreground   color   of   the   main   menu   li   on   hover   */
.menu   ul   li:hover   a   {
color:#fff;  
background:url(../pic/menu_top_hover_bg.jpg);
background-repeat:repeat-x;
}
/*   make   the   sub   menu   ul   visible   and   position   it   beneath   the   main   menu   list   item   */
.menu   ul   li:hover   ul   {
display:block;  
position:absolute;  
top:30px;  
left:0;  
width:130px;
}
/*   style   the   background   and   foreground   color   of   the   submenu   links   */
.menu   ul   li:hover   ul   li   a   {
display:block;  
background:#cccccc;  
color:#000;
height:30px;
line-height:30px;
border-bottom:1px;
border-bottom-style:dotted;
}
/*   style   the   background   and   forground   colors   of   the   links   on   hover   */
.menu   ul   li:hover   ul   li   a:hover   {
background:#c0d8cc;  
color:#000;
}
</style>

<!--[if   lte   ie   6]>
<style   type= "text/css ">
/*   styling   specific   to   internet   explorer   ie5.5   and   ie6.   yet   to   see   if   ie7   handles   li:hover   */
/*   get   rid   of   any   default   table   style   */
table   {
border-collapse:collapse;
margin:0;  
padding:0;
}
/*   ignore   the   link   used   by   'other   browsers '   */
.menu   ul   li   a.hide,   .menu   ul   li   a:visited.hide   {
display:none;
}
/*   set   the   background   and   foreground   color   of   the   main   menu   link   on   hover   */
.menu   ul   li   a:hover   {
color:#fff;  
background:#133ea0;
}
/*   make   the   sub   menu   ul   visible   and   position   it   beneath   the   main   menu   list   item   */
.menu   ul   li   a:hover   ul   {
display:block;  
position:absolute;  
top:35px;  
left:0;  
width:150px;
}
/*   style   the   background   and   foreground   color   of   the   submenu   links   */
.menu   ul   li   a:hover   ul   li   a   {
height:30px;
background:#faeec7;  
color:#000;
}
/*   style   the   background   and   forground   colors   of   the   links   on   hover   */
.menu   ul   li   a:hover   ul   li   a:hover   {
background:#dfc184;  
color:#000;
}
</style>
<![endif]-->


<div   class= "menu ">
<ul>
        <li> <a   class= "hide "   href= "../menu/index.html "> 产品分销 </a>
        <!--[if   lte   ie   6]>
        <a   href= "../menu/index.html "> 产品分销
        <table> <tr> <td>
        <![endif]-->
<ul>
<li> <a   href= "# "   title= " "> ibm   acs产品 </a> </li>
<iframe       src= "javascript:false "       style= 'position:absolute;       visibility:inherit;       top:0px;       left:0px;       width:150px;       height:31px;       z-index:-1;       filter=progid:dximagetransform.microsoft.alpha(style=0,opacity=0); '> </iframe>
<li> <a   href= "# "   title= " "> 公司业务 </a> </li>
<iframe       src= "javascript:false "       style= 'position:absolute;       visibility:inherit;       top:0px;       left:0px;       width:150px;       height:31px;       z-index:-1;       filter=progid:dximagetransform.microsoft.alpha(style=0,opacity=0); '> </iframe>
<li> <a   href= "# "   title= " "> 成功案例 </a> </li>
<iframe       src= "javascript:false "       style= 'position:absolute;       visibility:inherit;       top:0px;       left:0px;       width:150px;       height:31px;       z-index:-1;       filter=progid:dximagetransform.microsoft.alpha(style=0,opacity=0); '> </iframe>
</ul>
<!--[if   lte   ie   6]>
</td> </tr> </table>
</a>
<![endif]-->
</li>
</ul>
</div>

------------------------------------------------------------
li   a:hover用纯颜色,整个菜单就显示正常,用背景图片(jpeg)之后,就只有
主菜单的能正常显示,下拉菜单就直接消失了?点上去就不出下拉菜单了呢?
发表于:2007-09-03 11:50:351楼 得分:5
你这个不是js实现的吗?用纯css能实现下拉菜单吗?
发表于:2007-09-03 11:57:152楼 得分:5
我想学习下
发表于:2007-09-03 12:26:023楼 得分:90
你试试   background:#ccc   url(***.gif);


快速检索

最新资讯
热门点击