Question

`<ul id="main-nav">
<li>
    <a href="#">Menu item</a>
    <div class="sub-nav">
        <p>Anything</p>
    </div>
</li>
<li>
    <a href="#">Menu item</a>
    <div class="sub-nav" style="left: -80px;">
        <p>Anything</p>
    </div>
</li>
<li>
    <a href="#">Menu item</a>
    <div class="sub-nav" style="left: -160px;">
        <p>Anything</p>
   </div>
</li>
<li>
    <a href="#">Menu item</a>
    <div class="sub-nav" style="left: -240px;">
        <p>Anything</p>
    </div>
</li>
<li>
    <a href="#">Menu item</a>
    <div class="sub-nav" style="left: -320px;">
        <p>Anything</p>
    </div>
</li>

`

I want to be able to put content into the div (Links, Images, Text, etc). I am trying to make the div box the same size as the navigation bar its self specifically 1050px in width (I want the navigation bar and div box to be 1050px in width). When a user hovers over a link in the navigation bar I want the div box to appear with all its content inside.

this is something like it: http://jsfiddle.net/ELyQW/2/ ~ (But if you look closely you can see the box moves on every new link which I do not want to happen.)

Look at the navigation bar on this website for similar reference. pacsun.

Thank You SO much for your help!

And if you do help me create a new bar I strongly recommend you do not use the jsfiddle I posted, but if you have to go for it! Thank you once again!

Was it helpful?

Solution

Yay success!

http://jsfiddle.net/hjZz9/1/

<div id="main-menu-container">
    <ul id="main-menu">
        <li>
            <a href="#">Main menu</a>
            <div class="sub-menu">
                Testing 123
            </div>
        </li>
        <li>
            <a href="#">Main menu</a>
            <div class="sub-menu">
                Testing 123
            </div>
        </li>
        <li>
            <a href="#">Main menu</a>
            <div class="sub-menu">
                Testing 123
            </div>
        </li>
        <li>
            <a href="#">Main menu</a>
            <div class="sub-menu">
                Testing 123
            </div>
        </li>
    </ul>
</div>

#main-menu-container {
    position: relative;
}
#main-menu {
    margin: 0; padding: 0;
    list-style: none;
}
#main-menu li {
    float: left;
    margin-right: 15px;
}
#main-menu li:hover .sub-menu {
    display: block;
}
.sub-menu {
    display: none;
    position: absolute;
        left: 0; right: 0;
    padding: 10px;
    background-color: #eee;
}

Edit: I've added right: 0; to .sub-menu just so it stretches from end to end, you can change this to your own preference of course.

OTHER TIPS

You could try position fixed instead of absolute. Then left position both the div and ul correctly and you will achieve it. Here is a sample

.sub-nav {display: none; position: fixed; left: 40px; width: 400px; z-index: 999; background: #f2f2f2;}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top