Question

I’m curious how could I keep the submenu active after the link was hovered? I mean so that it’ll stay active even if you move your mouse elsewhere, so it wouldn’t be annoying to always go back there and hover.

Here’s an example of the navigation menu: –removed it cause it’s fixed–

I’m pretty sure I would have to use jQuery to achieve that? I’m not very experienced with jQuery though. Or is it actually doable with pure css and html too?

Here’s my navigation CSS code:

nav {
    width: 1000px;
    height: 45px;
    margin-bottom: 45px;
    float: left;
    border-radius: 2px;
    line-height: normal;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
    position: relative; }

    nav ul li {
        height: 19px;
        padding: 13px 10px;
        color: #0f41a4;
        float: left;
        text-decoration: none; }

        nav ul li:hover ul { display: block; }


        nav ul li ul:hover { display: block; }

        nav ul li ul {
            width: 999px;
            display: none;
            position: absolute;
            margin-top: 13px;
            background: #F6F6F6;
            background: rgba(250, 250, 250, .5);
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            border: 1px solid #FAFAFA;
            border-bottom: 1px solid #ccc;
            z-index: 9999;
            left: 0px;
            float: left; }

            nav ul li ul li {
                padding: 8px 10px;
                float: left; }

        nav ul li:hover {
            text-decoration: underline;
            background: rgba(0, 0, 0, .03); }

Answer 1

If you just want the submenu to be active always, then why set them to display none, and show on hover. You need javascript/jquery here.

$(".page-item").click(function() {
   $(this).children().find(".children").show();
});