Menu help

HTML & CSS
1

hi folks,
i am creating this menu (for testing purpose) and i am facing two issue,
1.when i rollover the menu, the hover class is limited to the text only, i tried giving hover class display:block but it didn’t work.
2. there is some leftover of the background on the li which has a active class. here is the code


<html>
	<head>
		<title></title>
		<style type="text/css">
		#submenu ul{width:100px}
		#submenu li{list-style:none; margin-bottom:10px; background:#ffc666; padding:0 4px 0 4px;}
		#submenu a{color:white;}
		#submenu a:hover{background:#fcfb54;}
		#submenu a.current{background:#666; display:block;}
		
		</style>
	</head>
	
	<body>
	<div id="submenu">
		<ul>
			<li><a class="current" href="test.html">Home</a></li>
			<li><a href="">About</a></li>
			<li><a href="">Contact</a></li>
			<li><a href="">Link to Us</a></li>
		</ul>
	</div>
	</body>
</html>

moreover i need some more help, i wanna have sub menu under about, lets say “My Bio” and “what i do”,but i want it hidden by default but when someone click on about the submenu open below about us, like a tree structure. how is that possible?

2

Negative margins are fine, though generally for design aspecs you shouldn’t need it (though I admit some cases you do need it)

3

Hi,

The anchor needs to be display:block but if you want it full width then you need the padding on the anchor and not on the list because that will make the anchor narrower.


#submenu ul {
    width:100px
}
#submenu li {
    list-style:none;
    margin-bottom:10px;
    background:#ffc666;
}
#submenu a {
    color:white;
  [B]  padding:0 4px;
    display:block;
    width:92px;/* ie6 needs haslayout or won't hover over the whole block*/[/B]
}
#submenu a:hover {
    background:#fcfb54;
}
#submenu a.current {
    background:#666;
}

If you want subnavigation then you would nest another ul and then use some javascript to hide and show it when clicked.


    <ul>
        <li><a class="current" href="test.html">Home</a></li>
        <li><a href="">About</a>
            <ul>
                <li><a href="#">Sub navigation</a></li>
                <li><a href="#">Sub navigation</a></li>
                <li><a href="#">Sub navigation</a></li>
                <li><a href="#">Sub navigation</a></li>
            </ul>
        </li>
        <li><a href="">Contact</a></li>
        <li><a href="">Link to Us</a></li>
    </ul>

Here’s a very basic example but there are some much better ones around. If you can’t manage it yourself then there are plenty of jquery menus around that will do the same.

4

You should give the general a class the padding and display block:


#submenu a {
    padding:0 4px 0 4px; display: block; color:white;
}

#submenu a:hover,
#submenu a:focus {
    background:#fcfb54;
}

#submenu a.current{
    background: #666;
}
5

Ah! i was able to fix it. i was using positioning. which makes the images stay there even if they are not there. so i removed the positioning and used margin-top:-80px to make the icons comes up and sit on the background bar. so this got me thinking, whereas positioning is somewhat cumbersome. is margin in negative value ok? without using positioning

6

none of the above are center align.

7

Hi again, i have a problem relating to menu alignment. so i thought i should post here as we are talking about menu. i have this image file which served as a navigation but i wanna make it more generic, giving user a clean UI, if you see this it worked perfectly fine. while when i comment one li it become[URL=“http://pixelndots.org/sandbox/Example2.php”] this where as i want it to be centered aligning each other parallel

8

Hello emaar,
If you remember I had coded that page for you once before. You got rather upset because some of your client info was left in the code I posted which resulted in the entire thread being deleted.

I did track it down in a google screenshot and I was able to recover the code. I am going to try this once again with you, I have removed all incriminating code from the page and used sample images and text in place of yours.

Here is a link to the original code with google friendly adjustments to it.

Hope that helps

9

:frowning: i forgot js long time back, i have idea what i wanna use on it. its accordion type of js