Web Analytics Made Easy -
StatCounter Horizontal drop down menu - CodingForum

Announcement

Collapse
No announcement yet.

Horizontal drop down menu

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    Try
    Code:
    #access ul ul {
    [ICODE]top: 1.5em;[/ICODE]/* adjust the value, if required */
    left: 0;
    width: 123px;
    }
    Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

    Comment


    • #3
      thank you that worked for me!

      Comment

      Working...
      X
      😀
      🥰
      🤢
      😎
      😡
      👍
      👎