Welcome to WebmasterWorld Guest from 54.159.121.201

Forum Moderators: not2easy

Message Too Old, No Replies

nav drop down is horizontal not vertical

drop down is horizontal not vertical

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

Junior Member

10+ Year Member

joined:Mar 9, 2006
posts: 177
votes: 0


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;}
1:21 pm on Apr 23, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4988
votes: 12



#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.
2:08 am on Apr 24, 2013 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 9, 2006
posts: 177
votes: 0


thanks fotiman but tried it all and still not vertical
2:40 am on Apr 24, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4988
votes: 12


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>
2:51 am on Apr 24, 2013 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 9, 2006
posts: 177
votes: 0


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; }
3:35 am on Apr 24, 2013 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 9, 2006
posts: 177
votes: 0


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