Html css菜单项相互重叠_Html_Css_Drop Down Menu

Html css菜单项相互重叠

html css drop-down-menu

Html css菜单项相互重叠,html,css,drop-down-menu,Html,Css,Drop Down Menu,我无法正确显示下拉菜单项。列表中的每个项目（其中4个）都显示在彼此的顶部。非常感谢您的帮助这是我的html： <nav> <ul > <li><a href='#'><span>SERVICES</span></a> <ul> <li><

我无法正确显示下拉菜单项。列表中的每个项目（其中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>

非常感谢您的帮助

删除“位置：绝对”并添加“清除：两者都有；溢出：自动；'到

ul li ul li

小提琴：


导航
{
位置：绝对位置；
右：0px；
底部：0；
左：-.7em；
}
导航ul
{
列表样式：无；
}
李国荣
{
/*显示：块；
*/
/*浮动：左；
*/
填充：0px 15px；
}
nav ul li ul{
显示：无；
/*位置：相对位置；
*/
顶部：15px；
左：0；
}
ulli ulli{
/*显示：块；
*/
/*浮动：左；
*/
/*位置：相对位置；
*/
背景：#F0EFE7；
填充：0px 10px；
}
ul-li：悬停ul{
显示：块；
位置：相对位置；
左边距：-17px；
}
海军ulli a
{
字体系列：“HelveticaNeue UltraLight”，草书；
文本转换：大写；
过渡：全部.25秒缓解；
/*位置：相对位置；
*/
/*浮动：左；
*/
}
导航ulli a：悬停
{
颜色：#E56038；
}
/*斯潘，a，李{
显示：块；
}*/

请尝试此代码

<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>


导航{
位置：绝对位置；
右：0px；
/*底部：0*/
左：-.7em；
}       
导航ul{
列表样式：无；
}
李国荣{
显示：相对；
浮动：左；
填充：0px 15px；
}
nav ul li ul{
显示：无；
位置：相对位置；
/*您需要设置顶部边框，以便在父菜单项和子菜单项之间不会有任何空白*/
顶部：15px；
左：0；
/*下面的行将防止子菜单向右移动*/
左侧填充：0；
}
ulli ulli{
显示：块；
浮动：无；
/*位置：绝对位置*/
背景：#F0EFE7；
填充：0px 10px；
溢出：自动；
明确：两者皆有；
}
ul-li：悬停ul{
显示：块；
位置：相对位置；
/*左边距：-17px*/
}
海军ulli a{
字体系列：“HelveticaNeue UltraLight”，草书；
文本转换：大写；
过渡：全部.25秒缓解；
位置：相对位置；
浮动：左；
}
导航ulli a：悬停{
颜色：#E56038；
}

您将看到以下更改

```
ulli ulli
```
不需要有
```
位置：绝对值
```
——这是子菜单项相互重叠的主要原因
仅出于测试目的，我评论了
```
nav
```
的
```
底部：0
```


建议很少

请将课程应用于ul
和li

更有效地管理padding
和magines


有关更多信息，请参考以下链接




您的担忧

我已经在Firefox中测试了这段代码，我可以选择菜单项
在答案中提供的更新代码中已注意到子菜单项的位移
为防止某些对齐/浮动问题（参考最新版本和联系人）链接，您需要使用浮动属性对其进行测试

非常感谢Prahad Narsinh Sonar。这在一定程度上解决了问题。但是，下拉菜单现在确实将菜单向右移动（活动和最新事件向右移动，联系人显示在新行上）。有什么办法可以防止这种情况发生吗。此外，下拉菜单显示一种滚动条？这能避免吗？第三件事是，似乎无法再选择下拉菜单。（当我向下滚动时，它们会消失）非常感谢您的时间我更新了答案，解决了您的问题。您可以按照提供的代码进行指示。我现在看到了！提供的代码已更改？我试试这个。谢谢！感谢gopalarju和@Matt Shade为您提供的时间和指导。两者都帮助我理解了我（很多！）的错误。顺致敬意，
<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>