1. Home
  2. Forums Index
  3. Browser Side / CSS 11:23 am May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

nav drop down is horizontal not vertical

drop down is horizontal not vertical

         

weddingm

5:00 am on Apr 23, 2013 (gmt 0)

10+ Year Member



Hello,

I am adding a drop down to a field in my main navigation but it is coming up horizontal and not vertical. Can anyone straighten out my code?

Thanks!

Drop down goes -
-----
and not
-
-
-
- 

#main-menu{ background: #A93C76 url(https://www.samplesite.com/images/template/menu-left.gif) no-repeat left; width: 795px; float: left; height: 34px; z-index: 99;}
#mainlevel{list-style:none;font-weight:bold;margin:0 0 0 6px; text-transform: uppercase;}
#mainlevel li {float:left;text-align:center;position:relative; border-right: 1px solid #7F1A50; list-style: none;}
#mainlevel li.last {float:left;text-align:center;position:relative; border-right: none;}
#mainlevel li:hover {background:#7F1A50;border-bottom:0;z-index:1; /* shadow above adjacent li */}
#mainlevel li.selected {background:#7F1A50;border-bottom:0;z-index:1; /* shadow above adjacent li */}
#mainlevel a {color:#ffffff;outline:0;text-decoration:none;display:block;padding: 9px 10px 9px 10px;}
#mainlevel a:hover {background:#7F1A50;} 
#mainlevel li ul {
display: none; /* Hides the drop-down menu */
height: auto;
margin: 0; /* Aligns drop-down box underneath the menu item */
padding: 0; /* Aligns drop-down box underneath the menu item */
}

#mainlevel li:hover ul {
   display: block; /* Displays the drop-down box when the menu item is hovered over */
   }
#mainlevel li ul li a:hover{background-color: #A93C76;}

Fotiman

1:21 pm on Apr 23, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month




#main-menu{ background: #A93C76 url(https://www.samplesite.com/images/template/menu-left.gif) no-repeat left; width: 795px; float: left; height: 34px; z-index: 99;}
#mainlevel{list-style:none;font-weight:bold;margin:0 0 0 6px; text-transform: uppercase;}
#mainlevel li {float:left;text-align:center;position:relative; border-right: 1px solid #7F1A50; list-style: none;}
#mainlevel li.last {float:left;text-align:center;position:relative; border-right: none;}
#mainlevel li:hover {background:#7F1A50;border-bottom:0;z-index:1; /* shadow above adjacent li */}
#mainlevel li.selected {background:#7F1A50;border-bottom:0;z-index:1; /* shadow above adjacent li */}
#mainlevel a {color:#ffffff;outline:0;text-decoration:none;display:block;padding: 9px 10px 9px 10px;}
#mainlevel a:hover {background:#7F1A50;}
#mainlevel li ul {
display: none; /* Hides the drop-down menu */
height: auto;
margin: 0; /* Aligns drop-down box underneath the menu item */
padding: 0; /* Aligns drop-down box underneath the menu item */
}

#mainlevel li:hover ul {
display: block; /* Displays the drop-down box when the menu item is hovered over */
}
#mainlevel li ul li a:hover{background-color: #A93C76;}

You're floating the list items, which takes them out of the page flow, and will stack them horizontally. I'd start by removing those floats.

weddingm

2:08 am on Apr 24, 2013 (gmt 0)

10+ Year Member



thanks fotiman but tried it all and still not vertical

Fotiman

2:40 am on Apr 24, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Perhaps you have some code somewhere else that is conflicting. Have you tried stripping down to an absolute minimum test case?
In this example, the menu items are not horizontal. 

<!DOCTYPE html>
<html>
 <head>
  <style>
#main-menu{ background: #A93C76 url(https://www.samplesite.com/images/template/menu-left.gif) no-repeat left; width: 795px; float: left; height: 34px; z-index: 99;}
#mainlevel{list-style:none;font-weight:bold;margin:0 0 0 6px; text-transform: uppercase;}
#mainlevel li {text-align:center;position:relative; border-right: 1px solid #7F1A50; list-style: none;}
#mainlevel li.last {text-align:center;position:relative; border-right: none;}
#mainlevel li:hover {background:#7F1A50;border-bottom:0;z-index:1; /* shadow above adjacent li */}
#mainlevel li.selected {background:#7F1A50;border-bottom:0;z-index:1; /* shadow above adjacent li */}
#mainlevel a {color:#ffffff;outline:0;text-decoration:none;display:block;padding: 9px 10px 9px 10px;}
#mainlevel a:hover {background:#7F1A50;} 
#mainlevel li ul {
display: none; /* Hides the drop-down menu */
height: auto;
margin: 0; /* Aligns drop-down box underneath the menu item */
padding: 0; /* Aligns drop-down box underneath the menu item */
}

#mainlevel li:hover ul {
display: block; /* Displays the drop-down box when the menu item is hovered over */
}
#mainlevel li ul li a:hover{background-color: #A93C76;} 
  </style>
 </head>
 <body>
  <div id="mainlevel">
   <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
   </ul>
  </div>
 </body>
</html>

weddingm

2:51 am on Apr 24, 2013 (gmt 0)

10+ Year Member



Thanks. I finally have it vertical but know it is not highlighting he whole row.

#mainlevel{list-style:none;font-weight:bold;margin:0 0 0 6px; text-transform: uppercase;}
#mainlevel li {float:left;text-align:center;position:relative; border-right: 1px solid #7F1A50; list-style: none;}
#mainlevel li.last {float:left;text-align:center;position:relative; border-right: none;}
#mainlevel li:hover {background:#7F1A50;border-bottom:0;z-index:1; /* shadow above adjacent li */}
#mainlevel li.selected {background:#7F1A50;border-bottom:0;z-index:1; /* shadow above adjacent li */}
#mainlevel a {color:#ffffff;outline:0;text-decoration:none;display:block;padding: 9px 10px 9px 10px;}
#mainlevel a:hover {background:#7F1A50;}
#mainlevel li ul {
display: none; /* Hides the drop-down menu */
height: auto;
margin: 0; /* Aligns drop-down box underneath the menu item */
padding: 0; /* Aligns drop-down box underneath the menu item */
background:#A93C76;
}

#mainlevel li:hover ul {
display: block; /* Displays the drop-down box when the menu item is hovered over */
position:absolute;
background: #A93C76;
margin: 0; /* Aligns drop-down box underneath the menu item */
padding: 0; /* Aligns drop-down box underneath the menu item */
}
#mainlevel li ul li a:hover{background-color: #CDEB8B; float: none; }

weddingm

3:35 am on Apr 24, 2013 (gmt 0)

10+ Year Member



ok, thanks. I will try and go to the basics.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 11:23 am May 1, 2026