css下拉菜单从左到右显示..想要一些建议.. [英] css dropdown menu is showing from left to right.. want some suggestion..

问题描述

我有下拉菜单，它是对齐的..我的问题是下拉列表从左到右打开。因为这个我的下拉菜单是从计算机窗口出来的..实际上我想要的是下拉菜单应该从右到左而不是从左到右打开..



下面是我的css ...它纯粹是css菜单..实际上我找不到从左到右显示的任何东西..



请建议我应该从右到左做什么..

i have drop down menu, which is aligned right.. my problem is that dropdown list is opening from left to right. because of this my drop down menu is going out of the computer window.. Actually what i want is that dropdown menu should open from right to left instead of left to right..

Below is my css... it is purely css menu.. Actually i can't find anything from which it is showing left to right..

Please suggest what should i do for right to left..

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
#cssmenu {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
  font-size: 13px;
  line-height: 15px;
  text-transform: uppercase;
  text-align:  right;
  width :100%;
  margin-left:auto;
  margin-right:auto;
 
}
#cssmenu > ul {
  width: 100%;
  list-style-type: none;
  padding: 0;
  margin: 0;
 
 
}
#cssmeni li#responsive-tab {
  display: none;
  /* Hide for large screens */

}
#cssmenu > ul li {
  display: inline-block;
  *display: inline;
  zoom: 1;
   z-index:99999;
   float: right;
}
#cssmenu > ul li.right {
 

  zoom: 1;
}
#cssmenu > ul li.right {
  float: right;
}
#cssmenu > ul li.has-sub {
  position: relative;
}
#cssmenu > ul li.has-sub:hover ul {
  display: block;
}
#cssmenu > ul li.has-sub ul {
  display: none;
  width: 250px;
  position: absolute;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #ffffff;
  border: 1px solid #ece6e8;
  border-bottom: 3px solid #d9ced2;
  border-top: 0 none;
}
#cssmenu > ul li.has-sub ul li {
  display: block;
}
#cssmenu > ul li.has-sub > a {
 
  background-repeat: no-repeat;
  background-position: 90% -95%;
}
 
#cssmenu > ul li.has-sub > a.active,
#cssmenu > ul li.has-sub > a:hover {
  background: #1e7fc5 url('caret.png') no-repeat;
  background-position: 90% 195%;
}
#cssmenu > ul li a {
  display: block;
  padding: 6px 10px 6px 10px;
  text-decoration: none;
  color: White;
  text-shadow: 0px 1px 0px Black;
 
}
#cssmenu > ul li a.active,
#cssmenu > ul li a:hover {
  background: #1e7fc5;
  color: #fff;
  text-shadow: 0px 1px 0px Black;
 
}
@media (max-width: 600px) {
  #cssmenu > ul {
    width: 100%;
  }
  #cssmenu > ul li#responsive-tab {
    display: block;
  }
  #cssmenu > ul li#responsive-tab a {
    background: url('menu.png') no-repeat;
    background-position: 95% -35%;
  }
  #cssmenu > ul li#responsive-tab a:hover {
    background-color: #1e7fc5;
    background-position: 95% 135%;
  }
  #cssmenu > ul li {
    display: none;
  }
  #cssmenu > ul li.right {
    float: none;
  }
  
  #cssmenu > ul li.has-sub {
    position: relative;
  }
  #cssmenu > ul li.has-sub ul {
    display: block;
    position: static;
    width: 100%;
    background: #ffffff;
    border: 0 none;
  }
  #cssmenu > ul li.has-sub ul li {
    display: block !important;
  }
  #cssmenu > ul li.has-sub ul li a span {
    display: block;
    padding-left: 24px;
  }
  #cssmenu > ul li.has-sub > a {
    background-image: none;
  }
}
/* Make sure they show even if hidden in mobile view by JS */
@media (min-width: 600px) {
  #cssmenu > ul > li.collapsed {
    display: inline-block !important;
    *display: inline;
    zoom: 1;
  }
  #cssmenu > ul ul li.collapsed {
    display: block !important;
  }
}

推荐答案

你能来吗？尝试更换

Can you try replacing

float:right

to

to

float: right !important;

或试试这个



http://jsfiddle.net/XPE3w/966/ [ ^ ]

这篇关于css下拉菜单从左到右显示..想要一些建议..的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！