如何在Css中获取子菜单&；HTML

如何在Css和HTML中获得一个子菜单，如我的图片。。我试过并在谷歌上搜索我的要求，但没有找到任何解决方案 我的要求是，当我用鼠标滑过任何菜单时，它的子菜单应该只显示在页面的一侧，就像我上面的图片一样 我可能不会被谷歌搜索到你们可能知道的任何特定关键词

有没有人知道我的想法…在过去的几天里一直坚持着这个

我试过的一些代码

HTML

div id=“菜单”>






#菜单{
宽度：550px；
高度：35px；
字体大小：16px；
字体系列：塔荷马，日内瓦，无衬线；
字体大小：粗体；
文本对齐：居中；
文本阴影：3px 2px 3px#333333；
背景色：#8AD9FF；
边界半径：8px；
}
#菜单ul{
高度：自动；
填充：8px 0px；
边际：0px；
}
#菜单li{
显示：内联；
填充：20px；
}
#菜单a{
文字装饰：无；
颜色：#00F；
填充：8px 8px 8px 8px；
}
#菜单a：悬停{
颜色：#F90；
背景色：#FFF；
}

希望这就是你想要实现的

    <ul class="main">
   <li>
      Explore
      <ul class="sub">
         <li>Sub menu 1</li>
         <li>Sub menu 2</li>
      </ul>
   </li>
   <li>More
      <ul class="sub">
         <li>Sub menu 3</li>
         <li>Sub menu 4</li>
      </ul>
   </li>
</ul>

---

一天的开始就是这样

HTML

<ul class="menu">
            <li><a href="">some text</a></li>
            <li><a href="">some text</a>
                <ul>
                    <li><a href="">some textsome textо</a></li>
                    <li><a href="">some textsome text</a></li>
                    <li><a href="">some textsome text</a></li>
                    <li><a href="">some textsome text</a></li>
                    <li><a href="">some textsome text</a></li>
                </ul>
            </li>
            <li><a href="">some text</a></li>
            <li><a href="">some text</a></li>
            <li><a href="">some text</a></li>
            <li><a href="">some text</a></li>
            <li><a href="">some text</a></li>
        </ul>

您的代码在哪里？我是说你做了什么？你认为你的用户会通过红线移动鼠标光标到子菜单吗？看起来很可怕移动的鼠标，移动的鼠标，快到了…该死的鼠标悬停在红色条上：（使用Js/JQ和点击操作很容易。CSS版本会很糟糕。@kumartyr:试试这个，让我们知道它是否是预期的版本。它没有回答实际答案中提出的具体问题posted@Alex：Paulie_D的评论是对的。它没有解决我的问题，而是创建了一个带有子菜单的菜单。无论如何回复的nks没有回答客户提出的具体问题OP@Paulie_D：实际答案尚未公布我不知道这意味着什么。OP知道如何创建子菜单（至少我认为是这样）定位才是问题所在。@kumartyr:试试这个，通过“更多”链接告知它是否是预期的，然后尝试使用它的子菜单……看到问题了吗？

ul,li,ol{
    list-style-type:none;
    margin:0;padding:0;
}
li{
    float:left;
    margin:10px;
    width:100px;
    border:1px solid red;
}

ul.main li ul.sub li{
    display:none;
}
ul.main li:hover ul.sub li{
    display:block;
    float:left;
}

ul.sub{
    position: absolute;
    border-top: 10px solid red;
}

<ul class="menu">
            <li><a href="">some text</a></li>
            <li><a href="">some text</a>
                <ul>
                    <li><a href="">some textsome textо</a></li>
                    <li><a href="">some textsome text</a></li>
                    <li><a href="">some textsome text</a></li>
                    <li><a href="">some textsome text</a></li>
                    <li><a href="">some textsome text</a></li>
                </ul>
            </li>
            <li><a href="">some text</a></li>
            <li><a href="">some text</a></li>
            <li><a href="">some text</a></li>
            <li><a href="">some text</a></li>
            <li><a href="">some text</a></li>
        </ul>