need help with a meny for my website

M

Magellan

New Member
I'm having trouble with the meny on my site..

if you click on the link below you can see for yourself what the problem is. The submeny that shows when you click on something in the main meny is out of place when you hoover over it with the cursor.. it should show the green image that you can see to the left, but it shows the blue image wich is supposed to only be shown in the main meny..

here is the css code for the meny:

#menycontainer{margin-left: 0em; width: 220px; font-size: 120%; border-top: 0px solid #cccccc; border-left: 0px solid #CCCCCC; border-right: 0px solid #cccccc; border-bottom: 0px solid #CCCCCC;}

#meny{margin: 0; padding: 0; list-style-type: none;}
#meny a{display: block; margin: 0; padding: 0em; background: transparent url(knapp.png); padding: 0em; text-decoration: none; height: 40px; border-bottom: 0px solid #cccccc;}
#meny ul{list-style-type: none;}
#meny ul a{margin: 0; padding: 0em; background: transparent url(underknapp.png);}

#meny a:link{color: #ffffff;}
#meny a:visited{color: #ffffff;}
#meny a:hover{background: transparent url(knapp2.png);}
#meny a#current{background: transparent url(knapp2.png);}
#meny a#subcurrent{background: transparent url(underknapp2.png);}
#meny ul:hover{background: transparent url(underknapp2.png);}

here is a link to the website:

https://files.itslearning.com/data/1278/13826/Projektarbete/index.html

I have tried to get help in some other forums before this one but I haven't got any answers... I hope someone here can help me!
 
Last edited:
PixelPusher

PixelPusher

Super Moderator
Staff member
Magellan, you have quite a few issues with your code (over usage of tags mostly). Here are my suggestions:

Your Links:
HTML: 
<a id="current" href="index.html">
         <center>Matte B</center>
</a>

You dont need to use a center tag. Just add "text-align:center" to the css for the anchor (a) tags. I would also adjust the line height so that the text aligns vertically in the middle. I would also add "line-height:40px" (or maybe 38px).

Your Menu (Meny):
HTML: 
<div class="bakgrundsbox">
    <div id="menybox">
        <div id="menycontainer">
             <ul id="meny">
                  <li>....

This is what I mean about an overuse of tags. A list (UL) has the same block-level elements as a division (DIV). There is no reason to "wrap" a list in a div, just apply the styles from the div to the list.

I see your issue with the menu. Here is how it should be done:

Markup
HTML: 
<ul class="main">
    <li><a href="">Main Level Link</a>
       <ul>
           <li><a href="">Sub Level Link</a></li>
    </li>
    <li><a href="">Main Level Link2</a></li>
</ul>

CSS
Code: 
ul.main {
width:"yourMenuWidth"
margin:0;
padding:0;
}
ul.main li {
list-style-image:none;
list-style-type:none;
margin:0;
padding:0;
}
ul.main li a:link,  ul.main li a:visited {
display:block;
height:40px;
width:"yourLinkWidth"
line-height:38px;
background:url(theStaticGreyImage.png);
}
ul.main li a:hover {
background:url(theHoverBlueImage.png);
}
ul.main ul li a:link, ul.main ul li a:visited {
width:"yourSubLinkWidth"
}
ul.main ul li a:hover {
background:url(theHoverGreenImage.png);
}

Ok so give that a whirl. Now this is off the top of my head so I may have missed an element, but if you run into an issue don't hesitate to ask.

Good luck
 
You must log in or register to reply here.
Top