Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Very Long DropDown Menu Solution

    Hello I want to change the css from this MENU so I want just the dropdown menu trick please someone help here is the code of my css please help me
    Code:
    #mbmcpebul_table {
      display: inline-block;
      width:100%;
      margin:0 auto;
      height:50px;
    }
    
    #mbmcpebul_table li a {
      line-height: 19px;
      font-size: 17px;
      font-family: Arial,sans-serif;
      text-decoration: none;
      color: #2C6EE8;
      font-style: normal;
      font-weight: bold;
      padding: 8px 1px 1px 1px;
      display: block;
      cursor: pointer;
      white-space: nowrap;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      text-shadow:none;
    }
    
    #mbmcpebul_table li div.buttonbg {
      height: 35px;
      width: 150px;
      line-height: 0;
      background-color: transparent;
      border-style: solid;
      border-color: #E4E4E4;
      border-width: 0;
      border-radius: 5px;
      box-shadow: none;
      text-align: center;
      cursor: pointer;
    }
    
    #mbmcpebul_table li:hover div.buttonbg a, #mbmcpebul_table li.expanded a.topitem, #mbmcpebul_table li.active a.topitem,
    #mbmcpebul_table li.itemhot a.topitem, #mbmcpebul_table li a:hover {
      color: #FFFFFF;
      font-style: normal;
      font-weight: bold;
      text-decoration: none;
    }
    
    
    #mbmcpebul_table li.expanded div.buttonbg, #mbmcpebul_table li.active div.buttonbg, #mbmcpebul_table li.itemhot div.buttonbg, #mbmcpebul_table li:hover div.buttonbg {
      background-color: transparent;
      box-shadow: none;
    }
    
    #mbmcpebul_table li.expanded div.buttonbg, #mbmcpebul_table li.active div.buttonbg, #mbmcpebul_table li.itemhot div.buttonbg, #mbmcpebul_table li:hover div.buttonbg {
      border-color: #3278BE;
      text-align:center;
    }
    #mbmcpebul_table ul li.subexpanded a.subexpanded, #mbmcpebul_table ul li.subitemhot a.subitemhot, #mbmcpebul_table ul li a {
    text-align:center;
    }
    #mbmcpebul_table ul li a {
      border-top: 1px #2C6EE8 solid;
      border-bottom: 1px #2C6EE8 solid;
      border-right: 2px #2C6EE8 solid;
      border-left: 2px #2C6EE8 solid;
      color: #2C6EE8;
      font-family: Arial,sans-serif;
      font-size: 14px;
      line-height: 9px;
      text-decoration: none;
      display: block;
      width:117.2px;
    }
    #mbmcpebul_table .first {
      border-top: 1px #2C6EE8 solid;
    }
    #mbmcpebul_table .last {
      border-bottom: 1px #2C6EE8 solid;
    }
    #mbmcpebul_table div .active {
      background-image: -moz-linear-gradient(top, #3F93D9 0%, #014188 100%); 
      background-image: -webkit-linear-gradient(top, red 0%, #014188 100%); 
      background-image: linear-gradient(top, #3F93D9 0%, #014188 100%); 
    }
    #mbmcpebul_table ul li.subexpanded a.subexpanded, #mbmcpebul_table ul li.subitemhot a.subitemhot, #mbmcpebul_table ul li a:hover {
      color: #FFFFFF;
      font-family: Arial,sans-serif;
      font-size: 15px;
      text-align:center;
    }
    
    #mbmcpebul_table ul li:hover, #mbmcpebul_table ul li.subexpanded, #mbmcpebul_table ul li.subitemhot {
      border-color: transparent;
      background-color: transparent;
      box-shadow: none;
    }
    
    
    #mbmcpebul_table ul li a {
      padding: 7px 15px 7px 13px;
      text-align: center;
    }
    
    #mbmcpebul_table ul li.separator {
      padding: 7px;
      cursor: default;
      background: none;
      box-shadow: none;
      border-width: 0;
    }
    
    #mbmcpebul_table ul li.separator div {
      border-top: 1px solid #FFFFFF;
      font-size: 0px;
    }
    
    #mbmcpebul_table ul li {
      border-style: solid;
      border-color: transparent;
      border-width: 0;
      height: auto;
      width: auto;
      text-align: left;
      line-height: 0;
      font-size: 0;
      cursor: pointer;
      float: none;
      margin: 0 0 0px 0;
      border-radius: 0;
      padding: 0;
      box-shadow: none;
      background-color: transparent;
      display: block;
    }
    
    
    #mbmcpebul_table ul {
      box-shadow: 1px 1px 5px -1px #333333;
    }
    
    #mbmcpebul_table a img {
      border: none;
    }
    
    #mbmcpebul_table li {
      list-style: none;
      float: left;
      margin: 0px 15px 15px 0px;
      padding: 0;
      float: left;
      display: inline-block;
    }
    
    #mbmcpebul_table.css_menu li {
      position: relative;
    }
    
    #mbmcpebul_table.css_menu ul li:hover > ul {
      opacity: 1;
    }
    
    #mbmcpebul_table.css_menu li:hover > ul {
      top: 100%;
      left: 0;
      right: auto;
      opacity: 1;
      transform: scale(1,1);
      -webkit-transform: scale(1,1);
      -moz-transform: scale(1,1);
      -ms-transform: scale(1,1);
    }
    
    #mbmcpebul_table.css_menu ul li:hover > ul {
      top: -1px;
      left: 100%;
      right: auto;
    }
    
    #mbmcpebul_table.css_menu ul {
      transition-duration: 0.3s;
      -webkit-transition-duration: 0.3s;
      -moz-transition-duration: 0.3s;
      -ms-transition-duration: 0.3s;
      transition-property:transform,opacity;
      -webkit-transition-property:-webkit-transform,opacity;
      -moz-transition-property:-moz-transform,opacity;
      -ms-transition-property:-ms-transform,opacity;
      opacity: 0;
      transform-origin: 0 0;
      transform: scale(0.1, 0.1);
      -webkit-transform-origin: 0 0;
      -webkit-transform: scale(0.1, 0.1);
      -moz-transform-origin: 0 0;
      -moz-transform: scale(0.1, 0.1);
      -ms-transform-origin: 0 0;
      -ms-transform: scale(0.1, 0.1);
    }
    
    #mbmcpebul_table ul {
      position: absolute;
      top:-99999px;
      z-index: 4000;
    }
    
    #mbmcpebul_table ul ul {
      position: absolute;
      z-index: 5000;
    }
    
    #mbmcpebul_table .submenu_arrow {
      margin-left: 8px;
    }
    
    
    #mbmcpebul_table li:hover > a span.img_4x5, #mbmcpebul_table li.subexpanded > a span.img_4x5 { 
      background-position: 0 -5px; 
    } 
    
    #mbmcpebul_table div.gradient_button { 
      background-image: -moz-linear-gradient(top, #FEFEFE 0%, #D9D9D9 100%); 
      background-image: -webkit-linear-gradient(top, #FEFEFE 0%, #D9D9D9 100%); 
      background-image: linear-gradient(top, #FEFEFE 0%, #D9D9D9 100%); 
    } 
    
    #mbmcpebul_table li:hover div.gradient_button, #mbmcpebul_table li.expanded div.gradient_button, #mbmcpebul_table li.active div.gradient_button, #mbmcpebul_table li.itemhot div.gradient_button { 
      background-image: -moz-linear-gradient(top, #3F93D9 0%, #014188 100%); 
      background-image: -webkit-linear-gradient(top, #3F93D9 0%, #014188 100%); 
      background-image: linear-gradient(top, #3F93D9 0%, #014188 100%); 
    } 
    
    #mbmcpebul_table ul.gradient_menu { 
      background-image: -moz-linear-gradient(top, #FFFFFF 0%, #ECECEC 100%); 
      background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #ECECEC 100%); 
      background-image: linear-gradient(top, #FFFFFF 0%, #ECECEC 100%); 
    } 
    
    
    #mbmcpebul_table ul li.gradient_menuitem:hover, #mbmcpebul_table ul li.gradient_menuitem.subexpanded, #mbmcpebul_table ul li.gradient_menuitem.subitemhot { 
      background-image: -moz-linear-gradient(top, #3F93D9 0%, #003C82 100%); 
      background-image: -webkit-linear-gradient(top, #3F93D9 0%, #003C82 100%); 
      background-image: linear-gradient(top, #3F93D9 0%, #003C82 100%); 
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,445
    Thanks
    23
    Thanked 630 Times in 629 Posts
    This is your third post and none of them make sense. What is " the dropdown menu trick"? And where is the html that is needed with the CSS?
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,183
    Thanks
    15
    Thanked 253 Times in 253 Posts
    Don't like any of the examples. Use a 'Big Menu' instead. The menu opens as a large window, with links going horiz and vert. Plenty of room for links and all there at once.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •