Question

我有一个垂直菜单栏（就像所有网站一样）...我想在其中一个元素中添加一个垂直子菜单。

这就是我目前所拥有的：

这就是我想要的：

任何人都知道如何实现这一目标？注意：我尝试使用表格，但它没有显示列表背景，并带有透明的表格！

更新

这就是我所拥有的，包括我试图添加的表格......（对不起，代码有点长）。

<ul>
    <li><a href="index.html">HOME</a></li>
    <li><a href="about.html">PAGES</a>
        <ul>
            <li><a href="about.html">About Page</a></li>
            <li><a href="page-left-sidebar.html">Page with Left Sidebar</a></li>
            <li><a href="page-right-sidebar.html">Page with Right Sidebar</a></li>
            <li><a href="page-full-width.html">Full-width Page</a></li>
            <li><a href="faq.html">F.A.Q</a></li>
        </ul>
    </li>
    <li><a href="typography.html">TYPOGRAPHY</a>
        <ul>
            <li><a href="typography.html#Heading">Heading Tags</a></li>
            <li><a href="typography.html#Column">Column Styles</a></li>
            <li><a href="typography.html#Highlight">Highlights</a></li>
            <li><a href="typography.html#List">List Styles</a></li>
            <li><a href="typography.html#Block">Blockquotes</a></li>
            <li><a href="typography.html#Image">Image Placement</a></li>
        </ul>
    </li>
    <li><a href="porto-3cols.html">PORTOFOLIO</a>
        <ul>
            <li><a href="porto-2cols.html">Porto - 2 Columns</a></li>
            <li><a href="porto-3cols.html">Porto - 3 Columns</a></li>
            <li><a href="porto-4cols.html">Porto - 4 Columns</a></li>
        </ul>
    </li>
    <li><a href="shortcodes.html">SHORTCODES</a>
        <ul>
            <li><a href="shortcodes.html#Toggle">Toggle</a></li>
            <li><a href="shortcodes.html#Tabbed">Content Tabs</a></li>
            <li><a href="shortcodes.html#Caption">Image Caption</a></li>
            <li><a href="#">Sample Submenu</a>
                <ul>
                    <li><a href="#">Sample 01</a></li>
                    <li><a href="#">Sample 02</a></li>
                    <li><a href="#">Sample 03</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="blog.html">BLOG</a></li>
    <li><a href="contact.php">CONTACT</a>
    <ul>
        <li><a href="porto-2cols.html"><img src="pix/portopix/porto_3cols_09.jpg" alt="Sample Image" />ASD</a></li>
        <li>
            <table style="background:inherit">
                <tr>
                    <td>asd</td>
                    <td>asd</td>
                </tr>
            </table>
        </li>
    </ul>
</ul>

Answer 1

您可以使用以下内容替换上一部分（表格中的项目符号点）：

<ul>
    <li><a href="porto-2cols.html"><img src="pix/portopix/porto_3cols_09.jpg" alt="Sample Image" />ASD</a>
        <div id="submenu">
            <h3>Title</h3>
            <ul>
                <li> first </li>
                <li> second </li>
                <li> third </li>
                <li> fourth</li>
            </ul>
        </div>
    </li>
</ul>

（顺便说一下，你忘记了代码中的</li>）

并将以下内容添加到CSS样式表中：

 #submenu {
     width: 130px;
 }

 #submenu ul {
     width: 100%;
 }

 #submenu li{
     width: 50px;
     display: inline-block;
 }

这将达到类似于我想要实现的效果。显然，您必须根据需要调整值。

这里有一个示例： http://jsfiddle.net/ramsesoriginal/4ML6G/

修改我认为你想得到的（并且正在使用我的代码）是：

+------------------+ | | +---+--------------+ | | +--------------+ | | +--------------+ | | +------------------+ | | +---+--------------+ | | +--------------+ | | +------------------+ | | +---+--------------+ | | +--------------+ | | | +---+ +---+ | | +---+ +---+ | | +---+ +---+ | | +---+ +---+ | +--------------+

如果你看一下jsfiddle（http://jsfiddle.net/ramsesoriginal/4ML6G/），你会发现它就像那样。你想尝试不同的东西吗？

在水平显示中添加菜单项

1 个答案: