How to create nested css horizontal menu?

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><a href="../">HOME</a></li>
    <li><a href="#">CHARACTER</a>
      <ul>
        <li><a href="#" target="_blank">Bill</a></li>
        <li><a href="#" target="_blank">Till</a></li>
        <li><a href="#" target="_blank">Cill</a></li>
        <li><a href="#" target="_blank">Will</a></li>
      </ul>
    </li>
    <li><a href="#">HISTORY</a></li>
    <li><a href="#">STORY</a></li>
  </ul>
</nav>

Any help is much appreciated.

Ringo · Accepted Answer · 2013-11-27 16:58:48Z

Try to add "float: left; width: 100%;" into your ul in css. So the HTML is:

 <nav>
  <ul>
    <li><a href="../">HOME</a></li>
    <li><a href="../exercise/chapter9/">CHARACTER</a>
      <ul class="sub-menu">
        <li><a href="../exercise/chapter9/form1.html" target="_blank">Bill</a></li>
        <li><a href="../exercise/chapter9/form2.html" target="_blank">Till</a></li>
        <li><a href="../exercise/chapter9/form3.html" target="_blank">Cill</a></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;
}

Okay, but now the ul ul class width is really long. Please check out the jsFiddle link: jsfiddle.net/2Charlie/rMreL/4

youssef · Accepted Answer · 2013-11-28 00:51:46Z

0

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.

edited Nov 28, 2013 at 0:51

answered Nov 27, 2013 at 16:44

youssef

995 bronze badges

2 Comments

2myCharlie Over a year ago

Thank you so much for the help and most of all -- the explanation.

youssef Over a year ago

Anytime, I'm glad this helped you figure out the problem, And sorry about the typos in the answer, I fixed everything don't forget to read the article it's now shown probably in the link.

Collectives™ on Stack Overflow

How to create nested css horizontal menu?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related