我如何...完成此下拉菜单！ [英] How do I...complete this dropdown menu!

问题描述

大家好，



我被困在这里无法弄清楚如何完成我的下拉菜单，我以为我已经把一切都搞定了？你可以请专家帮帮忙吗？因为我是网页设计的菜鸟，并且在最近几天一直被困住。如果您将文件加载到Jfiddle，您可以在产品和服务选项卡下看到链接丢失并分散而不是下降？请帮忙。



谢谢



HTML

 <   div     id   =  menu >  
 
 <   ul  >  
 
 <   font     face   =   arial >  <   li  >  <   a     title   = 返回主页    href   =  index.html > 主页<   / a  >  <   / li  >  
 <   li  >  <   a     title   = 了解更多关于我们    href   =  about.html > 关于我们<   / a  >  <   / li  >  
 <   li  >  <   a     title   = 产品与放大器;服务    href   =  pands.html > 产品与服务< ;   / a  >  
 <   ul  >  
 <   li  >  < ;   a     href  < span class =code-keyword> = ＃ > 链接项< span class =code-keyword><   / a  >  <   / li  >  
 <   li  >  <   a     href   = ＃ > ; 链接项<   / a  > ;  <   / li  >  
 <   li  >  <   a    <跨班=code-attribute> href   = ＃ > 链接项<   / a  >  <   / li  >  
 <   li  >  <   a     href   = ＃ > 链接项<   / a  >  <   / li  < span class =code -keyword>>  
 <   li  >  <   a     href   = ＃ > 链接项<   / a  >  <   / li  >  
 <   li  >  <   a  < span class =code-attribute>   href   =  ＃ > 链接项<   / a  >  <   / li  >  
 <   / li  >  
 <   / ul  >  
 <   / li  >  
 <   li  >  <   a     title   = 常见问题解答    href   =  faq.html > 常见问题<   / a  >  < ;   / li  >  
 <   li  >  <   a     title   = 联系信息    href   =  contact.html > 与我们联系<   / a  >  <   / li  >  
 <   li  >  <   a     title   = 评论    href   =  feedback.html > 推荐书<   / a  >  <   / li  >  
 
 <   / ul  >  

CSS

＃菜单 { width  ：  100％;  
  height  ：  42px;  
  clear  ：  both;  
  background  ：  url（images / button_end_gradient.png）center left no-repeat;  
  position  ：  relative; } 
 
＃ menu  < span class =code-leadattribute> ul  { list-style-type  ： < span class =code-keyword> none;  
  margin  ： < span class =code-keyword> 0;  
  padding  ： < span class =code-keyword> 0;  
  position  ： < span class =code-keyword>绝对值;  
  left  ： < span class =code-keyword> 2px;  
  background  ： < span class =code-keyword>＃6A7A86 url（images / menu_background.png）repeat-x;  
 颜色 ： ＃DCE0E4; } 
 
＃菜单  ul   li  { display  ：  inline;  } 
 
＃菜单  ul   li   a  { text-decoration  ： 无;  
  height  ：  42px;  
  padding  ：  0 17px;  
  margin  ：  0;  
  line-height  ：  42px;  
  display  ：  block;  
  float  ：  left; ！important ; 
 背景 ：  url（images / button_end_gradient。 png）center right no-repeat;  
  color  ： ＃D8DCE0;  
  font-size  ： < span class =code-keyword> 16px;  
  font-weight  ： 粗体; } 
 
＃菜单  ul   ul  {
  position  ： 绝对;  
 可见性 ： 隐藏;  
  top  ：  42px;  
} 
 
＃菜单  ul   li：hover   ul  {
 可见性 ： 可见;  
} 
 
＃ 菜单  ul   li   a：hover  { background  ：  url（images / button_end_gradient.png）center right no-repeat;  
  color   ：  #FFF; } 

解决方案

问题出在子列表中，从父菜单列表和项目继承显示内联和位置属性。



修复它的一种方法是：

 < pre  lang =css> ;＃菜单 { width  ：  100％;  
  height  ： < span class =code-keyword> 42px;  
  background  ： < span class =code-keyword> url（images / button_end_gradient.png）center left no-repeat;  
  position  ：  relative; } 
 
＃ menu   ul  { list-style-type  ： 无;  
  margin  ：  0;  
  padding  ：  0;  
  position  ： 绝对;  
 显示 ： 块;   / *  明确要求菜单为块元素* /  
  left  ：  2px;  
 背景 ： ＃6A7A86 url（images / menu_background.png）repeat-x;  
 颜色 ： ＃DCE0E4;  
} 
 
  div ＃ menu   ul   li  { display  ：  inline-block;   / *  列表项是内联块，所以他们的孩子项目保持在其边界内* /  
  position  ：  relative;   / *  相对于允许子列表保留在父列表项下* /  
} 
 
＃菜单  ul   li   a  { text-decoration  ： 无;  
  height  ：  42px;  
  padding  ：  0 17px;  
  margin  ：  0;  
  line-height   ：  42px;  
  display   ：  blo ck;  
  float  ： 离开; ！重要; 
 背景 ：  url（images / button_end_gradient。 png）center right no-repeat;  
  color  ： ＃D8DCE0;  
  font-size  ： < span class =code-keyword> 16px;  
  font-weight  ： 粗体; } 
 
＃菜单  ul   ul  {
  position  ： 绝对;  
 可见性 ： 隐藏;  
  top  ：  42px;  
} 
 
＃菜单  ul   li：hover   ul  {
 可见性 ： 可见;  
} 
 
＃ 菜单  ul   li   a：hover  { background  ：  url（images / button_end_gradient.png）center right no-repeat;  
  color   ：  #FFF; } < /   pre  >  

Hi all,

I am stuck here unable to figure out on how to complete this drop down menu off mine and I thought I have got everything right? Could you experts please help? As I am a noob in web designs and have been stuck for the last few days. If you load the files to Jfiddle you would be able to see under the "Products & Services" tab that the links drop and spread across rather than dropping down? Please help.

Thanks

HTML

<div id="menu">

<ul>

<font face="arial"><li><a title="Return to Home Page" href="index.html">Home</a></li>
<li><a title="Learn More About Us" href="about.html">About Us</a></li>
<li><a title="Products & Services" href="pands.html">Products & Services</a>
<ul>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
</li>
</ul>
</li>
<li><a title="FAQs" href="faq.html">FAQs</a></li>
<li><a title="Contact Information" href="contact.html">Contact Us</a></li>
<li><a title="Reviews" href="feedback.html">Testimonials</a></li>

</ul>

CSS

#menu {width: 100%;
       height: 42px;
       clear: both;
       background: url(images/button_end_gradient.png) center left no-repeat;
       position: relative;}

#menu ul {list-style-type: none;
          margin: 0;
          padding: 0;
          position: absolute;
          left: 2px;
          background: #6A7A86 url(images/menu_background.png) repeat-x;
          color: #DCE0E4;}

#menu ul li {display: inline;}

#menu ul li a {text-decoration: none;
               height: 42px;
               padding: 0 17px;
               margin: 0;
               line-height: 42px;
               display: block;
               float: left; !important;
               background: url(images/button_end_gradient.png) center right no-repeat;
               color: #D8DCE0;
               font-size: 16px;
               font-weight: bold;}

#menu ul ul {
position:absolute;
visibility:hidden;
top:42px;
}

#menu ul li:hover ul {
visibility:visible;
}

#menu ul li a:hover {background: url(images/button_end_gradient.png) center right no-repeat;
                     color: #FFF;}

解决方案

The issue is in the sub-list inheriting the display inline and position attributes from the parent menu list and items.

One way to fix it is:

<pre lang="css">#menu {width: 100%;
       height: 42px;
       background: url(images/button_end_gradient.png) center left no-repeat;
       position:relative;}

#menu ul {list-style-type: none;
          margin: 0;
          padding: 0;
          position: absolute;
          display:block; /* explicitly require menu to be a block element */
          left: 2px;
          background: #6A7A86 url(images/menu_background.png) repeat-x;
          color: #DCE0E4;
          }

div#menu ul li {display:inline-block; /* list items are inline-blocks so their child items are kept within their boundaries */
position:relative; /* relative to allow sub-list to stay under parent list item */
}

#menu ul li a {text-decoration: none;
               height: 42px;
               padding: 0 17px;
               margin: 0;
               line-height: 42px;
               display: block;
               float: left; !important;
               background: url(images/button_end_gradient.png) center right no-repeat;
               color: #D8DCE0;
               font-size: 16px;
               font-weight: bold;}

#menu ul ul {
position:absolute;
visibility:hidden;
top:42px;
}

#menu ul li:hover ul {
visibility:visible;
}

#menu ul li a:hover {background: url(images/button_end_gradient.png) center right no-repeat;
                     color: #FFF;}</pre>

这篇关于我如何...完成此下拉菜单！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！