#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    1
    Rep 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 09:29 PM. Reason: Figured it out!

IMN logo majestic logo threadwatch logo seochat tools logo