www.webdeveloper.com
Results 1 to 4 of 4

Thread: vertical suckerfish menu

  1. #1
    Join Date
    Jul 2006
    Posts
    110

    vertical suckerfish menu

    Hello again!
    I am asking for help again. This time I am do some changes to the menu of a clients site. He is adding content and I wanted to go from a plain navigation column to the vertical suckerfish menu. I am happy with the way it is turning out but I do have some issues and I will explain them and add links here. I have looked at it in 3 browsers and am so far happy. It validates except for the google map link??

    The original site is at http://www.raddcruisers.ca
    my testing site is at http://www.raddcruisers.ca/menu_test_flyout.html

    The problem (I'm pretty sure?) is with my widths (but maybe not) in the css. I've combined menus to get what I have now. I have combination px and ems which probably isn't right..... anyways what I notice is when I am working on it in dreamweaver with a split screen, and I try to add say a paragraph or a heading tag below this menu it shoves my left column out to the right. So of course I'm doing something wrong and hit undo a few times but the column remains out to the right. Please have a look at my pages here. I appreciate it allot as always

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Try these changes :
    Code:
    #nav, #nav ul { /* all lists */
    		margin: 0;
    		padding: 0;
    		list-style-type: none;
    		float : left;
    		width : 170px;
    	}
    	
    	#nav li { /* all list items */
    		position : relative;
    		float : left;
    		line-height : 1.35em;
    		margin-bottom : -1px;
    		width: 100%;
    	}
    	
    	#nav li ul { /* second-level lists */
    		position : absolute;
    		left: -999em;
    		top: 0;
    	}
    	
    	#nav li ul ul { /* third-and-above-level lists */
    		left: -999em;
    	}
    	
    	#nav li a {
    		width: 148px;
    		display : block;
    		color : #E7DFC2;
    		font-weight: bold;
    		background-color : #CC0000;
    		padding: 2px 10px;
    	text-decoration: none;
    	border-top: 1px solid #E7DFC2;
    	border-bottom: 1px solid #aaa;
    	border-left: 1px solid #E7DFC2;
    	font-size: 12px;
    	}
    	
    	#nav li a:hover {
    	background-color:#CC0000;
    	color:#000;
    	padding: 2px 1px 2px 20px;
    	border-left:10px solid #000000;
    	width: 138px;
    	}
    	
    	#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    		left: -999em;
    	}
    	
    	#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
    		left: 170px;
    	}

  3. #3
    Join Date
    Jul 2006
    Posts
    110

    vertical suckerfish

    Thankyou very much for your time. That worked perfect. I'm wondering what this means with the width one afer another and the slash in the second one
    width: 148px;
    w\idth : 148px;

  4. #4
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Its a hack to be able to feed a different width setting to different browsers - can't remember what it targets and how as I never use that particular hack. Safe to remove the one with the slash.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles