The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.
|
 |
|
Dev Shed Forums
> Web Design
> CSS Help
|
Newbie here, Menu width for drop down not working
Discuss Newbie here, Menu width for drop down not working in the CSS Help forum on Dev Shed. Newbie here, Menu width for drop down not working Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.
|
|
 |
|
|
|
|

Dev Shed Forums Sponsor:
|
|
|

December 25th, 2012, 03:03 PM
|
|
Registered User
|
|
Join Date: Dec 2012
Posts: 1
Time spent in forums: 11 m 41 sec
Reputation Power: 0
|
|
|
Newbie here, Menu width for drop down not working
EDIT: I figured it out everyone, sorry for wasting your time!!! I was missing some classes!
----------------------------------------------------
I am new to css and slowly learning, but I have encountered a problem. We had a menu on our website and I redesigned it a bit, and used the prior css and just tweaked it (since the web hosting we use has some interesting classes that I cannot change, so I just had to use the old.
Basically, my drop down menus are all different widths at each line due to the different lengths of the link names. I have tried (and used to have it, some reason is no longer works) to code it in there that I would like the vertical menu a specific width so it is just box-looking instead of being a ton of different widths for each.
The menu looks and functions great so the only complaint is that my width code is not working or is being cancelled out somehow so I am confuzzled
Any help is appreciated for this newbie!!!!! Happy holidays!
Code:
#menu_top {
background:#666;
height:50px;
list-style:none;
margin:0;
padding:0 0 10px 0;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
-moz-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
}
#menu_top li {
float:left;
padding:0px 0px 0px 15px;
}
#menu_top li a {
color:#fff;
display:block;
font-weight:normal;
line-height:50px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
#menu_top li a:hover {
background:#333;
color:#Ff6633;
text-decoration:none;
-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
}
#menu_top ul.uMenu li:hover a{
background:#333;
color:#FFFFFF;
text-decoration:none;
}
#menu_top li ul.uMenu a{
display:block;
height:30px;
font-size:14px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
/* -- Drop Down Menu Styles -- */
/* ALL MENUS (I.E. ROOT) */
#menu_top ul.uMenu.uMenuHorizontal {
height: 50px; /* EDIT: Height of the horizontal root menu bar */
}
#menu_top ul.uMenu.uMenuVertical {
width: 250px; /* EDIT: Width of the vertical root menu bar */
}
/* ALL MENU ITEMS (I.E. ROOT ITEMS) */
#menu_top ul.uMenu li {
position: relative;
margin: 0px;
padding: 0 0 0 10px;
}
#menu_top ul.uMenu.uMenuHorizontal li {
display: inline-block;
display: inline; /*IE FIX*/
height: 50px;
}
/* ALL MENU ITEM LINKS (I.E. ROOT ITEM LINKS) */
#menu_top ul.uMenu li a:link,
#menu_top ul.uMenu li a:active,
#menu_top ul.uMenu li a:visited,
#menu_top ul.uMenu li a:hover {
padding:0px 8px; /* EDIT: Padding between text and clickable menu item edge */
margin:0px; /* EDIT: Margin around the clickable menu item area */
/* border:1px solid #000000; *//* EDIT: Border on the of the clickable menu item area */
text-decoration:none; /* EDIT: Remove underlines from menu item text */
overflow:hidden;
font-size: 14px; /* EDIT: Set font size for menu items */
line-height:50px; /* EDIT: Set line height for menu items. This should match the menu bar height */
font-weight:bold; /* EDIT: Set font weight for menu items */
height: 50px;
}
#menu_top ul.uMenu.uMenuHorizontal li a:link,
#menu_top ul.uMenu.uMenuHorizontal li a:active,
#menu_top ul.uMenu.uMenuHorizontal li a:visited,
#menu_top ul.uMenu.uMenuHorizontal li a:hover {
display: inline-block;
}
#menu_top ul.uMenu.uMenuVertical li a:link,
#menu_top ul.uMenu.uMenuVertical li a:active,
#menu_top ul.uMenu.uMenuVertical li a:visited,
#menu_top ul.uMenu.uMenuVertical li a:hover {
display: block;
}
#menu_top ul.uMenu li:hover > a:link,
#menu_top ul.uMenu li:hover > a:active,
#menu_top ul.uMenu li:hover > a:visited,
#menu_top ul.uMenu li a:hover {
color: #ff6633; /* EDIT: Color of menu item text on mouse hover */
}
/* NESTED MENUS */
#menu_top ul.uMenu li ul {
display: none;
width: 250px;
margin: 0px;
padding: 0px;
position: absolute;
top: 50px;
height: auto;
}
#menu_top ul.uMenu.uMenuHorizontal li ul {
left: 0px; /* EDIT: Use this to compensate for sub-menu horizontal alignment (e.g. to align with borders) */
/* right: -3px; */ /* EDIT: Position based on right side if a right aligned menu */
}
#menu_top ul.uMenu.uMenuVertical li ul {
top: 0px;
left: 100%;
}
#menu_top ul.uMenu li ul,
#menu_top ul.uMenu li:hover ul li ul,
#menu_top ul.uMenu li ul li:hover ul li ul {
display: none;
}
#menu_top ul.uMenu li:hover ul,
#menu_top ul.uMenu li ul li:hover ul,
#menu_top ul.uMenu li ul li ul li:hover ul {
display: block;
}
/* NESTED MENU ITEMS */
#menu_top ul.uMenu li ul li {
position: relative;
height: 30px !important;
}
#menu_top ul.uMenu.uMenuHorizontal li ul li {
display: block;
}
#menu_top ul.uMenu.uMenuVertical li ul li {
display: block;
}
/* NESTED MENU ITEM LINKS */
#menu_top ul.uMenu li ul li a:link,
#menu_top ul.uMenu li ul li a:active,
#menu_top ul.uMenu li ul li a:visited,
#menu_top ul.uMenu li ul li a:hover {
padding:0px 12px; /* EDIT: Padding between text and clickable menu item edge */
height: 30px !important; /* EDIT: HEIGHT OF SUB-MENU ITEMS */
line-height:30px; /* EDIT: This should match the line above*/
background-color:#666666; /* EDIT: Sub Menu Background color*/
}
#menu_top ul.uMenu.uMenuHorizontal li ul li a:link,
#menu_top ul.uMenu.uMenuHorizontal li ul li a:active,
#menu_top ul.uMenu.uMenuHorizontal li ul li a:visited,
#menu_top ul.uMenu.uMenuHorizontal li ul li a:hover {
display: block;
}
/* THIRD LEVEL AND BEYOND MENUS */
#menu_top ul.uMenu li:hover ul li ul {
top: 0px;
left: 100%;
}
Last edited by alibear0 : December 25th, 2012 at 08:29 PM.
Reason: Figured it out!
|
Developer Shed Advertisers and Affiliates
| Thread Tools |
Search this Thread |
|
|
|
| Display Modes |
Rate This Thread |
Linear Mode
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|