带子菜单的纯 css 垂直菜单 [英] pure css vertical menu with submenu

问题描述

我做了我的研究并且能够复制我正在寻找的东西，很好——我只是需要一个更具体的垂直、纯 CSS 菜单的帮助.

我希望我的子菜单弹出窗口出现在 a 左侧 10px 的位置，而不是像 Internet 上的大多数示例一样的 li 属性.我也在寻找最简单、纯 CSS 的菜单类型——没什么特别的.

这是我到目前为止所做的:

<ul class="顶级"><li><a href="#">这是一个长文本</a><ul class="sub-level"><li><a href="#">子菜单项 1</a></li><li><a href="#">子菜单项 2</a></li><li><a href="#">子菜单项 3</a></li><li><a href="#">子菜单项 3</a></li><li><a href="#">关于</a></li><li><a href="#">在此处与我联系</a></li><li><a href="#">帮助</a><ul class="sub-level"><li><a href="#">子菜单项 1</a></li><li><a href="#">子菜单项 2</a></li><li><a href="#">子菜单项 3</a></li>

我的CSS:

#nav {border:1px solid cyan;}/* 顶层菜单 */#nav ul.top-level {border:1px 纯红色;}#nav ul.top-level li {position:relative;}/* 子级菜单 */#nav ul.sub-level {border:1px 纯黄色;}#nav ul.sub-level {display:none;}/* 隐藏 *//* 悬停子菜单*/#nav ul.top-level li:hover .sub-level {display: block;位置:绝对；顶部:5px;}

当我将鼠标悬停在 a HTML 锚点，而不是 li 和单击的 a 左侧 10px 时，我该如何制作它以便子级菜单弹出代码>一个锚点?谢谢.

解决方案

试试这个，我认为它会有所帮助

HTML

 
<ul class="顶级"><li><a href="#">这是一个长文本</a><ul class="sub-level"><li><a href="#">子菜单项 1</a></li><li><a href="#">子菜单项 2</a></li><li><a href="#">子菜单项 3</a></li><li><a href="#">子菜单项 3</a></li><li><a href="#">关于</a></li><li><a href="#">在此处与我联系</a></li><li><a href="#">帮助</a><ul class="sub-level"><li><a href="#">子菜单项 1</a></li><li><a href="#">子菜单项 2</a></li><li><a href="#">子菜单项 3</a></li>

CSS

#nav {font-size:0.75em;宽度:150px;}#nav ul {边距:0px;填充:0px;}#nav li {列表样式:无；}ul.top-level {background:#FFFFFF;}ul.top-level li {边框:#FF0000 实心；边框宽度:1px；}#nav ul.sub-level {border:1px 纯黄色;}#导航{颜色:#000000；光标:指针；显示:块；高度:25px；行高:25px；文本缩进:10px；文字装饰:无；宽度:100%；}#导航a:悬停{文字装饰:下划线；}#nav li:悬停{背景:#f90；位置:相对；}ul.sub-level {显示:无；}li:hover .sub-level {背景:#999；边框:#fff 实心；边框宽度:1px；显示:块；位置:绝对；左:75px；顶部:5px；}ul.sub-level li {边界:无；向左飘浮;宽度:150px；}#nav .sub-level {背景:#FFFFFF；}

I did my research and was able to replicate what I'm looking for, well kind of--I just need help with a more specific vertical, pure CSS, menu.

I want my sub-menu popup to appear 10px to the left of the a not the li attribute like most example found on the internet. I'm also looking for the most simple, pure CSS, type of menu--Nothing fancy.

Here's what I've done so far:

<div id="nav">
    <ul class="top-level">
        <li><a href="#">This is a long text</a>
            <ul class="sub-level">
                <li><a href="#">Sub Menu Item 1</a></li>
                <li><a href="#">Sub Menu Item 2</a></li>
                <li><a href="#">Sub Menu Item 3</a></li>
                <li><a href="#">Sub Menu Item 3</a></li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact me here</a></li>
        <li><a href="#">Help</a>
            <ul class="sub-level">
                <li><a href="#">Sub Menu Item 1</a></li>
                <li><a href="#">Sub Menu Item 2</a></li>
                <li><a href="#">Sub Menu Item 3</a></li>
            </ul>
        </li>
    </ul>

my css:

#nav {border:1px solid cyan;}
    /* top level menu */
    #nav ul.top-level {border:1px solid red;}
    #nav ul.top-level li {position:relative;}

    /* sub level menu */
    #nav ul.sub-level {border:1px solid yellow;}
    #nav ul.sub-level {display:none;} /* hide */

    /* hover the sub menu*/
    #nav ul.top-level li:hover .sub-level {display: block; position:absolute; top:5px;}

How do I make it so the sub level menu pops up when I hover the a HTML anchor, not the li, and 10px to the left of the clicked a anchor? Thanks.

解决方案

Try this one and I think it will help

HTML

    <div id="nav">
    <ul class="top-level">
        <li><a href="#">This is a long text</a>
            <ul class="sub-level">
                <li><a href="#">Sub Menu Item 1</a></li>
                <li><a href="#">Sub Menu Item 2</a></li>
                <li><a href="#">Sub Menu Item 3</a></li>
                <li><a href="#">Sub Menu Item 3</a></li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact me here</a></li>
        <li><a href="#">Help</a>
           <ul class="sub-level">
                <li><a href="#">Sub Menu Item 1</a></li>
                <li><a href="#">Sub Menu Item 2</a></li>
                <li><a href="#">Sub Menu Item 3</a></li>
            </ul>
        </li>
    </ul>
</div>

​

CSS

#nav {font-size:0.75em; width:150px;}
#nav ul {margin:0px; padding:0px;}
#nav li {list-style: none;} 

ul.top-level {background:#FFFFFF;}
ul.top-level li {
 border: #FF0000 solid; 
 border-width: 1px;
}
 #nav ul.sub-level {border:1px solid yellow;}
#nav a {
 color: #000000;
 cursor: pointer;
 display:block;
 height:25px;
 line-height: 25px;
 text-indent: 10px;
 text-decoration:none;
 width:100%;
}
#nav a:hover{
 text-decoration:underline;
}

#nav li:hover {
 background: #f90;
 position: relative;
}
ul.sub-level {
    display: none;  
}
li:hover .sub-level {
    background: #999;
    border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 75px;
    top: 5px;
}
ul.sub-level li {
    border: none;
    float:left;
    width:150px;
}

#nav .sub-level {
    background: #FFFFFF;
}

这篇关于带子菜单的纯 css 垂直菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！