CODEWITHSUNDEEP
htmlcss
Matt Brown
Matt Brown

Reputation: 249

CSS Nav bar not spanning

How do I get my nav bar to span my web page? I have it set up to be 850px. The container div is set up to be 850px.

Here's the link and the code: http://matthewtbrown.com/jeffandcricketquilt/index2.html

nav {
width:850px;
}
nav li {
                font-family: 'bitterregular';
                font-size:16px;
            }
    nav ul {
                background: #000; /* Old browsers */
                list-style: none;
                position: relative;
                display: inline-table;
            }
    nav ul:after {
                content: ""; clear: both; display: block;
            }
    nav ul ul {
                display: none;
            }

    nav ul li:hover > ul {
                display: block;
            }
    nav ul li {
                float: left;
                color:#fff;
            }

    nav ul li:hover a {
                color:#FFF;
            }
    nav ul li a {
                display: block;
                padding: 10px 40px;
                color:#FFF;
                text-decoration: none;
            }
    nav ul ul {
                background: #FFF;
                border-radius: 0px; 
                padding: 0;
                position: absolute; 
                top: 100%;
            }
    nav ul ul li {
                float: none; 
                border-top: 1px solid #444;
                border-bottom: 1px solid #444;
                border-color:#FFF;                  
                position: relative;
                background-color:#000;
                font-size:12px;
            }
    nav ul ul li a {
                padding: 8px 40px;
                color:#FFF;             }   
    nav ul ul li a:hover {
                background-color:#000;
                color:#999;
                                }
    nav ul  li a:hover {
                background-color:#000;
                color:#999;
                                }
    nav ul ul ul {
                position: absolute; left: 100%; top:0;
            }

Upvotes: 1

Views: 137

Answers (3)

Mark Ryan Sallee
Mark Ryan Sallee

Reputation: 293

The <ul> doesn't automatically fill the width of the 850-pixel container <div>. Set the <ul> width to 100% and it will.

ul {
    width: 100%;
}

Upvotes: 0

Jon P
Jon P

Reputation: 821

If having it 100% of the width of the container is what you want just assign the width of ul as 100%

Upvotes: 0

Raptor
Raptor

Reputation: 54212

Your nav is 850px, however your black background ( ul ) is not.

To solve: Set the black background to nav instead.

Upvotes: 1

Related Questions