CSS Issue UL dropping vertically instead of being horizontal - html

Question

My Css menu is fine when I first set it then when I close I10 and re-open the menu is vertical. Have a look at my code.
/** MENU */
#menu {
overflow: hidden;
background: #101010;
}
#menu ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
display: inline-block;
}
#menu a {
display: block;
padding: 0px 40px 0px 40px;
line-height: 70px;
text-decoration: none;
text-transform: uppercase;
text-align: center;
font-size: 16px;
font-weight: 200;
color: rgba(255,255,255,0.5);
border: none;
}
#menu a:hover, #menu .current_page_item a {
text-decoration: none;
color: rgba(255,255,255,0.8);
}
#menu .current_page_item a {
}
#menu .last {
border-right: none;
}
Please let me know where I am going wrong.
The HTML:
<div id="wrapper">
<div id="header-wrapper">
<div id="header" class="container">
<div id="logo">
<h1>Investment Services</h1>
</div>
<div id="social">
<ul class="contact">
</ul>
</div>
</div>
<div id="menu" class="container">
<ul>
<li class="current_page_item">Homepage</li>
<li>Procedures</li>
<li>Task Rota</li>
<li>Docs & Links</li>
<li>Contact Us</li>
<li>Feedback</li>
</ul>
</div>
</div>

Answer 1

In cases like this, <ul> typically isn't the problem - it's the <li>
You'll be better using something like this to create a horizontal menu:
ul {
display: block
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
float: left;
}
Update
According to this JSFiddle, your menu is displayed horizontally?

Answer 2

Try this if your problem is not yet solved:
Give an Id for your "ul" which is inside the 'menu' div and then try the following class:
For suppose the ID of ur 'ul' is 'myUl'
#myUl li
{
display: inline;
}
Because li items need to be aligned horizontally and to be followed after their parent element while giving class name. Here the parent element will be ul but not the div