html - 子菜单定位问题

Question

这是我目前正在使用的，我正在尝试为团队部分创建一个下拉菜单，但它一直显示在团队菜单选择的左侧。此处供引用:

http://lakenonabaseballassociation.com/

CSS

.header 
{
    background: none ;
    height: 50px;
    width:960px;
    margin: auto auto;
    padding: 25px 0 0 33px;
}
.header ul 
    {
        float:left;
        list-style:none;
        margin:0;
        overflow:hidden;
        padding:9px 9px 0 0;
    }
    .header ul li 
        {
            float:left;
        }
    .header ul li a 
        {
            color:#656465;
            font-family:bevanregular;
            font-size:16px;
            font-weight:400;
            letter-spacing:.025em;
            line-height:30px;
            text-decoration:none;
            text-transform:uppercase;
            margin: 175px 11px 0 11px;
        }
    .header ul li.selected a, .header ul li a:hover 
        {
            color:#026593;
        }

以此为基本菜单

<ul>
<li>
    <a href="/">Home</a>|
</li>
<li>
    <a href="/teams">Teams</a>|
    <!--<ul>
     <li><a href="#">8U</a></li>
     <li><a href="#">9U</a></li>
     <li><a href="#">10U</a></li>
     <li><a href="#">11U</a></li>
  </ul>-->
        </li>
<li>
    <a href="/schedule">Schedule</a>|
</li>
<li>
    <a href="/forms">Forms</a>|
</li>
<li>
    <a href="/sponsors">Sponsors</a>|
</li>
<!--
<li>
    <a href="/news">News</a>|
</li>
-->
<!--
<li>
    <a href="/media">Media</a>|
</li>
-->
<li>
    <a href="/about-us">About</a>|
</li>
<li>
    <a href="/contact-us">Contact</a>
</li>
<li>&nbsp;</li>

如果我将 CSS 中的位置更改为相对位置，它会将它从它所在的位置移到图像的左侧。中心位置会将联系链接移到 Logo 上。我想我在子菜单的 CSS 中遗漏了一些额外的编码，但我已经尝试了一些方法，但它们似乎不起作用。获得此功能的任何帮助都会很棒。提前致谢

Answer 1

正如我在评论中提到的，您发布的代码不包含下拉菜单的任何样式。这是一个 fiddle ，展示了如何根据现有标记和样式创建纯 CSS 下拉菜单:

http://jsfiddle.net/w3khgygb/2/

.header ul {
    overflow: visible;
}
.header ul li {
    position: relative;
}

/* Dropdown */
 .header ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ddd;
}
.header ul ul li {
    float: none;
}
.header > ul > li:hover > ul {
    display: block;
}

请注意，您网站上的顶级 ul 当前将 overflow 设置为 hidden，这将隐藏任何下拉菜单。如您所见，我已将溢出更改为可见。