Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1

    Question Vetical menu,need help with alignment,spacing, z-index

    Hello friends,

    I've been trying to alter the suckerfish vertical menu.

    Please have a look at the progress

    here

    All the images are of same width and the toggling images are opaque.
    Here I've used the very top and bottom " li " tags for displaying a head and tail.

    I want to display the submenu over the main menu a little bit slided over it.

    My questions are
    1) Why a small gap shown b/w the list when viewed through IE?
    2) How can I show all the items in a particular submenu over the main menu on its mouse over?
    3)How can I move all the link texts from left to some 10 or 15px right?

    regards,
    art

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    My html part is

    Code:
    <div id="menu"> 
        <ul id="nav">
          <li id="menu_top"></li>
    			  
        <li><a  href="#">Percoidei</a> 
          <ul>
            <li><a  href="#">Remoras</a> 
              
            </li>
            <li><a  href="#">Phtheirichthys</a></li>
            <li><a  href="#">Remora</a> 
          </ul>
        </li>
    			  			  
        <li><a  href="#">Percoidei</a> 
          <ul>
            <li><a  href="#">Remoras</a> </li>
            <li><a  href="#">Phtheirichthys</a></li>
            <li><a  href="#">Remora</a> 
          </ul>
        </li>
    			  			  
        
         <li id="menu_bottom" ></li>
        </ul>
    </div>
    where as my currrent css is

    Code:
    #menu_top{
    	width:200px;
    	height:74px;
    	background:url(tabs/1.gif) #c4c4c4;
    	position:relative;
    	border:1px solid green;
    }
    #menu_bottom{
        height:164px;
    	width:214px;
    	margin-top:0px;
    	position:relative;
    	padding:0px;
    	background:url(tabs/tail.gif) #c4c4c4;
    	border:1px solid green;
    }
    #nav {
    	padding-right: 0px; 
    	padding-left: 0px; 
    	padding-bottom: 0px; 
    	margin: 0px; 
    	width: 214px; 
    	padding-TOP: 0px; 
    /*	border:1px solid blue; */
    	list-style-type: none ;
    }
    #nav ul {
    	padding: 0px; 
    	margin: 0px; 
    	width: 214px; 
    	list-style-type: none;
    }
    #nav li {
    	margin: 0; 
    	padding:0;
    	width: 214px; 
    	position: relative;
    }
    #nav li ul {
    	margin-TOP: -26px; 
    	left: -999em;  
    	margin-left: 200px; 
    	position: absolute
    }
    #nav li A {
    	border: black 1px solid; 
    	DISPLAY: block; 
    	padding: 0; 
    	font-weight: bold; 
    	width: 214px; 
    	height:24px;
    	COLOR: black; 
    	background:url(tabs/2.gif);
    	TEXT-DECORATION: none
    }
    #nav li A:hover {
    	COLOR: blue; 
    	background:url(tabs/2_m.gif);
    	
    }
    and some javascript is also there.

    please help me!

  • #3
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by abduraooft View Post
    1) Why a small gap shown b/w the list when viewed through IE?
    IE6 and IE7 have some real nasty display quirks only occuring for the li element. I'm not even sure that they have been fully understood.

    As a start, try to use li {float: left}. I think that the rendering bug will disappear. As for your other issues, you'll need to add some :hover selection rules. See how it can be done: Suckerfish Dropdowns


  •  

    Posting Permissions

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