Question

I have a menu nav function in css3 and 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>

but How can the submenu be like:

instead of:

–Fiddle-
here is fiddle

Answer 1

I understand what you are looking for and have made my jsfiddle as close as possible to yours. Instead of using the images you provided, I used icon fonts, which are useful if you plan on using many images. I got my icon font from Keyamoon at icomoon.io. It’s a really good tool to have and you should definitely use it for any other icons you need. I picked mine from Icon Minia by Egemen Kapusuz. You can see the icons I used and if those are the only ones you need just download the files from the @font-face urls in the jsfiddle, or from here:

@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;
}

You can just copy the links from here and it will give you the font file to download if you only need these 3 icons. Icon fonts are great because instead of loading 1 image for each background or icon or whatever, you can package the icon fonts all together into 1 HTTP request, making them more efficient in the transfer, and also more customizable. Icon fonts are just a font, so you can also manipulate them much more easily; you can change the color of the font, the anti-aliasing, just like a real text font.

I rewrote your code with some jQuery because yours seemed very jumbled and a little hard to understand, so if you would like to use my exact jsfiddle, you will need to add a jquery source link either from a CDN or host your own copy on your server. jquery.com will have tons of info about that.

So for my HTML:

HTML:

<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>

The html has some new attributes, which I titled data-icon. I used these to incorporate the icons from the icon font without adding an official element in the DOM. Browser support for this is a little new, so you should look into a redundant icon scheme just in case users are using an old browser that doesn’t support icon fonts and the other new features that you also had like border-radius and transitions.

The CSS was modified a lot to use psuedo selectors, which are very useful. Additionally, I now have the nav bar working from jQuery, so it should be supported well because jQuery is a cross-browser JavaScript libary.

The only thing I couldn’t fix was this little problem where the hovered text in the 2nd navigation level would jump, I don’t know why that happens, I will look into it, but for now, this is what I was able to produce for you.