1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

CSS Adding Dropdown to an existing menu bar and highlighting menu tab

Discussion in 'Web Development' started by langerhead, Sep 16, 2013.

  1. langerhead

    langerhead New Member

    Any help here would be greatly appreciated, I have very little html or css experience, i've made a few simple websites by editing templates and learning as I go by trial and error, don't know what i'm doing half the time but recently a friend of a friend asked me to make a website for a business he's starting, I told him I was no expert, he said fine, a simple site would do, but having completed almost the whole thing it's obvious I need to add a dropdown menu to one of my menu tabs but the template I used has no provision for this, also the tabs would ideally change colour as you click through them but as it is only the home tab remains highlighted no matter which page is selected. In hindsight I probably should have picked another template but i don't have time to start over and I just don't know how to use css to do what I need. The services Tab needs about ten subheadings to drop down, I've looked at examples but I don't see how to apply them even though I know it shouldn't be difficult. Thanks again.

    Here is my Html:
    <!DOCTYPE HTML>
    <!-- Website Template by freewebsitetemplates.com -->
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Survival U.M.E</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    </head>
    <body>
    <div id="header">
    <a href="index.html" class="logo"><img src="images/SUME.png" alt=""></a>
    <ul>
    <li class="selected">
    <a href="index.html">home</a>
    </li>
    <li>
    <a href="about.html">about us</a>
    </li>
    <li>
    <a href="services.html">services</a>
    </li>

    <li>
    <a href="gallery.html">gallery</a>
    </li>

    <li>
    <a href="contact.html">contact</a>
    </li>
    </ul>
    </div>
    <div id="body">
    <div class="header">
    <ul>
    <li>
    <img src="images/shoot.jpg" alt="">
    </li>
    <li>
    <img src="images/hiking.jpg" alt=""> </li>
    <li>
    <img src="images/programs.jpg" alt="">
    </li>
    </ul>
    </div>
    <div class="body">
    <div>
    <h3>The Real Military</h3>
    <h1>Experience</h1>
    <p>
    Train with real military leaders:Feel the intense rush,the thrill of the attack, defeat the enemy.
    </p>
    </div>
    </div>
    <div class="footer">



    <p>
    </p>
    </li>
    </ul>
    </div>
    </div>
    </div>
    <div id="footer">
    <div>
    <ul>
    <li class="twitter">
    <a href="https://twitter.com/survival_ume/">twitter</a>
    </li>
    <li class="facebook">
    <a href="https://www.facebook.com/survivalume">facebook</a>
    </li>
    </li>
    </ul>
    <p>
    &copy; Copyright Survival U.M.E. All rights reserved
    </p>
    </div>
    </div>
    </body>
    </html>

    And the CSS:

    /* Website Template by freewebsitetemplates.com */
    body {
    background: url(../images/bg-body.jpg) repeat;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;

    }
    #header {
    background: url(../images/bg-header.png) repeat-x bottom center;
    margin: 0;
    padding: 0 0 20px;
    }
    #header a.logo {
    display: block;
    height: 115px;
    margin: 0 auto;
    padding: 32px 0 32px;
    width: 750px;
    }
    #header a.logo img {
    border: 0;
    }
    #header ul {
    background: url(../images/menu-border.gif) no-repeat bottom left;
    margin: 0 auto;
    overflow: hidden;
    padding: 0 0 0 1px;
    width: 700px;
    }
    #header ul li {
    background: url(../images/bg-menu.gif) repeat-x bottom center;
    border-top: 2px solid #4f5342;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #header ul li a {
    background: url(../images/menu-border.gif) no-repeat bottom right;
    color: #93958b;
    display: block;
    font-size: 14px;
    height: 42px;
    letter-spacing: 1px;
    line-height: 42px;
    margin: 0;
    padding: 0 31px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    }
    #header ul li.selected a {
    color: #4c4d3d;
    background: #e5e5e5;
    }
    #header ul li a:hover {
    color: #c0c3b4;
    }
    #body {
    background: url(../images/bg-content.jpg) repeat;
    margin: 0;
    padding: 0;
    }
    #body .header {
    background: #e5e5e5 url(../images/bg-content-header.gif) repeat-x bottom center;
    margin: 0;
    padding: 20px 0 44px;
    }
    #body .header ul {
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    width: 960px;
    }
    #body .header ul li {
    float: left;
    list-style: none;
    margin: 0 0 0 23px;
    padding: 0;
    position: relative;
    }
    #body .header ul li:first-child {
    margin-left: 20px;
    }
    #body .header ul li img {
    border: 1px solid #a5a5a5;
    margin: 0;
    padding: 0;
    }
    center;
    color: #fff;
    display: block;
    height: 95px;
    left: 0;
    line-height: 24px;
    margin: 0;
    padding: 0 0 0 20px;
    position: absolute;
    text-decoration: none;
    top: 264px;
    width: 222px;
    z-index: 3;
    }
    #body .header ul li a:hover {
    opacity: 0.9;
    }
    #body .header ul li a b {
    display: block;
    font-family: "Times New Roman", Times, serif;
    font-size: 24px;
    font-weight: normal;
    padding: 25px 0 2px;
    text-transform: uppercase;
    }
    #body .header ul li a span {
    background: url(../images/arrow.png) no-repeat center right;
    padding: 0 12px 0 0;
    }
    #body .body {
    background: url(../images/bg-section.jpg) no-repeat;
    height: 258px;
    margin: 60px auto 44px;
    padding: 0;
    width: 919px;

    }
    #body .body div {
    margin: 0;
    padding: 0 0 0 40px;
    ;
    width: 400px;
    }
    #body .body div h3 {
    color: #fff;
    font-size: 30px;
    font-weight: normal;
    letter-spacing: 1px;
    margin: 0;
    padding: 35px 0 0;
    text-transform: uppercase;
    }
    #body .body div h1 {
    color: #fff;
    font-family: "Times New Roman", Times, serif;
    font-size: 54px;
    letter-spacing: 2px;
    margin: 0;
    padding: 10px 0 20px;
    text-transform: uppercase;
    }
    #body .body div p {
    color: #d1d1d1;
    line-height: 24px;
    letter-spacing: 1px;
    margin: 0;
    padding: 0 30px 0 0;
    text-align: justify;
    }
    #body .body div p a {
    color: #d1d1d1;
    }
    #body .body div p a:hover {
    color: #fff;
    }
    #body .footer {
    margin: 0 auto;
    overflow: hidden;
    padding: 0 0 50px;
    width: 920px;
    }
    #body .footer div {
    float: left;
    margin: 0;
    padding: 0;
    }
    #body .footer div.blog {
    width: 433px;
    }
    #body .footer div.article {
    margin: 0 0 0 49px;
    width: 438px;
    }
    #body .footer div h3 {
    color: #544b34;
    font-family: "Times New Roman", Times, serif;
    font-size: 22px;
    margin: 0;
    padding: 0;
    text-shadow: 0 1px 0 #c7b997;
    text-transform: uppercase;
    }
    #body .footer div h3 a {
    color: #544b34;
    text-decoration: none;
    }
    #body .footer div h3 a:hover {
    color: #3e3a2f;
    }
    #body .footer div ul {
    margin: 0;
    padding: 0;
    }
    #body .footer div ul li {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #body .footer div ul li p {
    background: url(../images/border-dashed.png) repeat-x top left;
    color: #544b34;
    line-height: 24px;
    margin: 0;
    padding: 10px 0;
    text-shadow: 0 1px 0 #c7b997;
    }
    #body .footer div ul li p a {
    color: #544b34;
    text-decoration: none;
    }
    #body .footer div ul li p a:hover {
    color: #403721;
    text-decoration: underline;
    }
    #body .footer div ul li:first-child p {
    background: none;
    }
    #body .footer div.article ul li {
    overflow: hidden;
    }
    #body .footer div.article ul li div {
    float: left;
    margin: 0 20px 0 0;
    padding: 13px 0 0;
    text-align: center;
    width: 25px;
    }
    #body .footer div.article ul li div span {
    color: #544b34;
    text-transform: uppercase;
    }
    #body .footer div.article ul li div span b {
    font-size: 20px;
    }
    #body .footer div.article ul li p {
    float: left;
    width: 393px;
    }
    #body .content {
    margin: 0 auto;
    min-height: 960px;
    overflow: hidden;
    padding: 0;
    width: 920px;
    }
    #body .content h2 {
    color: #544b34;
    font-family: "Times New Roman", Times, serif;
    font-size: 30px;
    line-height: 30px;
    margin: 0;
    padding: 26px 0 0;
    text-shadow: 0 1px 0 #c7b997;
    }
    #body .content h2 a {
    color: #544b34;
    text-decoration: none;
    text-transform: none;
    }
    #body .content h2 a:hover {
    color: #3e3a2f;
    }
    #body .content h3 {
    color: #544b34;
    font-family: "Times New Roman", Times, serif;
    font-size: 20px;
    letter-spacing: 1px;
    margin: 0;
    padding: 30px 0 0;
    text-shadow: 0 1px 0 #c7b997;
    text-transform: uppercase;
    }
    #body .content h4 {
    color: #544b34;
    font-size: 14px;
    letter-spacing: 1px;
    margin: 0;
    padding: 30px 0 0;
    text-shadow: 0 1px 0 #c7b997;
    text-transform: uppercase;
    }
    #body .content p {
    color: #544b34;
    line-height: 30px;
    margin: 0;
    padding: 0;
    text-align: justify;
    text-shadow: 0 1px 0 #c7b997;
    }
    #body .content p a {
    color: #544b34;
    }
    #body .content p a:hover {
    color: #403721;
    text-decoration: underline;
    }
    #body .content ul {
    margin: 0;
    padding: 5px 0 0;
    }
    #body .content ul li {
    background: url(../images/bullet.png) no-repeat 0 15px;
    color: #544b34;
    line-height: 30px;
    list-style: none;
    margin: 0;
    padding: 0 0 0 15px;
    text-shadow: 0 1px 0 #c7b997;
    }
    #body .content ul.section li {
    background: none;
    list-style: decimal;
    padding: 0;
    margin: 0 0 0 22px;
    }
    #body .content ul.contact li {
    background: none;
    padding: 0;
    }
    #body .content ul li a {
    color: #544b34;
    text-decoration: none;
    }
    #body .content ul li a:hover {
    color: #403721;
    }
    #body .content .body {
    background: url(../images/bg-section.jpg) no-repeat;
    height: 258px;
    margin: 40px auto;
    padding: 0;
    width: 919px;
    }ol.thumb-grid li {
    float: left;
    width: 15%;
    margin: 0 5% 5% 0;
    }
    ol.thumb-grid li:nth-child(5n) {
    margin-right: 0;
    }
    ol.thumb-grid li a img {
    width: 100%;
    }
    #body .content .body div {
    margin: 0;
    padding: 0 0 0 40px;
    width: 400px;
    }
    #body .content .body div h3 {
    color: #fff;
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 1px;
    margin: 0;
    padding: 35px 0 0;
    text-transform: uppercase;
    text-shadow: none;
    }
    #body .content .body div h1 {
    color: #fff;
    font-family: "Times New Roman", Times, serif;
    font-size: 54px;
    letter-spacing: 2px;
    margin: 0;
    padding: 10px 0 20px;
    text-transform: uppercase;
    text-shadow: none;
    }
    #body .content .body div p {
    color: #d1d1d1;
    line-height: 24px;
    letter-spacing: 1px;
    margin: 0;
    padding: 0 30px 0 0;
    text-align: justify;
    text-shadow: none;
    }
    #body .content .body div p a {
    color: #d1d1d1;
    }
    #body .content .body div p a:hover {
    color: #fff;
    }
    #body .content .section p {
    padding: 0 0 30px;
    }
    #body .content .article {
    margin: 0;
    padding: 15px 0 0;
    }
    #body .content .article li {
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 10px 0;
    }
    #body .content .article li a.figure {
    display: block;
    float: left;
    margin: 0 20px 0 0;
    padding: 0;
    }
    #body .content .article li a.figure:hover {
    opacity: 0.8;
    }
    #body .content .article li img {
    border: 1px solid #8d8064;
    display: block;
    }
    #body .content .article li div {
    float: left;
    margin: 0;
    padding: 0;
    width: 609px;
    }
    #body .content .article li div h3 {
    line-height: 16px;
    padding: 0 0 10px;
    }
    #body .content .article li div span {
    display: block;
    margin: 0;
    padding: 0;
    }
    #body .content .article li div span b {
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    text-transform: uppercase;
    width: 55px;
    }
    #body .content .blog {
    float: left;
    margin: 0;
    padding: 0;
    width: 660px;
    }
    #body .content .blog p {
    padding: 0 0 30px;
    }
    #body .content .sidebar {
    float: left;
    margin: 0;
    padding: 0 0 0 30px;
    width: 230px;
    }
    #body .content .sidebar h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    padding-top: 36px;
    }
    #body .content .sidebar ul li a {
    text-decoration: none;
    }
    #body .content .sidebar ul li a:hover {
    text-decoration: underline;
    }
    #footer {
    background: url(../images/bg-footer.png) repeat-x top center;
    margin: 0;
    padding: 50px 0 60px;
    }
    #footer div {
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    width: 920px;
    }
    #footer ul {
    float: left;
    margin: 0;
    overflow: hidden;
    padding: 0;
    }
    #footer ul li {
    float: left;
    list-style: none;
    margin: 0 20px 0 10px;
    padding: 0;
    }
    #footer ul li a {
    background: url(../images/icons.png) no-repeat;
    display: block;
    height: 22px;
    margin: 0;
    padding: 0;
    text-indent: -9999px;
    }
    #footer ul li.twitter a {
    background-position: 0 0;
    width: 28px;
    }
    #footer ul li.twitter a:hover {
    background-position: -33px 0;
    }
    #footer ul li.facebook a {
    background-position: 0 -27px;
    width: 22px;
    }
    #footer ul li.facebook a:hover {
    background-position: -33px -27px;
    }
    #footer ul li.googleplus a {
    background-position: 0 -54px;
    width: 22px;
    }
    #footer ul li.googleplus a:hover {
    background-position: -33px -54px;
    }
    #footer p {
    color: #3a3e2c;
    float: right;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 19px;
    margin: 0;
    padding: 0;
    }
     
    langerhead, Sep 16, 2013
    #1
  2. Geoff Tyrer

    Geoff Tyrer Member

    Hi langerhead,

    So you need a drop down menu... There are two way to do it so far as I know.

    One is using Javascript. Are you prepared to learn this? One drawback to using this approach is that some people have Javascript disabled within their browsers.

    The other approach is using CSS. Here is a link to part of the {code-tricks} web site that shows you the HTML and CSS for doing it:
    http://code-tricks.com/simple-css-drop-down-menu
     
    Geoff Tyrer, Sep 17, 2013
    #2
  3. langerhead

    langerhead New Member

    Thanks for the reply Geoff, although that code looks nice and simple I have no idea how to make it work with my CSS above, I really need specific step by step help on this, I am that clueless. I thought the .selected class was dealing with my menu because it's above the menu in the html, but it seems to make no difference to it at all, I even deleted the class in the CSS and the menu looked the same without it. I have no idea if what I just said even makes sense so if anyone can tell me how to get Geoffs code to work in my CSS it would be great.
     
    langerhead, Sep 17, 2013
    #3
  4. Geoff Tyrer

    Geoff Tyrer Member

    Hi langerhead,

    If you delete the styling for class "selected" from the CSS the appearance isn't the same - I just did it. The menu item "HOME" appears the same as the others (ABOUT US, SERVICES, GALLERY etc) when you do this. It HAS TO BE different because in your HTML you have:
    Code:
    <li class="selected">
    <a href="index.html">home</a>
</li>
    If styling for class "selected" isn't defined the <li> will be displayed exactly as the following one is as its markup doesn't feature a class for the <li>:
    Code:
    <li>
    <a href="about.html">about us</a>
</li>
    So as a first step I think you need to repeat what you did - delete the styling or preferably rename the class in your CSS file. For example:
    Code:
    #header ul li.selected_X a {
    color: #4c4d3d;
    background: #e5e5e5;
}
    Be sure to save the CSS file and hit Refresh in your browser.

    When we get past this we can move on to the real problem.
     
    Geoff Tyrer, Sep 18, 2013
    #4
  5. langerhead

    langerhead New Member

    Thanks for sticking with this Geoff, I exaggerated when I said it changed nothing but I expected it to have a bigger effect on the menu as I thought it would control the entire layout of the menu, anyway I undeleted it as I knew it was there for something. So, any ideas how I can get your code to work,I really wish I knew how to make sense of it, I tried various things but the best I managed was to get grey boxes to appear within the menu.
     
    langerhead, Sep 20, 2013
    #5
  6. Geoff Tyrer

    Geoff Tyrer Member

    Hi langerhead,

    From what you say I can't tell if you've made progress or not.

    I merged the drop-down menu markup (HTML & CSS) with yours and the result was a drop-down menu that appeared when you hovered the mouse over "SERVICES". Did you get that far? Without special styling the drop-down menu just looks like grey boxes... Anyway this is what I did.

    Step One
    In your HTML make the following change:
    <ul> => <ul id="menu">

    Step Two
    In your HTML replace <a href="services.html">services</a>
    with

    Code:
     <a href="#">services</a>
<ul class="sub-menu">
    <li>
        <a href="#">Sub Menu 1</a>
    </li>
    <li>
        <a href="#">Sub Menu 2</a>
    </li>
    <li>
        <a href="#">Sub Menu 3</a>
    </li>
    <li>
        <a href="#">Sub Menu 4</a>
    </li>
</ul>
    Step Three
    Add the following to your CSS above #header ul {}

    Code:
    /*Initialize*/
ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
    text-decoration: none;
    color: #fff;
    background: #666;
    padding: 5px;
    display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
    position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;
}
ul#menu li:hover ul.sub-menu {
    display:block;
}
    Step Four
    Comment out as follows:
    Code:
    #header ul {
background: url(../images/menu-border.gif) no-repeat bottom left;
margin: 0 auto;
/*overflow: hidden;*/
padding: 0 0 0 1px;
width: 700px;
}
    Step Five
    Change "block" to "inline-block" in
    #header ul li a {}

    Let me know how you get on and we'll move on to the next step.
     
    Geoff Tyrer, Sep 22, 2013
    #6
  7. langerhead

    langerhead New Member

    Thanks Geoff, I've done what you said and now I have a functioning drop down menu for services. However, (and i'm sure you know) this brings two issues, firstly the menu is at the left side of the page rather than centered and the drop down links appear behind the pictures on the page making them unclickable. I managed to solve the menu tabs not changing colour, just a matter of adding <li class="selected"> before the link in the html, completely obvious for most but a eureka moment for me. taking the comments off of
    #header ul {
    background: url(../images/menu-border.gif) no-repeat bottom left;
    margin: 0 auto;
    /*overflow: hidden;*/
    padding: 0 0 0 1px;
    width: 700px;
    }
    solves the centering issue but the drop down links go behind the pictures still.
    You've been great help so far, if those two issues could be solved it would be fantastic.
     
    langerhead, Sep 22, 2013
    #7
  8. Geoff Tyrer

    Geoff Tyrer Member

    Hi langerhead,

    I don't have the images - could you zip them up and make them available to me somehow? So that I can see the problem of the dropdown menu being obscured.

    I don't get the menu on the left problem so maybe check your HTML & CSS against mine:
    Code:
    <!DOCTYPE HTML>
<!-- Website Template by freewebsitetemplates.com -->
<html>
<head>
    <meta charset="UTF-8">
    <title>Survival U.M.E</title>
    <link rel="stylesheet" href="css/style2.css" type="text/css">
</head>
<body>
    <div id="header">
        <a href="index.html" class="logo">
            <img src="images/SUME.png" alt=""></a>
        <ul id="menu">
            <li class="selected"><a href="index.html">home</a> </li>
            <li><a href="about.html">about us</a> </li>
            <li><a href="#">services</a>
                <ul class="sub-menu">
                    <li><a href="#">Sub Menu 1</a> </li>
                    <li><a href="#">Sub Menu 2</a> </li>
                    <li><a href="#">Sub Menu 3</a> </li>
                    <li><a href="#">Sub Menu 4</a> </li>
                </ul>
            </li>
            <li><a href="gallery.html">gallery</a> </li>
            <li><a href="contact.html">contact</a> </li>
        </ul>
    </div>
    <div id="body">
        <div class="header">
            <ul>
                <li>
                    <img src="images/shoot.jpg" alt="">
                </li>
                <li>
                    <img src="images/hiking.jpg" alt="">
                </li>
                <li>
                    <img src="images/programs.jpg" alt="">
                </li>
            </ul>
        </div>
        <div class="body">
            <div>
                <h3>
                    The Real Military</h3>
                <h1>
                    Experience</h1>
                <p>
                    Train with real military leaders:Feel the intense rush,the thrill of the attack, defeat the enemy.
                </p>
            </div>
        </div>
        <div class="footer">
            <p>
            </p>
            </li> </ul>
        </div>
    </div>
    </div>
    <div id="footer">
        <div>
            <ul>
                <li class="twitter"><a href="https://twitter.com/survival_ume/">twitter</a> </li>
                <li class="facebook"><a href="https://www.facebook.com/survivalume">facebook</a> </li>
                </li>
            </ul>
            <p>
                &copy; Copyright Survival U.M.E. All rights reserved
            </p>
        </div>
    </div>
</body>
</html>
    Code:
    /* Website Template by freewebsitetemplates.com */
body {
background: url(../images/bg-body.jpg) repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin: 0;
padding: 0;
 
}
#header {
background: url(../images/bg-header.png) repeat-x bottom center;
margin: 0;
padding: 0 0 20px;
}
#header a.logo {
display: block;
height: 115px;
margin: 0 auto;
padding: 32px 0 32px;
width: 750px;
}
#header a.logo img {
border: 0;
}
/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
    text-decoration: none;
    color: #fff;
    background: #666;
    padding: 5px;
    display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
    position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;
}
ul#menu li:hover ul.sub-menu {
    display:block;
}
#header ul {
background: url(../images/menu-border.gif) no-repeat bottom left;
margin: 0 auto;
/*overflow: hidden;*/
padding: 0 0 0 1px;
width: 700px;
}
#header ul li {
background: url(../images/bg-menu.gif) repeat-x bottom center;
border-top: 2px solid #4f5342;
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#header ul li a {
background: url(../images/menu-border.gif) no-repeat bottom right;
color: #93958b;
display: inline-block;
font-size: 14px;
height: 42px;
letter-spacing: 1px;
line-height: 42px;
margin: 0;
padding: 0 31px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
#header ul li.selected a {
color: #4c4d3d;
background: #e5e5e5;
}
#header ul li a:hover {
color: #c0c3b4;
}
#body {
background: url(../images/bg-content.jpg) repeat;
margin: 0;
padding: 0;
}
#body .header {
background: #e5e5e5 url(../images/bg-content-header.gif) repeat-x bottom center;
margin: 0;
padding: 20px 0 44px;
}
#body .header ul {
margin: 0 auto;
overflow: hidden;
padding: 0;
width: 960px;
}
#body .header ul li {
float: left;
list-style: none;
margin: 0 0 0 23px;
padding: 0;
position: relative;
}
#body .header ul li:first-child {
margin-left: 20px;
}
#body .header ul li img {
border: 1px solid #a5a5a5;
margin: 0;
padding: 0;
}
center;
color: #fff;
display: block;
height: 95px;
left: 0;
line-height: 24px;
margin: 0;
padding: 0 0 0 20px;
position: absolute;
text-decoration: none;
top: 264px;
width: 222px;
z-index: 3;
}
#body .header ul li a:hover {
opacity: 0.9;
}
#body .header ul li a b {
display: block;
font-family: "Times New Roman", Times, serif;
font-size: 24px;
font-weight: normal;
padding: 25px 0 2px;
text-transform: uppercase;
}
#body .header ul li a span {
background: url(../images/arrow.png) no-repeat center right;
padding: 0 12px 0 0;
}
#body .body {
background: url(../images/bg-section.jpg) no-repeat;
height: 258px;
margin: 60px auto 44px;
padding: 0;
width: 919px;
 
}
#body .body div {
margin: 0;
padding: 0 0 0 40px;
;
width: 400px;
}
#body .body div h3 {
color: #fff;
font-size: 30px;
font-weight: normal;
letter-spacing: 1px;
margin: 0;
padding: 35px 0 0;
text-transform: uppercase;
}
#body .body div h1 {
color: #fff;
font-family: "Times New Roman", Times, serif;
font-size: 54px;
letter-spacing: 2px;
margin: 0;
padding: 10px 0 20px;
text-transform: uppercase;
}
#body .body div p {
color: #d1d1d1;
line-height: 24px;
letter-spacing: 1px;
margin: 0;
padding: 0 30px 0 0;
text-align: justify;
}
#body .body div p a {
color: #d1d1d1;
}
#body .body div p a:hover {
color: #fff;
}
#body .footer {
margin: 0 auto;
overflow: hidden;
padding: 0 0 50px;
width: 920px;
}
#body .footer div {
float: left;
margin: 0;
padding: 0;
}
#body .footer div.blog {
width: 433px;
}
#body .footer div.article {
margin: 0 0 0 49px;
width: 438px;
}
#body .footer div h3 {
color: #544b34;
font-family: "Times New Roman", Times, serif;
font-size: 22px;
margin: 0;
padding: 0;
text-shadow: 0 1px 0 #c7b997;
text-transform: uppercase;
}
#body .footer div h3 a {
color: #544b34;
text-decoration: none;
}
#body .footer div h3 a:hover {
color: #3e3a2f;
}
#body .footer div ul {
margin: 0;
padding: 0;
}
#body .footer div ul li {
list-style: none;
margin: 0;
padding: 0;
}
#body .footer div ul li p {
background: url(../images/border-dashed.png) repeat-x top left;
color: #544b34;
line-height: 24px;
margin: 0;
padding: 10px 0;
text-shadow: 0 1px 0 #c7b997;
}
#body .footer div ul li p a {
color: #544b34;
text-decoration: none;
}
#body .footer div ul li p a:hover {
color: #403721;
text-decoration: underline;
}
#body .footer div ul li:first-child p {
background: none;
}
#body .footer div.article ul li {
overflow: hidden;
}
#body .footer div.article ul li div {
float: left;
margin: 0 20px 0 0;
padding: 13px 0 0;
text-align: center;
width: 25px;
}
#body .footer div.article ul li div span {
color: #544b34;
text-transform: uppercase;
}
#body .footer div.article ul li div span b {
font-size: 20px;
}
#body .footer div.article ul li p {
float: left;
width: 393px;
}
#body .content {
margin: 0 auto;
min-height: 960px;
overflow: hidden;
padding: 0;
width: 920px;
}
#body .content h2 {
color: #544b34;
font-family: "Times New Roman", Times, serif;
font-size: 30px;
line-height: 30px;
margin: 0;
padding: 26px 0 0;
text-shadow: 0 1px 0 #c7b997;
}
#body .content h2 a {
color: #544b34;
text-decoration: none;
text-transform: none;
}
#body .content h2 a:hover {
color: #3e3a2f;
}
#body .content h3 {
color: #544b34;
font-family: "Times New Roman", Times, serif;
font-size: 20px;
letter-spacing: 1px;
margin: 0;
padding: 30px 0 0;
text-shadow: 0 1px 0 #c7b997;
text-transform: uppercase;
}
#body .content h4 {
color: #544b34;
font-size: 14px;
letter-spacing: 1px;
margin: 0;
padding: 30px 0 0;
text-shadow: 0 1px 0 #c7b997;
text-transform: uppercase;
}
#body .content p {
color: #544b34;
line-height: 30px;
margin: 0;
padding: 0;
text-align: justify;
text-shadow: 0 1px 0 #c7b997;
}
#body .content p a {
color: #544b34;
}
#body .content p a:hover {
color: #403721;
text-decoration: underline;
}
#body .content ul {
margin: 0;
padding: 5px 0 0;
}
#body .content ul li {
background: url(../images/bullet.png) no-repeat 0 15px;
color: #544b34;
line-height: 30px;
list-style: none;
margin: 0;
padding: 0 0 0 15px;
text-shadow: 0 1px 0 #c7b997;
}
#body .content ul.section li {
background: none;
list-style: decimal;
padding: 0;
margin: 0 0 0 22px;
}
#body .content ul.contact li {
background: none;
padding: 0;
}
#body .content ul li a {
color: #544b34;
text-decoration: none;
}
#body .content ul li a:hover {
color: #403721;
}
#body .content .body {
background: url(../images/bg-section.jpg) no-repeat;
height: 258px;
margin: 40px auto;
padding: 0;
width: 919px;
}ol.thumb-grid li {
float: left;
width: 15%;
margin: 0 5% 5% 0;
}
ol.thumb-grid li:nth-child(5n) {
margin-right: 0;
}
ol.thumb-grid li a img {
width: 100%;
}
#body .content .body div {
margin: 0;
padding: 0 0 0 40px;
width: 400px;
}
#body .content .body div h3 {
color: #fff;
font-size: 20px;
font-weight: normal;
letter-spacing: 1px;
margin: 0;
padding: 35px 0 0;
text-transform: uppercase;
text-shadow: none;
}
#body .content .body div h1 {
color: #fff;
font-family: "Times New Roman", Times, serif;
font-size: 54px;
letter-spacing: 2px;
margin: 0;
padding: 10px 0 20px;
text-transform: uppercase;
text-shadow: none;
}
#body .content .body div p {
color: #d1d1d1;
line-height: 24px;
letter-spacing: 1px;
margin: 0;
padding: 0 30px 0 0;
text-align: justify;
text-shadow: none;
}
#body .content .body div p a {
color: #d1d1d1;
}
#body .content .body div p a:hover {
color: #fff;
}
#body .content .section p {
padding: 0 0 30px;
}
#body .content .article {
margin: 0;
padding: 15px 0 0;
}
#body .content .article li {
list-style: none;
margin: 0;
overflow: hidden;
padding: 10px 0;
}
#body .content .article li a.figure {
display: block;
float: left;
margin: 0 20px 0 0;
padding: 0;
}
#body .content .article li a.figure:hover {
opacity: 0.8;
}
#body .content .article li img {
border: 1px solid #8d8064;
display: block;
}
#body .content .article li div {
float: left;
margin: 0;
padding: 0;
width: 609px;
}
#body .content .article li div h3 {
line-height: 16px;
padding: 0 0 10px;
}
#body .content .article li div span {
display: block;
margin: 0;
padding: 0;
}
#body .content .article li div span b {
display: inline-block;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
width: 55px;
}
#body .content .blog {
float: left;
margin: 0;
padding: 0;
width: 660px;
}
#body .content .blog p {
padding: 0 0 30px;
}
#body .content .sidebar {
float: left;
margin: 0;
padding: 0 0 0 30px;
width: 230px;
}
#body .content .sidebar h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
padding-top: 36px;
}
#body .content .sidebar ul li a {
text-decoration: none;
}
#body .content .sidebar ul li a:hover {
text-decoration: underline;
}
#footer {
background: url(../images/bg-footer.png) repeat-x top center;
margin: 0;
padding: 50px 0 60px;
}
#footer div {
margin: 0 auto;
overflow: hidden;
padding: 0;
width: 920px;
}
#footer ul {
float: left;
margin: 0;
overflow: hidden;
padding: 0;
}
#footer ul li {
float: left;
list-style: none;
margin: 0 20px 0 10px;
padding: 0;
}
#footer ul li a {
background: url(../images/icons.png) no-repeat;
display: block;
height: 22px;
margin: 0;
padding: 0;
text-indent: -9999px;
}
#footer ul li.twitter a {
background-position: 0 0;
width: 28px;
}
#footer ul li.twitter a:hover {
background-position: -33px 0;
}
#footer ul li.facebook a {
background-position: 0 -27px;
width: 22px;
}
#footer ul li.facebook a:hover {
background-position: -33px -27px;
}
#footer ul li.googleplus a {
background-position: 0 -54px;
width: 22px;
}
#footer ul li.googleplus a:hover {
background-position: -33px -54px;
}
#footer p {
color: #3a3e2c;
float: right;
font-size: 12px;
letter-spacing: 1px;
line-height: 19px;
margin: 0;
padding: 0;
}
     
    Geoff Tyrer, Sep 23, 2013
    #8
  9. langerhead

    langerhead New Member

    Hi Geoff, I zipped up my site (attached below) so you can see how the dropdown menu is hidden by the pictures, the index page is the only one i've added your html to yet. If you have a paypal account or similar I would be happy to donate something for the time you've spent on this.
     

    Attached Files:

    langerhead, Sep 25, 2013
    #9
  10. Geoff Tyrer

    Geoff Tyrer Member

    Hi langerhead,

    Studied your HTML and CSS markup...
    First of all the centering problem - that seems to have been a misunderstanding and probably my fault. The commenting-out should have been as follows:
    Code:
    #header ul {
    background: url(../images/menu-border.gif) no-repeat bottom left;
    margin: 0 auto;
    /*overflow: hidden;*/
    padding: 0 0 0 1px;
    width: 750px;
}
    In other words just comment out overflow: hidden;
    Note that I also had to increase the width to 750px to avoid the navigation bar overflowing onto two lines.

    Second a bit of a typo I think:
    Code:
    <li>
    <a href="#">services</a>
    <ul class="sub-menu">
        <li>
            <a href="1.html">Sub Menu 1</a>
        </li>
        <li>
            <a href="#">Sub Menu 2</a>
        </li>
        <li>
            <a href="#">Sub Menu 3</a>
        </li>
        <li>
            <a href="#">Sub Menu 4</a>
        </li>
    </ul>
</li> /* THIS WAS MISSING*/
    In other words the closing </li> was missing.

    Three - bringing the sub-menu forward to it appears above the image
    I just added z-index: 100; as in the following:
    Code:
    /*sub menu*/
ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;
    z-index: 100;
}
    Have attached my HTML and CSS files just in case:
     

    Attached Files:

    Geoff Tyrer, Sep 26, 2013
    #10