How to create nested css horizontal menu? - html

Question

I have view a post from the stakoverflow site but it does not exactly address my issue. The problem I have is that my navigation menu width is set to 100% and I'm not sure how to control the sub or nested UL menu. Here's the jsFiddle link. The sub menu under "CHARACTER" is the problematic menu I'm working now. If I resize the browser window then the sub-menu's position changes.
<nav>
<ul>
<li>HOME</li>
<li>CHARACTER
<ul>
<li>Bill</li>
<li>Till</li>
<li>Cill</li>
<li>Will</li>
</ul>
</li>
<li>HISTORY</li>
<li>STORY</li>
</ul>
</nav>
Any help is much appreciated.

Answer 1

Try to add "float: left; width: 100%;" into your ul in css. So the HTML is:
<nav>
<ul>
<li>HOME</li>
<li>CHARACTER
<ul class="sub-menu">
<li>Bill</li>
<li>Till</li>
<li>Cill</li>
And here is the css:
/*THIS IS THE NAVATION MENU */
nav {
list-style:none;
text-align:center;
width: 100%;/*margin:20px;*/
padding: 0;
margin: 0 auto;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
z-index: 999;
}
nav ul {
float: left;
width:100%;
background: #efefef;
background: linear-gradient(top, #1295D8 0%, #005581 100%);
background: -moz-linear-gradient(top, #1295D8 0%, #005581 100%);
background: -webkit-linear-gradient(top, #1295D8 0%, #005581 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
/*padding: 0 20px;
border-radius: 10px; */
list-style: none;
position: relative;/*display: inline-table;*/
}
nav ul:after {
content: "";
clear: both;
display: block;
width:100%;
margin:0 auto;
}
nav ul li {
/*float: left;*/
display: inline;
padding: 13px 20px;
position: relative;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #78A4BF 0%, #2E4559 40%);
background: -moz-linear-gradient(top, #78A4BF 0%, #2E4559 40%);
background: -webkit-linear-gradient(top, #78A4BF 0%, #2E4559 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: inline-block;
padding: 15px 20px;
color: #fff;
text-decoration: none;
}
nav ul .sub-menu {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
left: 0%;
float: left;
}
nav ul ul li {
padding: 13px 0;
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
/*padding: 13px 20px;*/
color: #fff;
}
nav ul ul li a:hover {
/*background: #4b545f;*/
background: #4b545f;
background: linear-gradient(top, #78A4BF 0%, #2E4559 40%);
background: -moz-linear-gradient(top, #78A4BF 0%, #2E4559 40%);
background: -webkit-linear-gradient(top, #78A4BF 0%, #2E4559 40%);
/*padding: 13px 20px;*/
}
nav ul ul ul {
position: absolute;
left: 100%;
top: 0;
}

Answer 2

If I understood what you meant correctly then this should be the fix you need.
By adding 2 css rules things should be fixed probably.
nav ul li {
position: relative;
white-space: nowrap;
}
Then it will result in the sub-menu looking like this. http://snag.gy/MFEvw.jpg.
Here's the Fiddle
--
Explaining this really quick from my experience with menus(most of the time they are a pain)
The problem here is that the position: relative; is not set on the <li> inside the <ul>, But it's set on the <ul> itself, That's why the submenu keeps moving to the sides on resize, By setting position: relative; on the <li> inside the <ul> you make the submenu positioned relatively to the <li> instead of the <ul>.
You can read more about the white-space rule over at CSS Tricks, Great article.
I hope This will help you achieve what you need, Good Luck.