Dropdown Sub Nav Width of Wrapper

Attached is an image of something I need to piece together.

The top nav is constant - with a bar color that extends the width of the wrapper.  The buttons act to bring up a sub nav whose DIV is invisible until a button is rolled over - and also extends the width of the wrapper.

How would I go about setting the sub nav div visible/invisible?  Would it require a javascript onEnter type command - or is there a better way to handle it?

Thanks!

Quickie outline of how nav functions
LVL 2
erzoolanderAsked:
Who is Participating?
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Try this http://jsbin.com/uxegan/1/edit 

css
    #menu {
    margin: 0;
    padding: 0.15%;
    background: #B26100;
    height: 3em;
    list-style: none;
    font-family:arial;
    width: 800px;
    }

    #menu > li {
    height: 100%;
    margin-right: 0.5em;
    padding: 0 1em;
    background:#B26100;
    }
   
    #menu > li:hover {
    background-color:#007AB2;
    }
    
    #menu > li > a {
    height: 3em;
    color: #ffffff;
    text-decoration: none;
    line-height: 3;
    font-weight: bold;
    text-transform: uppercase;
    }

    #menu > li > a:hover {
    color: #00AFFF;
    text-decoration: underline;
    
    
    }

    #menu > li.sub {
    position: relative;
    }

    #menu > li.sub ul {
    margin: 0;
    padding: 0.5em 0;
    list-style: none;
    background: #007AB2;
    position: absolute;
    top: -1000em;
    left: -160px;
    width: 803px;
    }


    #menu li.sub ul li a {
    height: 100%;
    display: inline;
    float: left;
    padding: 0.4em;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    }

    #menu > li.sub ul li a:hover {
    background: #41A044;
    text-decoration: underline;
    }

    #menu > li.sub:hover ul {
    top: 3em;
    }

    #menu{
    text-align:center;
    }

    li{
    display:inline-block;
    }

Open in new window

html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="navcontainer">
<ul id="menu" >
    <li><a href="#">Home</a></li>
    <li class="sub">
    <a href="#">Sub Menu Button</a>
    <ul>
    <li><a href="#">Button 1</a></li>
    <li><a href="#">Button 2</a></li>
    <li><a href="#">Button 3</a></li>
    <li><a href="#">Button 4</a></li>
    </ul>
    </li>
    <li><a href="#">Button 5</a></li>
    <li><a href="#">Button 6</a></li>
    <li><a href="#">Button 7</a></li>
    </ul>
</div>
</body>
</html>

Open in new window

0
 
erzoolanderAuthor Commented:
Perfect - gracias!
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
le invitamos
De nada
No worries, mate.
A'ole pilikia
Prego
Thanks for the points
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.