The CSS takes a “mobile first” approach in this template, meaning that the default styles make the layout look nice at the skinniest, linear proportions. Your default menu style is therefore the mobile version/layout.
The thing that allows it it change is a media query. They’re in this file http://www.haguebar.co.uk/wp-content/themes/twentytwelve-child/style.css A media query is like a filter for various conditions (most commonly screen width). In this case there is a min-width of 600px, so when the screen is 600px wide or bigger, conditions are met for the filter, and other styles are allowed to come in to play to override those defined previously at smaller/default sizes. There may or may not be JavaScript involved too but I can’t check as I’m on mobile. The media query equivalent in JavaScript is matchMedia().
As you’re new to CSS, you should probably research “mobile first” and “media queries” to help you get started.
You should also look into using the developer toolbar – F12 in most browsers. You can use it to explore the DOM, check which styles are applied to each element, see which stylesheet they’re located in, and make live CSS edits in the browsers. It will be your bread and butter for troubleshooting.
