The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Help with a full width drop down navigation / menu bar

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #39174

    Hello there,

    I am building a website for a client and having a little trouble with adding drop down to a full width navigation bar.

    This is the site so far:
    And this is what I want my drop down menu to look like:

    The reason I am having problems is because it is a full width menu I can’t seem to figure it out.

    This is my current code:

    #nav {
    width: 100%;
    float: left;
    margin: 0 0 1em 0;
    padding-left: 200px;
    background-color: #003471;
    border-bottom: 0px solid #ccc; }
    #nav ul {
    list-style: none;
    width: 800px;
    margin: 0 auto;
    padding: 0; }
    #nav li {
    float: left; }
    #nav li a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    font-weight: bold;
    color: #fff;
    border-right: 0px solid #ccc; }
    #nav li:first-child a {
    border-left: 0px solid #ccc; }
    #nav li a:hover {
    color: #fff;
    background-color: #3399cc; }



    first your css

    #nav {
    width: 100%;
    float: left;
    margin: 0 0 1em 0;
    background-color: #003471;
    border-bottom: 0px solid #ccc; }

    lets the x-scrollbar appear. because the padding is added to 100%.
    delete padding-left from #nav and add it to your image or image-container. something like this

    #nav > img {padding-left: 200px;}

    and your menu:
    you can add a secound ul into your menu, something like this


  • and style it with

    #nav li ul {display: none;}
    #nav li ul li {display: inline-block;width: 100%;}
    #nav li:hover ul{display: block;position: absolute;width: 200px;}

    that is just a starting point, maybe it can help you


    It works a treat, brilliant thank you!

    Here’s how it looks now:

    Thanks again :)

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.