Question

以下是我目前正在使用的内容，我正在尝试为团队部分创建一个下拉菜单，但它一直显示在团队菜单选择的左侧。这里的网站供参考：

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中的位置更改为相对位置，它会将其从图像左侧移动到相对位置。中心位置将移动徽标上的联系链接。我猜我在CSS中为子菜单错过了一些额外的编码，但是我尝试了一些事情并且他们似乎没有工作。获得此功能的任何帮助都会很棒。提前致谢

Answer 1

正如我在评论中提到的，您发布的代码不包含下拉菜单的任何样式。这里有一个小提示，展示了如何根据现有的标记和样式创建一个仅限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，这会隐藏任何下拉菜单。如您所见，我已将溢出更改为visible。

子菜单定位问题

1 个答案: