Question

首先，我是HTML和CSS的新手，就像两周前一样，我知道网页是什么，就是这样。我被要求帮助设计一个网站，所以我一直在学习。我遇到了一个似乎相当常见的问题，但无论我尝试做什么修改，我似乎无法让它发挥作用。

我有一个水平主菜单，点击一个垂直子菜单。除了两个问题之外，我设法让垂直菜单几乎完美地运行。子菜单不会显示在父项下，子菜单会扩展到下面的元素中。

这是HTML

<div id="header">
<img id="logo" src="../images/Logo.jpg">
<a href="# src="../images/fblink.jpg"></a>
<a href="#><img id="lilink" src="../images/lilink.jpg"></a>
<nav id="menu">
  <ul>
   <li><a href="../index.htm">Home</a></li>
   <li id="current">About Us
    <ul>
      <li><a href="/#">Person 1</a></li>
      <li><a href="/#">Person 2</a></li>
      <li><a href="/#">Person 3</a></li>
    </ul>
   </li>
   <li><a href="../News_Events/Main.htm">News and Events</a></li>
   <li><a href="../Financial_Resources/Main.htm">Financial Resources</a></li>
   <li><a href="../Market_View/Main.htm">Market View</a></li>
   <li><a href="../Services/Main.htm">Services</a></li>
   <li><a href="../Contact_Us/Contact.htm">Contact Us</a></li>
  </ul>
</nav>
  </div>

CSS

#menu {background-color:#DAE2EA;
       margin:0;
       padding:0;
       padding-right:.75em;
       clear:left;
       }

#menu ul {list-style:none;
          text-align:right;
          position:relative;
          }

#menu ul li {display:inline;
             border-right:double 2px #33495F;
             border-radius:0 0 3em 3em;
             padding: 0 .75em 0 2em;
             text-decoration:none;
             color:#78AEE6;
             font-size:1.2em;
             }

#menu a {text-decoration:none;
         color:#78AEE6;
         }

#menu a:visited {color:#78AEE6;
                 font-size:1.2em;
                 }

#menu a:hover {font-size:1.25em;
               }

#current {font-size:1.5em;
          font-weight:bold;
          }

#menu ul li ul {position:absolute;
                }

#menu ul li ul li {margin-left:.5em;
                   font-size:.85em;
                   display:block;
                   text-align:right;
                   font-weight:normal;
                   border:none;
                   }

单击链接后显示该页面。但是会发生的是，“关于我们”子菜单显示在“主页”链接下，并且导航元素不会扩展到覆盖子菜单，因此人员1,2和3都覆盖了主要元素（编码其他区域）不包括在内。）

我知道我是新手，所以这可能是一个非常简单的解决方法。感谢您的耐心等待，并提前感谢您的帮助。如果编码不太正确，我也会道歉。

作为旁注，我还没有JS或Jquery技能，所以请暂时帮我把它保持在HTML5和CSS3上。

此致汤姆斯通。

垂直子菜单未与水平主菜单对齐

0 个答案: