菜单背景图像&子菜单 [英] Menus Background Image & SubMenu

问题描述

我希望在特定的菜单项中添加图片，还希望为特定的菜单项添加一个子菜单...



来自下面的菜单我希望为Home添加一个图像...我试过它不起作用...

对于关于我们我希望添加一个子下拉菜单，如公司，管理，联系我们



感谢您的指导...



我的代码

< pre lang =xml> < div class = red < span class =code-keyword>>
< div id = slatenav >
< ul >
< li id = 主页 > < a href = ＃ title = css菜单 > 主页< / a > < / li >
< li > < a href = ＃ title = css菜单 > 关于我们< / a > < / li >
< li > < a href = ＃ title = css菜单 > 解决方案< / a > < / li >
< li > < a href = ＃ title = css菜单 > 服务< / a > < / li >
< li > < a < span class =code-attribute> href = ＃ title = css菜单 > 客户< / a > < / li >
< li > < a href = ＃ < span class =code-attribute> title = css菜单 > 合作伙伴< / a > < / li >
< li > < a href = ＃ title = css菜单 > 技术支持< / a > < / li >
< / ul >
< / div >
< / div >

我的风格低于代码..

 < span class =code-keyword><   style     type   =  text / css   >  
。 red ＃ slatenav  { position  ：  relative;   display  ：  block ;   height  ：  42px;   font-size  ：  15px;  < span class =code-attribute> font-weight  ：  bold;  背景 ： 透明网址（MyImages / ChkLine.jpg）repeat-x top left;   font-family  ：  Calibri; } 
。 red ＃ slatenav   ul  { margin  ：  0px;   padding   ：  0;   list-style-type   ： 无;   width  ：  auto; } 
。 red ＃ slatenav   ul   li  { display  ：  block;   float  ：  left;   margin  ：  0 1px 0 0; } 
。 red ＃ slatenav   ul   li   a  { display  ：  block;   float  ：  left;   color  ： ＃fff;   text-decoration  ：  none;   padding  ：  13px 28px 0 28px;   height  ：  28px;   border  ：  1px＃606060 solid; } 
。 red ＃ slatenav  < span class =code-leadattribute> ul   li   a：hover ，。 red ＃ slatenav   ul   li   a 。 current  {颜色 ： ＃fff;   background  ： 透明网址（MyImages / GreyBigImg.jpg）无重复顶部中心; } 
。 red ＃ slatenav   ul  < span class =code-leadatt ribute> li ＃ home   a  {
  background  ：  url（MyImages / ISG_Logo_P.jpg）no-repeat top center;  ?????? 。 ？ 
宽度：81px; 
 }  
 

解决方案

让它成为对像我这样的人有用...

添加MenuItem

。 red ＃ slatenav   ul   li ＃ 主页  a  {
  background  ：  url（MyImages / ISG_Back_Img.jpg）no-repeat top center;  
  width  ：  70px;  
} 
。 red ＃ slatenav   ul  < span class =code-leadattribute> li ＃主页  a：悬停 {
  background  ：  url（MyImages / ISG_Fore_Img.jpg）no-repeat top center;  
} 

对于SubMenu到AboutUs MenuItem

 <   li  >   <   a     href   = ＃    title   =  css菜单 > 关于我们<   / a  >  
 <   ul  >  
 <   li  >  <   a     href   = ＃    title   =  css菜单 > 公司<   / a  >  < ;   / li  >  
 <   li  >  <   a     href   = ＃    title   =  css菜单 > 管理<   / a  >  <   / li  >  
 <   li  >  <   a     href   = ＃    title   =  css菜单  > 使命&值<   / a  >  < span class =code-keyword><   / li  >  
 <   li  >  <   a     href   = ＃    title   =  css菜单 > 与我们联系<   / a  >  <   / li  >  
 <   / ul  >  
 <   / li  >  

Hi, I wish to add a image to particular menuitem and also I wish to add down a submenu for particular menu item...

From the below menu I wish to add a image for "Home"...I tried it's not working...
And for "About Us" I wish to add a sub dropdown menu like Company, Management, Contact Us

Thanks for the guidances...

My Codes

<div class="red">
            <div id="slatenav">
                <ul>
                    <li id="Home"><a href="#" title="css menus">Home</a></li>
                    <li><a href="#" title="css menus">About Us</a></li>
                    <li><a href="#" title="css menus">Solutions</a></li>
                    <li><a href="#" title="css menus">Services</a></li>
                    <li><a href="#" title="css menus">Customers</a></li>
                    <li><a href="#" title="css menus">Partners</a></li>
                    <li><a href="#" title="css menus">Technical Support</a></li>
                </ul>
            </div>
        </div>

And My Style is below code..

<style type="text/css" >
.red #slatenav{position:relative;display:block;height:42px;font-size:15px;font-weight:bold;background:transparent url(MyImages/ChkLine.jpg) repeat-x top left;font-family: Calibri; }
.red #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.red #slatenav ul li{display:block;float:left;margin:0 1px 0 0; }
.red #slatenav ul li a{display:block;float:left;color:#fff;text-decoration:none;padding:13px 28px 0 28px;height:28px;border: 1px #606060 solid;}
.red #slatenav ul li a:hover,.red #slatenav ul li a.current{color:#fff;background:transparent url(MyImages/GreyBigImg.jpg) no-repeat top center;}
.red #slatenav ul li#home a{
    background: url(MyImages/ISG_Logo_P.jpg) no-repeat top center;??????.?
    width:81px;
}

解决方案

Let it be useful to someone else like me...
For Adding a MenuItem

.red #slatenav ul li#Home a{
        background: url(MyImages/ISG_Back_Img.jpg) no-repeat top center;
        width:70px;
    }
    .red #slatenav ul li#Home a:hover{
        background: url(MyImages/ISG_Fore_Img.jpg) no-repeat top center;
    }

For SubMenu to AboutUs MenuItem

<li><a href="#" title="css menus">About Us</a>
                    <ul>
                        <li><a href="#" title="css menus">Company</a></li>
                        <li><a href="#" title="css menus">Management</a></li>
                        <li><a href="#" title="css menus">Mission & Values</a></li>
                        <li><a href="#" title="css menus">Contact Us</a></li>
                    </ul>
                    </li>

这篇关于菜单背景图像&amp;子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！