html-css - 如何使opeanable垂直菜单 [英] html-css-how to make opeanable vertical menu

问题描述

我要制作如下图片的菜单：

I want to make a menu like this image :

当鼠标悬停在右侧菜单上的每个项目上时，它会在其旁边打开一个框。如您所见，当鼠标悬停在每个菜单，它打开一个框旁边的菜单，它覆盖了网站上的其他元素。

When I hover on each item on right menu , it opens a box beside it.As you can see, when mouse hover on each menu , it opens a box beside the menu and it come over other elements on the site .

我做了一些事，但没有附近。

I've done somethings but nothing near it .

推荐答案

如果我理解你正确的尝试：

If i understand you correct try with this:

strong> HTML

HTML

<ul>
    <li>
        <a href="#">Link</a>
        <div>something</div>
    </li>
    <li>
        <a href="#">Link</a>
        <div>something</div>
    </li>
</ul>

CSS

ul {
    float: right;
}

ul li > div {
    display: none;
    width: 500px;
    height: 300px;
    position: absolute;
    right: 300px;
    top: 0;
    background: #eee;
}

ul li:hover > div {
    display: block;
}

ul li {
    position: relative;
    width: 300px;
}

ul 菜单和 div 是白色框。他会在悬停时看到。

The ul is the menu and the div is the white box. He will get visible on hover. For better view add css.

如果您有其他标记，请提供。

If you have other markup please provide it.

https://jsfiddle.net/58hzg54c/

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