Client wanting dropdown menu with existing template

HTML & CSS
1

Hi guys - I need help again. I have a different client that purchased a template and likes the menu but wants a couple of the links to be dropdown style. I have added the code but it doesn’t look or work correctly. I do not want the images for the main nav to be included in the dropdown because it just wouldn’t look right considering how the images are put together. Just a background color or different image will be fine that matches the theme. However, since this is a purchased template I am working with, I am having trouble getting the code to work correctly. The dropdown is not hidden like it should be when the submenu is not hovered over.

The page is at http://foxdenwebsolutions.com/mitch/indextest.html and the css is at http://foxdenwebsolutions.com/mitch/css/style.css.

I need to get this working as soon as possible. Please let me know what I am doing incorrectly so I can get it fixed soon. Thanks.

2

Hi,

You’d need to change this rule as follows:


#header .menu {
    width:100%;
    background:url(http://foxdenwebsolutions.com/mitch/images/menu-tail.gif) top repeat-x;
    padding:16px 0 14px 0;
    margin-top:50px;
 [B]   /*overflow:hidden; remove*/
    float:left;
    clear:both;
    position:relative;
    z-index:99;[/B]
}

Then add these new rules after the existing menu rules.


#header .menu li{position:relative;}
#header .menu li ul{
    position:absolute;
    left:0;
    top:100%;
    margin:0 0 0 -999em;
    padding:5px 0;    
}
#header .menu li:hover ul{
    margin-left:0
}

#header .menu li li,#header .menu  li li a{
    float:none;
    width:152px;
}
#header .menu li li{margin:0}
#header .menu  li li a{
    border:1px solid #ccc;
    margin:0 0 -1px;
    padding:5px;
    width:140px;
    background:#f2f2f2;
}

That’s just a rough guide but you would need to add a script if you want IE6 to work (see suckerfish menus)or copy the routines [URL=“http://www.pmob.co.uk/temp/drop-down-basic-good.htm”]from here.

3

Thank you again Paul. Is there a way to use the images for the dropdown? I am not sure if they will end up looking weird or not.

4

You could place an <img> inside teh <li> (instead of an anchor (or an image inside an anchor))

Or a backgrouind image on the <li> or <a> :slight_smile:

5

Currently the template has <span><span> for the existing menu and I tried to add it to the new dropdown…looks awful. Here is the HTML code -

          &lt;div class="menu"&gt;
        	&lt;ul&gt;
                &lt;li&gt;&lt;a href="index.html" class="active"&gt;&lt;span&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="index-1.html"&gt;&lt;span&gt;&lt;span&gt;About Us&lt;/span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="index-2.html"&gt;&lt;span&gt;&lt;span&gt;Services&lt;/span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="index-3.html"&gt;&lt;span&gt;&lt;span&gt;Self Help&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;

</li>
<li><a href=“index-4.html”><span><span>Technology</span></span> </a></li>
<li><a href=“index-5.html”><span><span>Support</span></span></a>
<ul>
<li><a href=“#”>Link 1</a></li>
<li><a href=“#”>Link 2</a></li>
<li><a href=“#”>Link 3</a></li>
</ul>
</li>
<li><a href=“index-6.html”><span><span>Products</span></span> </a></li>
<li><a href=“index-7.html”><span><span>Contacts</span></span> </a></li>
</ul>
</div>

Here is the CSS code with new stuff being in bold -

#header .menu{ width:100%; background:url(…/images/menu-tail.gif) top repeat-x; padding:16px 0 14px 0; margin-top:50px; float:left; clear:both; position:relative; z-index:99;}
#header .menu ul{ padding-left:15px;}
#header .menu li{ float:left; font-size:1.077em; padding:0 8px;}
#header .menu a{ color:#47535f; text-decoration:none; display:inline-block; }
#header .menu a span{ display:block;}
#header .menu a span span{ padding:4px 21px 6px 21px;}
#header .menu a:hover, #header .menu .active{background:url(…/images/menu-item-tail.gif) repeat-x; color:#FFFFFF; text-decoration:none; color:#ffffff;}
#header .menu a:hover span, #header .menu .active span{ background:url(…/images/menu-item-left-bg.gif) no-repeat;}
#header .menu a:hover span span, #header .menu .active span span{ background:url(…/images/menu-item-right-bg.gif) top right no-repeat;}
#header .menu li{position:relative;}
#header .menu li ul{position:absolute; left:0; top:100%; margin:0 0 0 -999em; padding:5px 0;}
#header .menu li:hover ul{margin-left:0}

#header .menu li li,#header .menu li li a{float:none; width:100px;}
#header .menu li li{margin:0}
#header .menu li li a{border:1px solid #ccc; margin:0 0 -1px; padding:5px; width:100px; background:#f2f2f2;}

the images expancd and contract according to the size of the text they cover. They are specifically designed to go with the template meaning they have a wite background that looks terrible if it is not directly in the menu part…I guess that I could adjust the images to be transparent so when the dropdown happens, there is not a white background piece showing. I just want to make sure this can either work or not work so I can tell the client this is as far as I can tweak it.

6

Your link doesn’t seem to be working anymore so I can’t test this for you.

You can have images for the drop downs but as you already said they would need to have transparent corners if they need to pass over different backgrounds. of course if the corners are transparent then you can’t have a background colour or image to the underlying element either because that would show through the transparent corners.

It means that the corners need to be in their own elements at each side and not overlap the background colour of the link.

You would be better off having a fixed width dropdown with a single round image and making sure the link content doesn’t wrap to another line. Using images in dropdowns is very slow in IE though and becomes very clunky to use.

7

Here is the link…http://www.foxdenwebsolutions.com/mitch/index.html. If I do use separate images for the dropdown as you stated above, which line of the CSS code do I put them in so they show properly? Would I have to change the images that are already included in the template? Might be more complicated than I thought if I have to create new images that look like what is already created but as a single image instead of 3 parts. Why do they make templates so difficult to tweak?!

8

Hi,
If you want those round images in the drop down as well you would need something more complicated like this.


#header .menu {
    width:100&#37;;
    background:url(http://www.foxdenwebsolutions.com/mitch/images/menu-tail.gif) top repeat-x;
    padding:16px 0 14px 0;
    margin-top:50px;
    float:left;
    clear:both;
    position:relative;
    z-index:99;
}
#header .menu ul {
    padding-left:15px;
}
#header .menu li {
    float:left;
    padding:0 8px;
}
#header .menu a {
    color:#47535f;
    text-decoration:none;
    display:inline-block;
}
#header .menu a span {
    display:block;
}
#header .menu a span span {
    padding:4px 21px 6px 21px;
}
#header .menu a:hover, #header .menu .active {
    background:url(http://www.foxdenwebsolutions.com/mitch/images/menu-item-tail.gif) repeat-x;
    color:#FFFFFF;
    text-decoration:none;
    color:#ffffff;
}
#header .menu a:hover span, #header .menu .active span {
    background:url(http://www.foxdenwebsolutions.com/mitch/images/menu-item-left-bg.gif) no-repeat;
}
#header .menu a:hover span span, #header .menu .active span span {
    background:url(http://www.foxdenwebsolutions.com/mitch/images/menu-item-right-bg.gif) top right no-repeat;
}
#header .menu li {
    position:relative;
}
#header .menu li ul {
    position:absolute;
    left:0;
    top:100%;
    margin:0 0 0 -999em;
    padding:5px 0;
}
#header .menu li:hover ul {
 [B]   margin-left:10px;[/B]
}
#header .menu li li, #header .menu li li a {
    float:none;
    width:100px;
}
#header .menu li li {
    margin:0;
}
#header .menu li li a {
  [B]  /*border:1px solid #ccc;*/[/B]
   [B] margin:0 0 5px;[/B]
    width:80px;
 [B]   /*background:#f2f2f2;*/
    color:#fff;
    height:28px;
    line-height:28px;[/B]
}
#header .menu li li a {
    background:url(http://www.foxdenwebsolutions.com/mitch/images/menu-item-tail.gif) repeat-x;
[B]    height:28px;
    line-height:28px;
    float:left;
    clear:left;[/B]
}
[B]#header .menu li li a span {
    background:url(http://www.foxdenwebsolutions.com/mitch/images/menu-item-left-bg.gif) no-repeat;
    float:left;
    width:10px;
    margin-left:-10px;
    position:relative;
    height:28px;
}[/B]
[B]#header .menu li li a b {
    background:url(http://www.foxdenwebsolutions.com/mitch/images/menu-item-right-bg.gif) top right no-repeat;
    float:right;
    width:10px;
    margin-right:-10px;
    height:28px;
}[/B]
[B]#header .menu li li a:hover {color:#f00}[/B]




.....etc..

<li><a href="index-3.html"><span><span>Self Help</span></span></a>
    <ul>
        <li><a href="#">[B]<span></span><b></b>[/B]Link</a></li>
        <li><a href="#">[B]<span></span><b></b>[/B]Link</a></li>
        <li><a href="#">[B]<span></span><b></b>[/B]Link</a></li>
    </ul>
</li>
....etc

If course you will have to change the corners to transparent now.

I think it actually looks better as you have it now with the square drop down though :slight_smile: