CODEWITHSUNDEEP
cssmenunavigationwidth
MakoHunter
MakoHunter

Reputation: 29

CSS navigation sub-menu help... Block goes off screen

I am working on a site for my brother's new plumbing company, and I am having two issues with my navigation menu. I copied some CSS from a tutorial site and tried altering it to my taste, but I can't figure out why this is happening. When I hover over the top-level menu item ("Services" in this case), the sub-menu appears as it should, but the background of the LI's extend outside of the screen. I have tried changing/setting widths on different areas of the CSS, but my limited knowledge has me scratching my head bald. I have a temporary site up, but I am testing this new version with Media Queries locally.

It won't let me post a screenshot without 10 reputation, so here is a link: http://www.sourceplumbing.com/Capture.png

The HTML:

<nav>
  <ul>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a>
      <ul>
        <li><a href="#">Leak Detection</a></li>
        <li><a href="#">Water Heaters</a></li>
        <li><a href="#">Plumbing Fixtures</a></li>
      </ul>
    </li>
    <li><a href="#">Reviews</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

The CSS:

nav ul li:hover > ul {
display: block;
}
nav ul {
    width:100%;
    height:auto;
    min-width:550px;
    background: -webkit-linear-gradient(#d5d5d5, #595959); /* For Safari */
    background: -o-linear-gradient(#d5d5d5, #595959); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#d5d5d5, #595959); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#d5d5d5, #595959); /* Standard syntax */
    -webkit-border-radius: 25px;
    -o-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    font-size: 16px;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    text-align: center;
    text-shadow: 2px 2px 2px #cccccc;
    text-decoration:none;
    list-style: none;
    position: relative;
    display: table;
}
nav a:link, a:visited {
    text-decoration: none;
    color: #000000;
    padding: 8px 0px 8px 8px;
}
nav ul:after {
    content: "";
    clear:both;
    display: block;
}
nav ul li {
    display:inline-block;
    width:auto;
}
nav ul li:hover a {
    text-decoration:none;
    color: #fff;
}
nav ul li a:link, a:visited {
    display: block;
    padding: 5px;
    color:#000;
    text-decoration: none;
}
nav ul ul {
    background: #999;
    border-radius: 0px;
    padding: 0;
    position: absolute;
    width:150px;
}
nav ul ul li {
    width:150px;
    border-top: 1px solid #ccc;
    position: relative;
    display:block;
}
nav ul ul li a {
    width:150px;
    padding: 5px;
    text-align:left;
    color:#000;
    display:block;
}   
nav ul ul li a:hover {
    color:#FFF;
}

I do have another issue, but if I can get this figured out, I will move onto that one next. I would appreciate any help you can offer!

Upvotes: 1

Views: 1930

Answers (1)

Ruddy
Ruddy

Reputation: 9923

What you are looking for is min-width: 550px;. This is causing ALL <ul> to expand to a min width of 550px.

Taking this out will fix the problem. I guess that was there for the nav to stop it getting to small, in that case you should be about to put that under nav and not nav ul.

DEMO HERE

Putting the min-width in the right place:

nav {
    min-width: 550px;
}

DEMO HERE

Upvotes: 1

Related Questions