Jump to content

CSS structure


CNT

Recommended Posts

#navbar li:hover ul  /* this displays the 1st submenu when mouse over the main menu */{	display: block;	position: absolute;}#Navbar li:hover ul li li  /* this displays the 2nd submenu when mouse over the 1st submenu */{	display: block;	width: auto;}

The first bit is almost correct. It actually targets any ul that is a descendant of your navbar. In other words, all your submenus. Just add a > symbol before the ul so it looks like this: #navbar li:hover > ulThis selector will then target any submenu, but not all of them. What I mean is, the way you originally had it, all your submenus would appear at the same time. This way, only the direct descendant will appear, but this selector will work no matter how deeply nested you have submenus.The second one does indeed need some adjusting. You are actually targeting the li elements within a ul within a li within a ul within a hovered li. So actually it would be the list items in the third submenu. The selector should look more like this: #navbar li li:hover ulSince the first selector handles the display, you don't need to set it in this selector again (though it doesn't hurt anything if you do, it's just extra markup). All you need in here are styles specific to the second submenu (ie, like if it should have a different color background)If you need to move an elements position* a little, you just add top or left properties (ie, top: 6px; will push the menu down 6px)*This is assuming the element is positioned relatively or absolutely. Your submenus are positioned absolutely so you're fine.I hope all that made sense. :)

Link to comment
Share on other sites

HTML

<div><ul id="navbar"><li><a href="index.htm">Home</a></li><li><a href="#">Something</a></li><li><a href="#">Woodshop</a></li><li><a href="#">History</a><ul>	<li><a href="#">The beginning</a><ul>		<li><a href="#">The VERY beginning</a></li>		<li><a href="#">The early days</a></li></ul></li>	<li><a href="#">The present</a></li></ul></li><li><a href="#">Contact me</a></li></ul></div>

CSS

/* navigation menu section */#navbar{	margin: 0;	border: 0;	padding: 0;}#navbar li  /* this displays the main menu to horizontal */{	list-style-type: none;	float: left;}#navbar li li  /* this displays all the submenus to vertical */{	float: none;}#navbar li a{	display: block;	text-decoration: none;	background: #000000;	color: #ffffff;	padding: .2em .5em;	width: auto;	font-size: 1.5em;}#navbar li ul  /* this hides the 1st submenu */{	display: none;}#navbar li li ul  /* this hides the 2nd submenu */{	display: none;}#navbar li:hover > ul  /* this displays the submenu when mouse over the main menu */{	display: block;	position: absolute;}#navbar a:hover  /* this changes the menu to yellow when mouse over the menu */{	background-color: #ffff00;	color: #000000;}

Thanks to ShadowMage for resolved the Q#1 and Q#6. The Q#2-5 still remains... The code is updated and the link too.The submenus needs adjusting.2) Need to move the 1st submenu little more closer to the left, but would like to dropdown right under "H" (like a slight index). Would that be padding or block?3) Need to keep the main menu highlight yellow ("History") while mouse over the submenu(s). The same for "The beginning" while mouse over the "The VERY beginning" or "The early days".4) Need to display the 2nd submenu next to the 1st submenu, not overlap.5) Need to display the background-color red in the "The VERY beginning", only that block. Yet, upon mouse over, it displays yellow (as normal).Chuck

Link to comment
Share on other sites

Well, I did actually answer 2 & 4:

If you need to move an elements position* a little, you just add top or left properties (ie, top: 6px; will push the menu down 6px)*This is assuming the element is positioned relatively or absolutely. Your submenus are positioned absolutely so you're fine.
I just didn't show you the code. For this to work decent you'll have to add position: relative; to the following selector: #navbar liThat will create a container for your elements to be positioned by. I'll show you the selectors you need to use to position the elements but I'll leave the rest up to you to try first.This selector will target all of your submenus, you'll need to use it to position your submenus#navbar li:hover > ulThis will target only the first submenu, since the selector is more specific these styles will override those set in the above selector and position only the first submenu#navbar > li:hover > ulFor question 5, you'll have to add an id to that li, as in:<li id='red_bg'><a href="#">The VERY beginning</a></li>Then in the CSS add:#red_bg a:hover { background-color: red !important; /* !important makes this style override others */}As for number 3.....I have no idea. :) CSS doesn't have any parent selectors. I know it works when you don't have anchors inside the li's and use li:hover instead but how to make it work with anchors is a mystery to me.EDIT: Ah! Got it!Set the background of your anchor tags (#navbar li a) to transparent.Set the background of your li tags (#navbar li) to black.Then, change #navbar li a:hover to #navbar li:hover so that the li changes it's background when hovered instead of the anchor.You'll then have to create the following selector: #navbar li:hover > a to change the color of the anchors to black.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...