Html 在现有导航菜单中进行子菜单垂直布局

我有一个菜单导航功能在css3和html

<nav>
<ul>
<li><a href="#" >Sec1</a></li>
    <li><a href="#" >Sec2</a></li>
    <li><a href="#" class="current">Sec3</a>
    <ul class="menu">
        <li><a href="#" class="documents">Documents</a></li>
        <li><a href="#" class="messages">Messages</a></li>
        <li><a href="#" class="signout">Sign Out</a></li>
    </ul></li>
<li><a href="#" >Sec4</a></li>

</ul>
</nav>

但是，子菜单是什么样子的：

而不是：

--小提琴-

---

我对您的CSS和Html文件做了一些更改

Css:

HTML

我了解您在寻找什么，并已使我的JSFIDLE尽可能接近您的JSFIDLE。我没有使用您提供的图像，而是使用了图标字体，如果您计划使用许多图像，图标字体非常有用。我从Keyamoon获得了我的图标字体。这是一个非常好的工具，你一定要把它用在任何你需要的图标上。我从Egemen Kapusuz的图标Minia中挑选了我的。您可以看到我使用的图标，如果您只需要这些图标，请从中的@font-face URL下载文件，或从此处下载：

@font-face {
    font-family: 'IHK';
    src:url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.eot');
    src:url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.eot?#iefix') format('embedded-opentype'),
        url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.svg#IHK') format('svg'),
        url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.woff') format('woff'),
        url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

你可以从这里复制链接，如果你只需要这3个图标，它会给你下载的字体文件。图标字体非常好，因为您不必为每个背景或图标加载一个图像，而是可以将图标字体全部打包到一个HTTP请求中，使它们在传输过程中更高效，也更可自定义。图标字体只是一种字体，因此您也可以更轻松地操纵它们；你可以改变字体的颜色，消除锯齿，就像一个真正的文本字体

我用一些jQuery重写了您的代码，因为您的代码看起来非常混乱，有点难以理解，所以如果您想使用我的确切JSFIDLE，您需要添加一个来自CDN的jQuery源链接，或者在服务器上承载您自己的副本。将会有很多关于这个的信息

因此，对于我的HTML：

HTML:

html有一些新属性，我把它们命名为数据图标。我使用这些来合并图标字体中的图标，而无需在DOM中添加正式元素。浏览器对此的支持有点新，因此您应该研究冗余图标方案，以防用户使用的旧浏览器不支持图标字体和其他新功能，如

边框半径

和

过渡

CSS被大量修改以使用psuedo选择器，这非常有用。此外，我现在有了从jQuery运行的导航栏，因此它应该得到很好的支持，因为jQuery是一个跨浏览器JavaScript库

---

我唯一无法解决的问题是，第二个导航级别中的悬停文本会跳转，我不知道为什么会发生这种情况，我会研究它，但现在，我能够为您制作。

您试图实现的目标还不是很清楚，你能解释一下你想要什么吗，因为你有多个项目分散在那把小提琴里……是的，我想要一个包含4个部分的菜单，在第3部分，我想要一个垂直的子菜单。如何做到这一点？我发布了一个JSFIDLE并详细解释了我所做的事情，你应该看一看，让我知道如果你想发生任何其他事情，我会尽我最大的努力。有没有办法得到如图所示的结果？是的，可以。我编辑了这篇文章。太棒了！我想复制你的小提琴，我已经在使用jquery添加它：

够了吗？我正在做一些测试我建议购买最新版本的jquery，从2013年1月19日起为1.9.0哦，我发现了小故障的问题，我会在这里给你一个新的url：并更新我答案中的那个。我不会像你的小提琴一样得到子菜单，即使添加你编写的css和jquery，你认为我遗漏了什么吗？我正在添加

我怀疑这与字体有关…您是否有测试的网站/服务器，或者这是本地的？

<nav>
<ul>
<li><a href="#" >Sec1</a></li>
    <li><a href="#" >Sec2</a></li>
    <li><a href="#" class="current">Sec3</a>
    <ul class="menu">
        <li><a href="#" class="documents">Documents</a></li>
        <li><a href="#" class="messages">Messages</a></li>
        <li><a href="#" class="signout">Sign Out</a></li>
    </ul></li>
<li><a href="contacto.html" >Sec4</a></li>

</ul>
</nav>

@font-face {
    font-family: 'IHK';
    src:url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.eot');
    src:url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.eot?#iefix') format('embedded-opentype'),
        url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.svg#IHK') format('svg'),
        url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.woff') format('woff'),
        url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

<nav>
    <ul>
        <li><a href="#" >Sec1</a></li>
        <li><a href="#" >Sec2</a></li>
        <li><a href="#" class="current">Sec3</a></li>
        <li><a href="contacto.html" >Sec4</a></li>
        <ul class="menu">
            <li><a href="#" class="documents" data-icon="&#xe000">Documents</a></li>
            <br>
            <li><a href="#" class="messages" data-icon="&#xe001">Messages</a></li>
            <br>
            <li><a href="#" class="signout" data-icon="&#xe002">Sign Out</a></li>
        </ul>
    </ul>
</nav>