Problem with getting foot menu to appear inline (using css and html)

[tony webb]

I am trying to update my website by breaking up some of the longer pages. Hopefully it will download a bit quicker!
I am using the same design for all pages and am trying to link all html files to an index.css file. For some reason the footer menu doesn't work properly. I have tried to cut and past it from the current version of my site but that isn't working either.

This is how the page footer should look like.
This is how it looks at the moment

You can see all the code by clicking on file source for the website page. I have C&P the main code below.

This is the html code for the footer menu;

<div id="foot-menu">
<nav>
 <ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="Free-studies-to-download.html">Studies</a>
   <ul>
    <li><a href="Free-studies-to-download.html#study-1">What do Christians believe about God?</a></li>
    <li><a href="Free-studies-to-download.html#study-2">Accepted as you are</a></li>
    <li><a href="Free-studies-to-download.html#study-3">Reconciliation</a></li>
    <li><a href="Free-studies-to-download.html#study-4">What is Baptism?</a></li>
    <li><a href="Free-studies-to-download.html#study-5">Forgiveness</a></li>
    <li><a href="Free-studies-to-download.html#study-6">The Holy Spirit</a></li>
    <li><a href="Free-studies-to-download.html#study-7">Satan, the Devil</a></li>
    <li><a href="Free-studies-to-download.html#study-8">1 Kings and Elijah</a></li>
   </ul></li>
  <li><a href="Free-books-to-download.html">Books</a>
   <ul>
    <li><a href="Free-books-to-download.html#study-1">What do Christians believe about God, Jesus and the Holy Spirit?</a></li>
    <li><a href="Free-books-to-download.html#study-2">All 8 Bible Studies</a></li>
    <li><a href="Free-books-to-download.html#study-3">Both Books Combined</a></li>
   </ul></li>
  <li><a href="author.html">Author</a><li>
  <li><a href="http://what-do-christians-believe.co.uk/wp">Food For Thought Blog</a></li>
  <li><a href="contact-what-do-christians-believe.html">Contact Us</a>
   <ul>
    <li><a href="contact-what-do-christians-believe.html">Simple Form - preferred method</a><li>
    <li><a href="MAILTO:info@what-do-christians-believe.co.uk">By email</a><li>
   </ul></li>
  <li><a href="sitemap.html">Site Map</a></li>
 </ul>
</nav>
 </div>
<div id="drop-down">
<a href="#guides">To Menu</a>
 </div>

This is the css code for the above menu;

#foot-menu {
    position: relative; width:660px;
    margin: 5px auto;
    padding: 5px 5px 40px;
    font-family: Arial,Verdana;
    font-size: 1.00em;
    list-style: none;
}
#foot-menu ul li {
    display: inline;
    float: left;
    position: relative;
}
#foot-menu li ul {
    display: none;width:auto;
}
#foot-menu ul li a {
    display: inline;
    float:left;
    padding: 0 10px 0 10px;
    border-right-color: #fff;
    border-right-style: solid;
    border-right-width: 1px;
    border-left-color: #fff;
    border-left-style: solid;
    border-left-width: 1px;
    text-decoration: none;
    color: blue;
    white-space: nowrap;
    background: silver;
}
#foot-menu ul li a:hover {
    background: #ff7f50;
}
#foot-menu li:hover ul {
    display: inline;
    position: absolute;
    top:18px;
    left:-1px; 
    margin:0;
    padding:1px 0;
    border-right-color: #fff;
    border-right-style: solid;
    border-right-width: 1px;
    border-left-color: #fff;
    border-left-style: solid;
    border-left-width: 1px;
    background: #fffff0;
}
#foot-menu li:hover li {
    z-index: 200;
    float: none;
    font-size: 0.90em;
}
#foot-menu li:hover a {
    background: #fffff0;
}
#foot-menu li:hover li a:hover {
    background: #ff7f50;
}
a {
    text-decoration: none; 
 }
#drop-down {display: none;}

What do I need to do to resolve this problem?

Thanks for your help.

[LearningCoder]

Change this:

#foot-menu {
    position: relative; width:660px;
    margin: 5px auto;
    padding: 5px 5px 40px;
    font-family: Arial,Verdana;
    font-size: 1.00em;
    list-style: none;
}

To this:

#foot-menu ul {
    position: relative; width:660px;
    margin: 5px auto;
    padding: 5px 5px 40px;
    font-family: Arial,Verdana;
    font-size: 1.00em;
    list-style: none;
}

You are setting your <ul> styles on your <div>.

Kind regards,

LC.

[simplypixie]

You are missing a closing > on the div before your foot-menu div:

</div

<div id="foot-menu">

Add it in and your menu should work as expected

</div>

<div id="foot-menu">

[tony webb]

Thanks for your reply. Having read your reply I went back and looked at the current version. I hadn't named the division as you have shown in the test version.

I had to add 3 more </div> to get it to work exactly the same way!

But at least it works as it should now, which it couldn't have done without your help.