1 Reply Latest reply on Apr 9, 2010 4:14 PM by uogecko

    changing vertical drop down to horizontal

    BOC_RUSH Level 1

      Hello All


      I have a vertical drop down for a site I am designing and the powers that be want it changed to a horizontal  submenu - I have tried a few changes to the css and nothing is happening horizontally - I have been looking at it for so long I cant see whats wrong anymore - any ideas how I can get it to go horizontal?




      #topnav{ height: 27px; width:900px; margin: 0px; padding:0px; font-weight: bold; } #topnav ul { margin: 0px 0px 5px 0px; padding: 0; width: auto; float: left; list-style-type:none; } #topnav ul li{ margin: 0; padding: 0; height: 11px; float: left; position: relative; } #topnav ul li a{ color: #FFFFFF; font-weight: bold; text-decoration: none; padding: 6px 18px 10px 10px; height:11px; display: block; float: left; } #topnav ul li a:hover{ background-color: #cccccc; text-decoration: none; font-weight: bold; color: #fff; height: 15px;}


      here is the drop down part that needs to be horizontal


      #topnav ul li ul ul { margin: -20px 0px 0px 195px; } #topnav ul li li { width:auto; height: 27px; } #topnav ul li li a { color: #FFFFFF; text-transform: none; display: block; background: none; width: 175px; border-top: 1px solid #DDDDDD; border-left: 0px; padding: 7px 10px 8px 10px; height:0px; } #topnav ul li li a:hover{ background: none; background-color: #cccccc; left: 0; width: 175px; padding: 6px 18px10px 10px; height:10px; border-top: 1px solid #DDDDDD; } #topnav ul li ul { left: -999em; top: 27px; left: 0; display: block; height: 15px; width: 175px; position: absolute; z-index: 99; left: -999em; clear: left; margin-top: 0px; margin-left: 0px; } #topnav ul li:hover ul ul, #topnav ul li:hover ul ul ul { left: -999em; } #topnav ul li:hover ul, #topnav ul li li:hover ul, #topnav ul li li li:hover ul {left:auto;}


      any help is greatly appreciated



        • 1. Re: changing vertical drop down to horizontal

          Your CSS looks like it's a bit more complex than it needs to be but the first thing I recommend you do is change this property:


          #topnav ul li li a { display: block; }


          By default a link is an inline element meaning that it does not require a full horizontal line and you can put two of them horizontally next to each other.


          #topnav ul li {} on the other hand is a block level element so you'll want to either float them to the left or set them to display:inline;


          Email me if you have any other questions!


          Gecko Designs website design and development