homepage Welcome to WebmasterWorld Guest from 54.211.190.232
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
nav drop down is horizontal not vertical
drop down is horizontal not vertical
weddingm




msg:4567195
 5:00 am on Apr 23, 2013 (gmt 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;}

 

Fotiman




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


#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




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

thanks fotiman but tried it all and still not vertical

Fotiman




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

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




msg:4567431
 2:51 am on Apr 24, 2013 (gmt 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; }

weddingm




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved