如何检测是否有水平滚动条？

Question

So I'm making this WordPress theme, it's responsive except for this: When I size the window down (but bigger then 600px, because then the menu will change to a mobile version) and hover over a menu item's menu item. It's sometimes to far to the side, so a scroll bar appears. My idea to deal with this problem is to detect when a (horizontal) scroll bar appears and then rearrange the menu. Problem is I don't have any clue how to detect if a scroll bar appears.

I've tried a couple of things but it isn't close to working so there's no need to put the code in here. I've tried some things with jquery, javascript and css but nothing seems to work. Also this is my first theme, so I'm a newbie to these things.

EDIT After a request here is the html, css and jquery (which I used after an answer here.

html:

<div class="menu">
<ul class="nav-menu sf-js-enabled sf-arrows" style="touch-action: pan-y;">
<li class="current_page_item">
<a href="http://localhost/wordpress/">Home</a>
</li>
<li class="page_item page-item-23 page_item_has_children">
<a href="http://localhost/wordpress/groep-8-ers/" class="sf-with-ul">Groep 8-ers</a>
<ul class="children" style="display: none;">
<li class="page_item page-item-1801">
<a href="http://localhost/wordpress/groep-8-ers/andere-info/">Andere info</a>
</li>
<li class="page_item page-item-25 page_item_has_children">
<a href="http://localhost/wordpress/groep-8-ers/de-afdelingen/" class="sf-with-ul">De afdelingen</a>
<ul class="children" style="display: none;">
</li>
</ul>
</li>
<li class="page_item page-item-213 page_item_has_children">
<a href="http://localhost/wordpress/ouders/" class="sf-with-ul">Ouders</a>
<ul class="children" style="display: none;">
<li class="page_item page-item-215 page_item_has_children">
<a href="http://localhost/wordpress/ouders/algemene-schoolzaken/" class="sf-with-ul">Algemene schoolzaken</a>
<ul class="children" style="display: none;">
<li class="page_item page-item-1805 page_item_has_children">
<a href="http://localhost/wordpress/ouders/algemene-schoolzaken/test/" class="sf-with-ul">Test</a>
<ul class="children" style="display: none;">
<li class="page_item page-item-1810">
<a href="http://localhost/wordpress/ouders/algemene-schoolzaken/test/fffff/">fffff</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

css:

.main-navigation {
    position: relative;
    float: left;
    width: 100%;
    display: block;
    clear: both;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    background: #F2F2F2;
    background: hsl(0, 0%, 95%);
}
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}
.main-navigation li {
    float: left;
    position: relative;
}
.main-navigation a {
    display: block;
    padding: 1.1em 1em;
    font-size: 17px;
    font-size: 1.7rem;
    text-decoration: none;
    line-height: 1.3em;
    color: #000;
    color: hsl(0, 0%, 0%);
}
.main-navigation ul ul {
    position: absolute;
    left: 0;
    z-index: 99999;
    display: none;
    float: left;
    padding: 0;
    background: #CFCFCF;
    background: hsl(0, 0%, 81%);
}
.main-navigation ul ul ul {
    left: 100%;
    top: 0;
    background: #9E9E9E;
    background: hsl(0, 0%, 62%);
}

.main-navigation ul ul ul ul{
    background: #6D6D6D;
    background: hsl(0, 0%, 43%);
}

.main-navigation ul ul ul ul ul{
    background: #3D3D3D;
    background: hsl(0, 0%, 24%);
    color: white;
} 

.main-navigation ul ul a {
    width: 200px;
}
.main-navigation ul ul li {
}
.main-navigation li:hover > a {
    color: #000;
    color: hsl(0, 0%, 0%);
    background: #CFCFCF;
    background: hsl(0, 0%, 81%);
}
.main-navigation ul ul :hover > a {
    background: #9E9E9E;
    background: hsl(0, 0%, 62%);
}

.main-navigation ul ul ul :hover > a{
    background: #6D6D6D;
    background: hsl(0, 0%, 43%);
}

.main-navigation ul ul ul ul :hover > a{
    background: #3D3D3D;
    background: hsl(0, 0%, 24%);
    color: white;
}

.main-navigation ul li:hover > ul {
    display: block;
}
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a:hover,
.main-navigation .current-menu-item > a:hover {
    background: #80F77E;
    background: hsla(119, 100%, 50%, 0.4);
    color: #000;
    color: hsl(0, 0%, 0%);
}

.main-navigation .current_page_ancestor {
    background: #4d4d4d;
    background: hsl(0, 0%, 30%);
}

.main-navigation ul ul .current_page_parent,
.main-navigation .current_page_parent .current_page_item > a {
    color: #fff;
    color: hsl(0, 0%, 100%);
    background: #313131;
    background: hsl(0, 0%, 19%);
} 

JQuery:

jQuery(document).ready(function($){
    $('a').each(function(){
        if ($(this).width > $(this).parent().width()) {
            $('.main-navigation').css('background-color', 'red');
        }
    });
});

Answer 1

Check with jquery if the width of the inner element is greater than the parents width.

if you have this structure:

<div class="nav">
    <ul>
        <li><a href="#">Test</li>
    </ul>
</div>

Check the width with jquery:

$(document).ready(function(){
    $('a').each(function(){
        if ($(this).width > $(this).parent().width()) {
            //do something when it has scrollbar
        }
    });
});