www.webdeveloper.com
Results 1 to 2 of 2

Thread: Positioning sub menu

  1. #1
    Join Date
    Oct 2007
    Posts
    113

    Positioning sub menu

    Here is my css code for the menu

    HTML Code:
    #menu
    {
    	position: relative;
    	z-index: 2;
    	height: 2.5em;
    	margin-top: 1px;
    	border-right: 1px solid #003399;
    	border-bottom: 1px solid #003399;
    	background-color: #0066CC;
    	background-image: url("images/px_3399ff.gif");
    	background-repeat: repeat-x;
    }
    
    * html #menu
    {
    	height: 2.35em;
    }
    
    #menu ul
    {
    	float: left;
    	border-right: 1px solid #3399FF;
    	list-style: none;
    }
    
    #menu li
    {
    	float: left;
    	position: relative;
    }
    
    #menu a
    {
    	display: block;
    	border-top: 1px solid #3399FF;
    	border-left: 1px solid #3399FF;
    	border-right: 1px solid #003399;
    	border-left: 1px solid #3399FF;
    	padding: 0.5em 16px;
    	color: #FFFFFF;
    	text-decoration: none;
    }
    
    * html #menu a
    {
    	height: 1px;
    	float: left;
    }
    
    #menu li.on a
    {
    	border-top-color: #197FE5;
    	border-left-color: #197FE5;
    	color: #FFCC00;
    	background-color: #004CB2;
    	font-weight: bold;
    }
    
    #menu a:hover
    {
    	background-color: #004CB2;
    }
    
    
    #menu li ul { /* second-level lists */
    	position: absolute;
    	background: #3197FD;
    	width: 15.5em;
    	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    	top: 2.35em;
    }
    
    #menu li ul  a
    {
    	border-top: 1px solid #0167CD;
    	border-bottom: none;
    	border-right: none;
    	border-left: none;
    	width: 13em;
    }
    
    #menu li:hover ul, #menu li.sfhover ul { /* lists nested under hovered list items */
    	left: auto;
    	left: 0;
    }
    
    
    #menu li ul ul { /* third-and-above-level lists */
    	margin: -2em 0 0 15.5em;
    }
    
    #menu li:hover ul ul, #menu li.sfhover ul ul {
    	left: -999em;
    }
    
    #menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */
    	left: auto;
    	}
    
    #menu li  li  ul a
    {
    	border-top: 1px solid #0167CD;
    	border-bottom: none;
    	border-right:none ;
    	border-left: none;
    	width: 13em;
    	color : white;
    	background:#8FC7FF;
    }
    I create dropdown navigating menus by a supplementary javascript code.

    It third level menus work fine on ie7 and firefox.
    But when it comes to ie6, submenu appears below the main menu item right next to the one the it belongs to.

    How i can resolve this problem?

    You can see the site that i am working on from this link : http://www.kumyapi.com.tr/

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Use left:0 instead of auto :
    Code:
    #menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */
    	left: 0;
    	}

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