下拉菜单 CSS

Question

我无法弄清楚我的下拉菜单出了什么问题。当我越过主级别链接时，下拉菜单出现在屏幕左侧，而不是主链接下方。 我已经为此工作了几个小时，任何帮助将不胜感激。

这里是html部分：

<div class="nav">

        <ul id="menu">
           <li><a href="#" class="current">Home</a></li>
              <li><a href="#">Apetiziers</a>
              <ul>
               <li><a href="#">Sub-Link 1</a></li>
               <li><a href="#">Sub-Link 2</a></li>
               <li><a href="#">Sub-Link 3</a></li>
               <li><a href="#">Sub-Link 4</a></li>
              </ul>
              </li>

              <li><a href="#">Entree</a>
             <ul>
             <li><a href="#">Sub-Link 1</a></li>
             <li><a href="#">Sub-Link 2</a></li>
             <li><a href="#">Sub-Link 3</a></li>
             <li><a href="#">Sub-Link 4</a></li>
             </ul>
              </li>

              <li><a href="#">Main Course</a>
             <ul>
             <li><a href="#">Sub-Link 1</a></li>
             <li><a href="#">Sub-Link 2</a></li>
             <li><a href="#">Sub-Link 3</a></li>
             <li><a href="#">Sub-Link 4</a></li>
             </ul>      
              </li>

              <li><a href="#">Dessert</a>
             <ul>
              <li><a href="#">Sub-Link 1</a></li>
              <li><a href="#">Sub-Link 2</a></li>
              <li><a href="#">Sub-Link 3</a></li>
              <li><a href="#">Sub-Link 4</a></li>
             </ul>      
              </li>


              <li><a href="#">Contact Us</a></li>
        </ul>

 </div>

还有 .css ：

ul#menu {
   float: left;
  margin: 0;
  width: auto;
    padding: 0px 40px 0px;
    background: #333; color: #fff;
    line-height: 100%;
}

ul#menu li {
  display: inline; 
}


/* top level link */
ul#menu a {
  float: left;
  padding: 10px 16px;
  margin-right: 0px;
  background: #789; color: #fff;
  text-decoration: none;
  border-right: 1px solid #e2e2e2;
}

/* main level link hover */
ul#menu a.current {
  background: #f60; color: #fff;
}


ul#menu li:hover > a {
  color: #fff; background: #ff4500;
  text-decoration: underline;
}

/* dropdown */
ul#menu li:hover > ul {
    display: block; /* shows the sub-menu (child ul of li) on hover */
}

/* sub level list */
ul#menu ul {
    display: none; /* hides the sub-menu until you hover over it */
    margin: 0;
    padding: 0;
    width: 140px;
    position: absolute;
    top: 35px;
    left: 0;
    background: #000;
    border: solid 1px #ccc;
}

ul#menu ul li {
    float: none;
    margin: 0;
    padding: 0;
}

ul#menu ul a {
    font-weight: normal;
    background: #9BB3BF; color: #036;
}

/* sub levels link hover */
ul#menu ul li a:hover {
color: #036; background: #DDDF99;
}

Answer 1

如果您可以随意更改 CSS 样式，为什么不考虑做这样的事情。为什么不试试这种 CSS 样式？

HTML

<ul class="nav">
    <li>
        <a href="#">Menu 1</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 2</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 3</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
</ul>

CSS

* {font-family: "Segoe UI", Tahoma;}
ul.nav {border-bottom: 1px solid #999;}
ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
ul.nav > li:hover ul {display: block;}
ul.nav > li ul li {display: block;} /* Vertical Menu */
ul.nav > li ul li {display: inline-block;} /* Horizontal Menu */

小提琴：
http://jsfiddle.net/vMuxA/（垂直菜单）
http://jsfiddle.net/vMuxA/1/（水平菜单）

Answer 2

如果不想使用：position:relative，则使用：left:auto;，而不是：left:0; http://codepen.io/anon/pen/KAGhL 但是相对位置将很有用，并且可以设置 z-index 以将菜单保持在其他元素的顶部