如何使用此 CSS 添加子菜单

Posted 2023-02-16

技术标签:

【中文标题】如何使用此 CSS 添加子菜单【英文标题】：how to add subsmenu with this css 【发布时间】：2013-08-01 23:34:13 【问题描述】：

我想在这个垂直菜单栏上创建一个子菜单。我知道我必须更改 css 才能制作子菜单，但我不能很好地使用 css3。我正在使用的 css 文件不提供子菜单代码。真正的html代码是这样的

      <body><ul class="ca-menu">
            <li>
                <a href="pagehome.php">
                    <span class="ca-icon">D</span>
                    <div class="ca-content">
                        <h2 class="ca-main">Home</h2>
                    </div>
                </a>
            </li>
            <li>
                <a href="settingpage.php">
                    <span class="ca-icon">S</span>
                    <div class="ca-content">
                        <h2 class="ca-main">Setting</h2>
                    </div>
                </a>
            </li>
        </ul></body>

当用户将鼠标悬停到此菜单（设置）时，我想再添加两个垂直子菜单。像这样

    <body><ul class="ca-menu">
            <li>
                <a href="pagehome.php">
                    <span class="ca-icon">D</span>
                    <div class="ca-content">
                        <h2 class="ca-main">Home</h2>
                    </div>
                </a>
            </li>
            <li class='has-sub'>
                <a href="settingpage.php">
                    <span class="ca-icon">S</span>
                    <div class="ca-content">
                        <h2 class="ca-main">Setting</h2>
                    </div>
                </a>
                       <!-- this UL will be openning for new submenu
                       <ul>  
                            <li><a href="settingpage.php">         <!-- Edit Here
                                 <span class="ca-icon">S</span>    <!-- Edit Here
                                 <div class="ca-content">          <!-- Edit Here
                                 <h2 class="ca-main">Submenu 1</h2><!-- Edit Here
                                 </div></a>
                            </li>
                            <li> <a href="settingpage.php">        <!-- Edit Here
                                 <span class="ca-icon">S</span>    <!-- Edit Here
                                 <div class="ca-content">          <!-- Edit Here
                                 <h2 class="ca-main">Submenu 2</h2><!-- Edit Here
                                 </div></a>
                            </li>
                       </ul>
                       this UL will be end for new submenu -->
            </li>
        </ul></body>

这是我正在使用的 CSS3 文件

@font-face 
 font-family: 'WebSymbolsRegular';
 src: url('websymbols/websymbols-regular-webfont.eot');
 src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('websymbols/websymbols-regular-webfont.woff') format('woff'),
    url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
    url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
 font-weight: normal;
 font-style: normal;

.ca-menu
 padding:0;
 margin:5px auto;
 width: 145px;

.ca-menu li
 width: auto;
 height: 50px;
 overflow: hidden;
 position: relative;
 display: block;
 background: #fff;
 -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 margin-bottom: 4px;
 -webkit-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -ms-transition: all 300ms ease-in-out;
 transition: all 300ms ease-in-out;

.ca-menu li:last-child
 margin-bottom: 0px;

.ca-menu li a
 text-align: left;
 width: 100%;
 height: 100%;
 display: block;
 color: #333;
 position: relative;


.ca-icon
 font-family: 'WebSymbolsRegular', cursive;
 font-size: 20px;
 color: #333;
 text-shadow: 0px 0px 1px #333;
 line-height: 25px;
 position: absolute;
 width: 9px;
 left: 2px;
 text-align: center;
 -webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear; 

.ca-content
 position: absolute;
 left: 30px;
 width: 370px;
 height: 60px;
 top: 5px;

.ca-main
 line-height: 25px;
 font-size: 15px;
 -webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear; 

.ca-sub
 font-size: 14px;
 color: #666;

.ca-menu li:hover
 background-color: #000;

.ca-menu li:hover .ca-icon
 color: #f900b0;
 font-size: 120px;
 opacity: 0.2;
 left: -20px;
 -webkit-transform: rotate(20deg);
 -moz-transform: rotate(20deg);
 -ms-transform: rotate(20deg);
 transform: rotate(20deg);

.ca-menu li:hover .ca-main
 color: #f900b0;
 opacity: 0.8;

.ca-menu li:hover .ca-sub
 color: #fff;
 opacity: 0.8;

【问题讨论】：

你能做个小提琴吗？ jsfiddle.net 如果我们能执行这些东西，将会有很大帮助。 jsfiddle.net/v8k7k/1 这是我正在做的例子。箭头是我想要子菜单所在的位置，缩放的字体实际上是像这个演示一样的图标tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index3.html 【参考方案1】：

将此添加到样式表的末尾：

.ca-menu .has-sub > ul  display: none; 
.ca-menu .has-sub:hover > ul 
    display: block;
    position: relative;
    left: 100%;
    top: -100%;
    z-index: 10;
    padding: 0;

.ca-menu li  overflow: visible; 
.ca-menu a  overflow: hidden;

并修改以下内容... ...第 84 行来自：

.ca-menu li:hover .ca-icon

到：

.ca-menu li:hover > a > .ca-icon

...第 94 行来自：

.ca-menu li:hover .ca-main

到：

.ca-menu li:hover > a > .ca-content > .ca-main

jsfiddle

在这里您可以找到关于 CSS 选择器的精彩总结： http://www.w3schools.com/cs-s-ref/css_selectors.asp

【讨论】：

哇，它工作了玛丽亚小姐......谢谢你......但是玛丽亚小姐，子菜单怎么能像菜单设置动画一样......我的意思是子菜单也将具有相同的动画父菜单任何人请帮忙............只需要将子菜单的动画与父菜单相同...... 我在上面编辑了我的答案。我希望它现在对你有用。玛丽亚感谢您的帮助....你让我很开心...我不怎么感谢您...我不能投票，因为我的声誉不够...非常非常感谢... 然后接受答案

以上是关于如何使用此 CSS 添加子菜单的主要内容，如果未能解决你的问题，请参考以下文章

如何为子菜单添加向右箭头和为子菜单添加向下箭头

您知道如何仅使用CSS在移动视图中制作汉堡菜单吗？ [关闭]

使用 jQuery 取消 CSS 悬停行为

如何使用 CSS 选择和设置所有具有 UL 子元素的 LI 元素？ [复制]

如何使用 org.eclipse.ui.menus 向 Eclipse Package Explorer 上下文菜单项添加子菜单条目？