Styling a footer nav

Hi team I have had a search about for the solution but i cant find what i need.

My css file which i am trying to sort a autonav block in the footer.

What I want is the 1st level pages across the top with their relevant sub pages under them. I also want to bold the main pages and smaller font fro sub pages and links etc but I can do this after i have managed to display them as lists. I have added the nav by adding a block to the footer and adding an auto-nav.

I have also created the footer nav page which is selected and have the only include pages set-up and working. I think the issues is i am also using the autonav block for the drop down menu using css.
<code>#footer-nav {
Padding: 10px;
text-align: left;
color: #909090;
overflow: auto;


#footer-nav a {color: #909090; text-decoration: none;}
#footer-nav a:hover {color: #ffffff; text-decoration: none;}

#footer-nav ul {
width: 700px;
height: 120px;
padding: 10px;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
list-style: none;
border: 1px solid green;


#footer-nav li {
float: left;
padding: 10px 20px 10px 20px;
border: 1px solid blue;

#footer-nav u1 li {
float: left;
padding: 60px 20px 20px 20px;
color: #ffffff;
font-size: 10px;
border: 1px solid yellow;
.navigation ul.nav { list-style: none; display: inline;}
.navigation ul.nav li { display: inline; padding: 8px; }
.navigation ul.nav li a { text-decoration: none; display: inline; }</code>

Footer php I don't just have a nav bar in here I have a content block and image block under it which is y I used a normal area

<div id="footer">
<div class="navigation">
<div id="footer-nav">
$a = new Area('Footer Content');
$a->display($c); // footer editable region

Any help or point in right direction thanks

Carl Lee

View Replies:
adajad replied on at Permalink Reply
You can create your own custom template, which you haven't done if I'm correct.

Or you could try out the 'Manual Nav' add-on by jordanlev:
carl101lee replied on at Permalink Reply
Good Morning

Thanks for your reply I didn't know there was another simple nav block I will try it. Thanks

In regards to my request I am sure I should be able to do it. I have also created a customer template page "footer Nav" which I have used to have the include page options. which I followed from here,

That works fine It's sorting arranging the menus I am having issues with.

What I need to know is how to separate out the sub pages into different areas under there parents.

weyboat replied on at Permalink Reply
You have this code in your css
#footer-nav u1 li {
float: left;
padding: 60px 20px 20px 20px;
color: #ffffff;
font-size: 10px;
border: 1px solid yellow;

there is an error here at #footer-nav u(numeral 1 instead of letter l) li {
carl101lee replied on at Permalink Reply
Thanks for your responce.

I had already noticed that as it goes and had already changed with no luck.

I am a little confused with the nav styling, I thought as I have with the dropdown menu.

#div ul {}styled lvl 1 pages

#div ul li {} was for lvl 2 pages
#div ul li li {} was lvl2/3 pages but This is not so or do i have to state this in footer_menu.php or in the css like this as you do for a dropdown menu.

#footer-nav .navigation1, .navigation1 * { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
#footer-nav .navigation1 { line-height: 1.0; font: 10px;}
#footer-nav .navigation1 ul { position: absolute;   width: 150px; background-color: #3A3939;
 /* left offset of submenus need to match (see below) */ }
#footer-nav .navigation1 ul li { width: 400px; }
#footer-nav .navigation1 li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */}
#footer-nav .navigation1 li { float: left; position: relative; width: auto; background-color: yellow;}
#footer-nav .navigation1 a { display: block; position: relative;}
#footer-nav .navigation1 li:hover ul,.navigation li.sfHover ul { left: 10px; top: 45px;  /* match top ul list item height */ z-index: 3; background-color: pink;}
#footer-nav ul.navigation1 li:hover li ul,ul.navigation1 li.sfHover li ul { top: -999em;}
#footer-nav ul.navigation1 li li:hover ul,ul.navigation1 li li.sfHover ul { left: 150px; /* match ul width */ top: 0px; background-color: pink;}
#footer-nav ul.navigation1 li li:hover li ul,ul.navigation1 li li.sfHover li ul { top: -999em; background-color: pink;}
#footer-nav ul.navigation1 li li li:hover ul,ul.navigation1 li li li.sfHover ul { left: 150px; /* match ul width */ top: 0px;}

Thanks for any help. The code above is what i used with out #footer-nav in front for the drop down menu at the top of the page!
weyboat replied on at Permalink Reply
The url to an example would be very useful.
carl101lee replied on at Permalink Reply
Hi there

The site is here ATM --

It is the footer nav which I am trying to make look like this

Top Headers in bold sub pages underneath

Home Products & Services Support About Us

With there relevant sub pages listed under their parents.

Home Website Monitoring Support Options Company
Web Transaction Monitoring Submit a Ticket Our Network
Server Monitoring Email Support Contact Us

If this helps

weyboat replied on at Permalink Reply
This is the code from your top nav bar which is working fine, I have tidied it up to make it readable,
<div id="nav1">
      <ul class="nav">
         <li class="nav-selected nav-path-selected"><a class="nav-selected nav-path-selected"  href="/cms/concrete5/">Home</a></li>
         <li><a href="/cms/concrete5/index.php/about/"  >About</a>
                <li><a href="/cms/concrete5/index.php/about/contact-us/"  >Contact Us</a></li>
                <li><a href="/cms/concrete5/index.php/about/guestbook/"  >Guestbook</a></li>
         <li><a href="/cms/concrete5/index.php/blog/"  >Blog</a>
                 <li><a href="/cms/concrete5/index.php/blog/nearly-half-of-consumers-are-buying-more-items-online-this-year/"  >Nearly half of consumers are buying more items online this year:</a></li>
                 <li><a href="/cms/concrete5/index.php/blog/hello-world/"  >Tital</a></li>
                 <li><a href="/cms/concrete5/index.php/blog/the-new-world-of-application-performance-management/"  >The New World of Application Performance Management:</a></li>

And here is the code from your bottom nav bar
<div class="navigation1">
 <div id="footer-nav">
   <div id="ccm-layout-wrapper-365" class="ccm-layout-wrapper">
     <div id="ccm-layout-footercontent-5-1" class="ccm-layout ccm-layout-table  ccm-layout-name-FooterContent-Layout-1 ">
        <div class="ccm-layout-row ccm-layout-row-1">
          <div class="ccm-layout-5-col-1 ccm-layout-cell ccm-layout-col ccm-layout-col-1 first" style="width:100%"> </div>
            <div class="ccm-spacer"></div>
         <div id="ccm-layout-wrapper-364" class="ccm-layout-wrapper">
           <div id="ccm-layout-footercontent-4-2" class="ccm-layout ccm-layout-table  ccm-layout-name-FooterContent-Layout-2 ">
            <div class="ccm-layout-row ccm-layout-row-1">
              <div class="ccm-layout-4-col-1 ccm-layout-cell ccm-layout-col ccm-layout-col-1 first" style="width:79%">
              <ul class="nav-header">

As you can see the bottom nav bar inside several divs and the lists are not coded properly to become drop downs (see the top example)

I will have another look to see what can be done..