Responsive absolutely positioned menu

HTML & CSS
1

Hi all

I hava a jsfiddle here - http://jsfiddle.net/jxvg7zvd/30/

It’s a really simple example of a nav with a large menu under the 5th link.

The large menu is absoutely positioned below the link and links inside it have percentage widths

I would like the large menu to be responsive so when the window is smaller the links inside the menu will be narrower.

Because the menu is absolutely positioned when the window is resized it won’t resize.

How can I have a large hover menu like this that is responsive.

	<div class="nav">
	    <ul class="top-nav">
	        <li><a href="">One</a></li>
	        <li><a href="">Two</a></li>
	        <li><a href="">Three</a></li>
	        <li><a href="">Four</a></li>
	        <li class="btn"><a href="">Five</a>
	            <div class="mega-nav">
	                <div class="block">
	                    <ul class="block-nav">
	                        <li><a href="">One</a></li>
	                        <li><a href="">Two</a></li>
	                        <li><a href="">Three</a></li>
	                        <li><a href="">Four</a></li>
	                    </ul>
	                </div>
	                <div class="block">
	                    <ul class="block-nav">
	                        <li><a href="">One</a></li>
	                        <li><a href="">Two</a></li>
	                        <li><a href="">Three</a></li>
	                        <li><a href="">Four</a></li>
	                    </ul>
	                </div>
	                <div class="block">
	                    <ul class="block-nav">
	                        <li><a href="">One</a></li>
	                        <li><a href="">Two</a></li>
	                        <li><a href="">Three</a></li>
	                        <li><a href="">Four</a></li>
	                    </ul>
	                </div>
	                <div class="block">
	                    <ul class="block-nav">
	                        <li><a href="">One</a></li>
	                        <li><a href="">Two</a></li>
	                        <li><a href="">Three</a></li>
	                        <li><a href="">Four</a></li>
	                    </ul>
	                </div>
	                <div class="block">
	                    <ul class="block-nav">
	                        <li><a href="">One</a></li>
	                        <li><a href="">Two</a></li>
	                        <li><a href="">Three</a></li>
	                        <li><a href="">Four</a></li>
	                    </ul>
	                </div>
	            </div>    
	        </li>
	    </ul>

	</div>
2

You could try something like this:

.mega-nav {
    background: red;
    display: none;
    position: absolute;
    top: 40px;
   [color=blue] left: 5%;
    right:5%;[/color]
/*   width: 600px; */
}

Or, you could express the width as a percent, and add max-width in px to limit the width of the menu.

.mega-nav {
    background: red;
    display: none;
    position: absolute;
    top: 40px;
   [color=blue] left: 5%;
    width:90%;
    max-width: 600px;[/color]
}
3

Sorry for the delay in responding.

This solution isn’t working for me.

My actual code is alot more complex, but I can’t replicate it all

4

Ron’s code above should work for most situations assuming that you have position relative only on top-nav and not on the child list items. The drop menu is then the same width as the parent top-nav and assuming top-nav is fluid then the menu will size with the parent.

If you can get it working in your fiddle first then you can try and replicate in your actual code.

If you have a link to the actual site then we can probably give more specific help.

You also have the option of using media queries to change the width of the menu when it starts to stick out of the viewport and then you throw in a smaller width accordingly (e.g. shorten the width by a couple of hundred pixels and adjust internal elements as suitable). This would work with your existing code as you just manipulate the width each time. With two or three media queries you should be able to make it fit across the range.