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

       

      R

        • 1. Re: changing vertical drop down to horizontal
          uogecko

          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