sub-menu always visible

Can you link your site?

Hej Jingz,
Do you make classes in CSS for all your pages?
In CSS I think you should investigate the use og the “child selector”. Without knowing the rest of your CSS something like:

ul>ul.sub-menu {
display:block;
}

As I read your CSS it is like the combined use of two classes in a HTML tag.

Hi,

the website is still on localhost and not available online.

But here is the content of the style.css in the child-theme-folder:

@import url("../twentythirteen/style.css");

.site, .navbar {
max-width: 1462px;
width: 100%;
}

.site-header .home-link {
max-width: 1462px;
width: 100%;
padding: 0;
min-height: 1px;
}

a.home-link img {
max-width: 1462px;
width: 100%;
height: auto;
}

body {
color: #295b60;
font-family: 'Yanone Kaffeesatz', sans-serif;
}

h1, h2, h3, h4, h5, h6, .widget .widget-title {
font-family: 'Yanone Kaffeesatz', sans-serif;
}

.widget .widget-title {
font-style: normal;
}

h1.entry-title {
font-size: 22px;
}

.site {
border: 0;
}

.site-header {
background: none!important;
	}

.navbar{
text-transform: uppercase;
background: transparent;
position: relative;
top: -48px;
}

ul.nav-menu {
background: #5d9ba5;
padding-right: 0!important;
}

.main-navigation {
left: 180px;
max-width: 1100px;
}

.entry-header, .entry-content, .entry-summary, .entry-meta {
margin-left: 370px;
}

.sidebar .entry-header, .sidebar .entry-content, .sidebar .entry-summary, .sidebar .entry-meta {
    max-width: 1040px;
    padding: 0px 286px 0px 150px;
}

.site-footer .sidebar-container, .widget {
background: #295b60;
}

.nav-menu li a {
color: #fff;
font-size: 18px;
}

.nav-menu li:hover > a, .nav-menu li a:hover, .nav-menu li:focus > a, .nav-menu li a:focus, .nav-menu .current_page_item > a, .nav-menu .current_page_ancestor > a, .nav-menu .current-menu-item > a, .nav-menu .current-menu-ancestor > a {
color: #5d9ba5;
font-style: normal;
background: #fff;
}

ul.sub-menu {
border: 0!important;
}

ul.sub-menu li a {
background: #295B60;
}

ul.sub-menu li a:hover {
color: #295B60;
background: #ededea;
}

.page-id-9 ul>ul.sub-menu {
display:block;
}

.site-footer a, .site-footer .widget a {
color: #fff;
}

.site-footer .widget-title {
color: #37a4b0;
text-transform: uppercase;
}

.widget {
text-transform: uppercase;
}

.widget ul li {
line-height: 1em;
}

Thank you guys for help.
I am good with css, but here I have no idea ;o)

This is an old post, but maybe this can help someone else. The fix for this isn’t in the media query; in your child theme’s style.css file, look for this (around line 888):

.nav-menu .sub-menu,
.nav-menu .children {
	background-color: #220e10;
	border: 2px solid #f7f5e7;
	border-top: 0;
	padding: 0;
	position: absolute;
	left: -2px;
	z-index: 99999;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

and replace it with this:

.nav-menu .sub-menu,
.nav-menu .children {
	background-color: #220e10;
	border: 2px solid #f7f5e7;
	border-top: 0;
	padding: 0;
	position: absolute;
	left: -2px;
	z-index: 99999;
	height: 100%;
	width: 100%;
	overflow: visible;
	clip: rect(1px, 1px, 1px, 1px);
}

If you want to indent the children in your mobile menu, in your mobile query, use text-indent or margin-left. Something like this:

.toggled-on .nav-menu li > ul {
	background-color: transparent;
	display: block;
	float: none;
	margin-left: 20px;
	position: relative;
	left: auto;
	top: auto;
}