Some href links not clickable

I am working on a small project and faced one interesting problem (code below is simplified, but behavior is same). For some reason only Column4's URL is clickable whilst the rest is not. Do you have any idea what is a cause of the problem? I spent a lot of time by investigating the issue and it seems that input fields may be a problem, but I don't understand why.

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body class="container">
<div class="navbar-fixed">
    <nav>
       <ul id="nav-mobile" class="left">
         <li><a href="#">Item1</a></li>
         <li><a href="#">Item2</a></li>
         <li>
			<div class="row" id="topbarsearch">
				<form name="myform" method="post">
					<div class="input-field">
						<i class="material-icons prefix">search</i>
                        <input type="text" id="autocomplete-input" name="autocomplete-input">
                        <input type="submit" style="visibility: hidden;">
                        <ul class="autocomplete-content dropdown-content"></ul>
					</div>
                </form>
            </div>
         </li>
       </ul>
    </nav>
</div>
<main>
	<table class="centered">
        <tr>
            <th><a href="#">Column1</a></th>
            <th><a href="#">Column2</a></th>
            <th><a href="#">Column3</a></th>
            <th><a href="#">Column4</a></th>
        </tr>
	</table>
</main>
</body>
</html>

Solution

The submit button in the form used for search caused the form, and therefore the entire menu bar, to be taller. The menu bar is "in front" of the rest of the page, so it blocks the first three columns even though there is nothing visible that would cause this.

To fix this problem, add style="max-height: 64px;" to the <ul id="nav-mobile" class="left"> element, so that it becomes <ul id="nav-mobile" class="left" style="max-height: 64px;">. This allows the other three columns to be clicked. (tested in Chrome 77)

Update: Also, add style="max-height: 64px; overflow: hidden" to <div class="input-field">.

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body class="container">
<div class="navbar-fixed">
    <nav>
       <ul id="nav-mobile" class="left" style="max-height: 64px;">
         <li><a href="#">Item1</a></li>
         <li><a href="#">Item2</a></li>
         <li>
			<div class="row" id="topbarsearch">
				<form name="myform" method="post">
					<div class="input-field" style="max-height: 64px; overflow: hidden">
						<i class="material-icons prefix">search</i>
                        <input type="text" id="autocomplete-input" name="autocomplete-input">
                        <input type="submit" style="visibility: hidden;">
                        <ul class="autocomplete-content dropdown-content"></ul>
					</div>
                </form>
            </div>
         </li>
       </ul>
    </nav>
</div>
<main>
	<table class="centered">
        <tr>
            <th><a href="#">Column1</a></th>
            <th><a href="#">Column2</a></th>
            <th><a href="#">Column3</a></th>
            <th><a href="#">Column4</a></th>
        </tr>
	</table>
</main>
</body>
</html>