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
    New Coder
    Join Date
    May 2003
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Horizontal drop down menu

    Hello,

    I have this code for a horizontal drop down menu but the problem is that sub menu appears on top of menu.

    Can someone help me to change the level 2 css in order to appear in the bottom of level 1?

    Thank you in advance.

    Code:
    #access .menu-header,
    div.menu {
    	font-size: 13px;
    	margin-left: 0px;
    	width: 1000px;
    }
    #access {
    	display: block;
    	float: left;
    	width: 1000px;
    	position: absolute;
    	border-top: 1px #ffffff solid;
    	border-bottom: 1px #ffffff solid;
    	background-color: #999;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: auto;
    	bottom: 0px;
    }
    
    #access a {
    	width: 123px;
    	font-size: 1em;
    	color: #FFF;
    	font-weight: bold;
    	padding-top: 0px;
    	padding-right: 10px;
    	padding-bottom: 0px;
    	padding-left: 10px;
    	text-align: center;
    }
    
    #access a span {
    	color: #999999;
    	font-size: 0.9em;
    	text-transform: lowercase;
    	font-weight: normal;
    	display: block;
    }
    
    
    
    #access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a, #access ul li.current-menu-item > a, #access ul li.current-menu-parent > a {
    	color: #fff;
    	background: #b9d755;
    }
    
    #access ul li.current_page_item > a span, #access ul li.current-menu-ancestor > a span, #access ul li.current-menu-item > a span, #access ul li.current-menu-parent > a span {
    	color: #fff;
    	background: #b9d755;
    }
    #access li:hover > a, #access ul ul :hover > a, #access li:hover > a span, #access ul ul :hover > a span {
    background: #b9d755;
    color: #fff;
    }
    #access ul ul {
    top: 0px;
    left: 0;
    width: 123px;
    }
    #access ul ul li {
    min-width: 123px;
    }
    #access ul ul a {
    	background: #4da9ca;
    	color: #fff;
    	width: 123px;
    	padding-top: 0px;
    	padding-right: 10px;
    	padding-bottom: 0px;
    	padding-left: 10px;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try
    Code:
    #access ul ul {
    top: 1.5em;/* adjust the value, if required */
    left: 0;
    width: 123px;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    May 2003
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thank you that worked for me!


  •  

    Tags for this Thread

    Posting Permissions

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