Question

我无法正确显示下拉菜单项。列表中的每个项目（其中4个）显示在彼此之上。非常感谢任何帮助。

这是我的HTML：

<nav>

            <ul >
                <li><a href='#'><span>SERVICES</span></a>
                    <ul>
                        <li><a href='../escuela_eng.html'><span>Equest Sch</span></a></li>
                        <li><a href='../hst_eng.html'><span>Horse Assist </span></a></li>
                        <li><a href='../car_eng.html'><span>Care and Recuperation</span></a></li>
                        <li><a href='../ht_eng.html'><span>Training</span></a></li>
                    </ul>

            </ul>
        </nav>

和css：

nav 
{
    position:absolute;
    right:0px;
    bottom:0;
    left:-.7em;
}       


nav ul
{
        list-style:none;
}

nav ul li
{
        display:relative;
        float:left;
        padding:0px  15px;
}

nav ul li ul {
    display: none; 
     position:relative;
     top:15px;
     left:0;
}

ul li ul li {
     display:block;
     float:none;
     position:absolute;
     background: #F0EFE7;
     padding:0px 10px;
    }

ul li:hover ul {
     display:block;
     position:relative;
     margin-left:-17px; 
 }


nav ul li a
{
    font-family: 'HelveticaNeue-UltraLight', cursive;
    text-transform:uppercase;
    transition: all .25s ease;
    position:relative;
    float:left;
}

nav ul li a:hover
{
    color:#E56038;
}

非常感谢您的帮助

Answer 1

删除'position：absolute'并添加'clear：both;溢出：汽车;”到{{1}}

小提琴：http://jsfiddle.net/kc79mwbr/

Answer 2

<style>
  nav 
  {
    position:absolute;
    right:0px;
    bottom:0;
    left:-.7em;
  }
  
  
  
  nav ul
  {
    list-style:none;
  }
  
  nav ul li
  {
    /*        display:block;
    */
    /*        float:left;
    */
    padding:0px  15px;
  }
  
  nav ul li ul {
    display: none;
    
    /*     position:relative;
    */
    top:15px;
    left:0;
  }
  
  ul li ul li {
	
    /*     display:block;
    */
    /*     float:left;
    */
    /*     position:relative;
    */
    background: #F0EFE7;
    padding:0px 10px;
  }
  
  ul li:hover ul {
    display:block;
    position:relative;
    margin-left:-17px;
    
  }
  
  
  nav ul li a
  {
    font-family: 'HelveticaNeue-UltraLight', cursive;
    text-transform:uppercase;
    transition: all .25s ease;
    /*    position:relative;
    */
    /*    float:left;
    */
  }
  
  nav ul li a:hover
  {
    color:#E56038;
  }
  /*span,a,li{
  display:block;
}*/
</style>

<nav>
  
  <ul >
    <li>
      <a href='#'>
        <span>
          SERVICES
        </span>
      </a>
      <ul>
        <li>
          <a href='../escuela_eng.html'>
            <span>
              Equest Sch
            </span>
          </a>
        </li>
        <li>
          <a href='../hst_eng.html'>
            <span>
              Horse Assist 
            </span>
          </a>
        </li>
        <li>
          <a href='../car_eng.html'>
            <span>
              Care and Recuperation
            </span>
          </a>
        </li>
        <li>
          <a href='../ht_eng.html'>
            <span>
              Training
            </span>
          </a>
        </li>
      </ul>
      
    </ul>
</nav>

我评论了很多定位和浮动。我认为他们造成了问题。如果您希望它具有一定的宽度，您可以在菜单上放置最大宽度。

Answer 3

请尝试此代码

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style>
nav {
    position:absolute;
    right:0px;
    /*bottom:0;*/
    left:-.7em;
}       


nav ul{
    list-style:none;
}

nav ul li{
    display:relative;
    float:left;
    padding:0px  15px;
}

nav ul li ul {
    display: none; 
    position:relative;
    /*you will need set top margine in such a way that there wont be any blank space between parent menu item and sub menu items*/
    top:15px;
    left:0;
    /*line below will prevent displacement of submenu towards right*/
    padding-left: 0;
}

ul li ul li {
    display:block;
    float:none;
    /*position:absolute;*/
    background: #F0EFE7;
    padding:0px 10px;
    overflow: auto;
    clear: both;
}

ul li:hover ul {
     display:block;
     position:relative;
     /*margin-left:-17px; */
 }


nav ul li a{
    font-family: 'HelveticaNeue-UltraLight', cursive;
    text-transform:uppercase;
    transition: all .25s ease;
    position:relative;
    float:left;
}

nav ul li a:hover{
    color:#E56038;
}
</style>
</head>
<body>
<nav>

            <ul >
                <li><a href='#'><span>SERVICES</span></a>
                    <ul>
                        <li><a href='../escuela_eng.html'><span>Equest Sch</span></a></li>
                        <li><a href='../hst_eng.html'><span>Horse Assist </span></a></li>
                        <li><a href='../car_eng.html'><span>Care and Recuperation</span></a></li>
                        <li><a href='../ht_eng.html'><span>Training</span></a></li>
                    </ul>

            </ul>
        </nav>                                  
</body>
</html>

您会看到以下更改

ul li ul li不需要position:absolute - 这是子菜单项相互重叠的主要原因。
仅用于测试目的，我评论了nav＆＃39; s bottom:0;

很少有建议

请将课程应用到ul和li＆＃39>
更有效地管理padding和magines。

请参阅以下链接以获取更多信息

您的疑虑

我在Firefox中测试了这段代码，我可以选择菜单项。
在回答中提供的更新代码中已经处理了子菜单项的位移
要防止某些对齐/浮动问题（引用Latest Evetns and Contact）链接，您需要使用FLOAT属性对其进行测试。

css菜单项彼此重叠

3 个答案: