You can write your own menus in HTML and CSS and put them into your WordPress site. This is an example that was inspired from the book HTML and CSS Visual Quickstart Guide, Eighth Edition, by Elizabeth Castro and Bruce Hyslop. Below is just an HTML unordered list without any formatting applied, except of course for the default formatting that the browser applies. With CSS we can do better.

By using an unordered list without any CSS applied to it, you get the above result in the browser. Now we will apply a class to the ul element and get the result below with the above CSS code in the styles.css file of the child theme of this site. The CSS is shown along with the HTML and at the end is the result.

.nav-subnav1 {
	border-top: 5px solid green;
	border-bottom: 1px solid #c8c8c8; /* grey */
	padding: .45em 0 .5em; /* 7px 0 8px */
}
.nav-subnav1 li {
	border-left: 1px solid #c8c8c8;
	display: inline-block; 
}
.nav-subnav1 a {
	color: black;
	display: inline-block;
	font-family: sans-serif;
	font-size: 1.125em;
	font-weight: 700;
	padding: .5em 1.15em .5em 1.4em;
}

.nav-subnav1 a:hover {
	color: green;
}

Below is the HTML code that you can put into your WordPress page or post. Change the Home, About and Contact to whatever you are linking to. Change the # in the href to the link to the page or post.

<nav role="navigation">
<ul class="nav-subnav1">
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Contact</a></li>
</ul>
</nav>

There are a couple of minor adjustments we could make with this. The color of the text when not hovered over should be black and the first item in the list does not need a left border.