How to create nested css horizontal menu?


Tags: html,css3

Problem :

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.



Solution :

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.


    CSS Howto..

    Using HTML5 and CSS3 How can I keep two elements inline in a responsive container whilst maintaining the same margins?

    How do I make the HTML Slider with CSS stay in the box?

    How can I click a specific li without an id or class?

    How to resize QR code?

    How to layout a form like this with CSS and maybe some JS?

    How to make styling and functioning of form elements get not to break in all browsers?

    CSS: how to make the font icon and text under it closer?

    How to create inheritance with LESS?

    How do you achieve this backwards div effect? [closed]

    How to divide a border into 4 equal parts?

    How to set padding on the container?

    how to style the html contents inside a php include file?

    How to make a div fill the remaning vertical space using css

    How do I to adjust the identation [closed]

    How to show current page using CSS? .current_link not working

    how to display an image on small screens and videos on large screen in html

    How to Style Specific Element On Hover With CSS?

    When I try to print a page I created using jQuery Mobile, it always prints an extra blank page. How can I stop this?

    How to control the appearance of a widget on client web sites CSS

    How to read this LESS css?

    How does css inheritance work exactly?

    How to center my hmenu (no matter the resolution)?

    CSS Sprites - How to Align-bottom all Sprite Buttons

    How can I change the size of this box? (CSS)

    WebPack how to put all css files into one css file

    How to set opacity for background images using css?

    How to achieve the following navigation with CSS and HTML

    How would you vertically justify text with css/Javascript?

    How to hide a nested table?

    How to fill video element with poster image even if the poster image is a different aspect ratio than its video element? [duplicate]