css menu layout help

Discussion in 'CSS' started by Navarone, Oct 10, 2007.

0
  1. #1
    I have a new project coming on and I would really like to develope my menu in css. So I was looking for some help/advice on how to proceed.
    In the accompaning images there is a drop down shown for Designer Series menu option.

    Basically, you rollover Designer Series and a list appears and if you rollover an item in the list a smaller image of the item appears. There could even be some associated text with each smaller image but I am not sure.

    What is the best approach here in developing this for css?:)
     

    Attached Files:

    Navarone, Oct 10, 2007 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Same as always - UL inside a UL - in this case you have an image in the dropdown which works well since the most reliable cross browser dropdowns have a fixed total width... put the background-image with the flat background on the UL then toss in a couple wrapping DIV's to render the top and bottom rounded corners.
     
    deathshadow, Oct 10, 2007 IP
  3. Navarone

    Navarone Guest

    Messages:
    59
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I have never done anything like this before. Is there an example of what you are talking about?
     
    Navarone, Oct 11, 2007 IP
  4. le_gber

    le_gber Peon

    Messages:
    28
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Try googleing for suckerfish menu - the site is you want is htmldog
     
    le_gber, Oct 11, 2007 IP
  5. Navarone

    Navarone Guest

    Messages:
    59
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Before I get to far I thought I would show you what I have. This is a link to my development site: http://dev-rico-v2.virtualhorizons.com/default.aspx

    I just want to be sure I am heading in the right direction. I already encountered a problem with my rollover. Being totally nieve, I probably didn't put it in the correct place.

    Your help is appreciated.

    
/*main navigation*/

.main_nav {
	 position:absolute;
	 left: 28px;
	 top: 109px;	
	 
}

#nav, #nav ul
{ 
	padding: 0;
	margin: 0; 
	list-style: none;
}

#nav a 
{	
	font-family: Arial, sans-serif, Trebuchet MS;
	font-size: 16px;
	font-weight: bold;	
	text-decoration: none;
	display: block; 
	color: #ffffff;
}

#nav a:hover
{
	background-image: url('/images/menu_bg.gif');
	background-repeat:no-repeat;	
	width: 351px;
	height: 258px;
	font-family: Arial, sans-serif, Trebuchet MS;
	font-size: 16px;
	font-weight: bold;	
	text-decoration: none;
	display: block; 
	color: #FFCC33;
}

#nav li 
{
	float: left;
	color: #ffffff;	 
	padding: 0px 27px 0px 0px; /*top-right-bottom-left*/
 
}
    Code (markup):
     
    Navarone, Oct 12, 2007 IP