从右到左更改下拉菜单面

时间:2015-05-27 15:52:09

标签: html css

这是导航栏

1

现在我想改变一边

2

* {
  margin: 0px;
  padding: 0px;
  font-family: "Oswald", sans-serif;
}
body {
  background-color: #E2DCDC;
}
nav {
  width: 994px;
  background-color: #77BCF1;
  border: 3px solid white;
  margin: 45px auto;
  color: black;
}
nav > .navigationbar_ul {
  list-style-type: none;
  width: 100%;
  font-size: 0px;
}
nav > .navigationbar_header {
  width: 100%;
  text-align: center;
}
.navigationbar_li {
  display: inline-block;
}
.navigationbar_li_left {
  border-right: 3px solid white;
}
.navigationbar_li_right {
  border-right: none;
  border-left: 3px solid white;
}
.navigationbar_li:last-child {
  margin-right: 0px;
}
.navigationbar_li > .navigationbar_a {
  color: black;
  font-size: 16px;
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out 0s;
}
.navigationbar_li > .navigationbar_a:hover {
  background-color: white;
}
.dropdown_ul {
  position: absolute;
  width: 100px;
  display: none;
}
.dropdown_ul > .dropdown_li {
  background-color: #77BCF1;
  border: 3px solid white;
}
.dropdown_ul > .dropdown_li > .dropdown_a {
  cursor: pointer;
  padding: 10px 15px;
  display: block;
  color: black;
  font-size: 16px;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out 0s;
}
.dropdown_ul > .dropdown_li > .dropdown_a:hover {
  background-color: white;
}
.navigationbar_li:hover .dropdown_ul {
  display: block;
}
.float_left {
  float: left;
}
.float_right {
  float: right;
}
.clear_both {
  clear: both;
}
<nav>
  <ul class="navigationbar_ul">
    <div class="float_left">
      <li class="navigationbar_li navigationbar_li_left"><a class="navigationbar_a" href="#">Link 1</a>
      </li>
      <li class="navigationbar_li navigationbar_li_left"><a class="navigationbar_a" href="#">Link 2</a>
      </li>
    </div>
    <div class="float_right">
      <li class="navigationbar_li navigationbar_li_right"><a class="navigationbar_a" href="#">Link 3</a>
        <ul class="dropdown_ul">
          <li class="dropdown_li"><a class="dropdown_a">Link 1</a>
          </li>
        </ul>
      </li>
    </div>
    <div class="clear_both"></div>
  </ul>
</nav>

JsFiddle

我该怎么做?

1 个答案:

答案 0 :(得分:2)

可能想在你的帖子中添加一些代码!让我们更容易帮助您。

不管。我修改了你的css只用于右侧导航的下拉菜单。我将import numpy as np from sklearn.ensemble import RandomForestClassifier np_training = np.array(training_data) np_labels = np.array(labels) clf = RandomForestClassifier(n_estimators=20, max_depth=5) clf.fit(np_training, np_labels) 的位置更改为.navigationbar_li_right并将子项position: relative;更改为.dropdown_ul 将正确的值设置为0,position: absolute;

更新:根据jaunt的评论修改。

right: 0;

Fiddle