输入框错误定位菜单

时间：2016-08-22 07:21:21

标签： javascript jquery html css

我尝试在条形图的最右侧添加一个输入框，与那些菜单栏位于同一行，但每次定位都不好或者甚至没有。你能帮帮我吗？由于我的JS隐藏滚动功能，它需要在菜单栏中。我试图使用JQuery-ui＆＃39> 

DatePicker ("$(function() {
    $("#datepicker").datepicker();
});")

HTML：

  <nav>
<span class="nadpis"><a href="javascript:history.go(0)" style="text-transform: uppercase;"><?php echo $id_dom; ?></a></span>
<p>Date: <input type="text" id="datepicker"></p></span>
<ul class="nav">
  <li class="prve">
    <a href="#">PSI</a>
    <ul>
      <li>
        <a href="flvmena/meno1.html">Simoncik</a>
      </li>
      <li>
        <a href="flvmena/meno2.html">Kodrla</a>
      </li>
      <li>
        <a href="flvmena/meno3.html">Vajs</a>
      </li>
      <li>
        <a href="flvmena/meno4.html">Hrebicek</a>
      </li>
      <li>
        <a href="flcmena/meno1.html">Bednarikova</a>
      </li>
      <li>
        <a href="flcmena/meno2.html">Dobrikova</a>
      </li>
      <li>
        <a href="flcmena/meno3.html">Duracka</a>
      </li>
      <li>
        <a href="quamena/meno1.html">Klco</a>
      </li>
      <li>
        <a href="quamena/meno2.html">Cisar</a>
      </li>
    </ul>
  </li><!--
  --><li class="druhe">
    <a href="#">&#9776;</a>
    <ul>
      <li>
        <a href="index.php">RPO</a>
      </li>
      <li>
        <a href="flv.php?id_dom=flv">FLV</a>
        <ul>
          <li>
            <a href="flvmena/meno1.html">Simoncik</a>
          </li>
          <li>
            <a href="flvmena/meno2.html">Kodrla</a>
          </li>
          <li>
            <a href="flvmena/meno3.html">Vajs</a>
          </li>
          <li>
            <a href="flvmena/meno4.html">Hrebicek</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="flv.php?id_dom=FLC">FLC</a>
        <ul>
          <li>
            <a href="flcmena/meno1.html">Bednarikova</a>
          </li>
          <li>
            <a href="flcmena/meno2.html">Dobrikova</a>
          </li>
          <li>
            <a href="flcmena/meno3.html">Duracka</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="flv.php?id_dom=QUA">QUA</a>
        <ul>
          <li>
            <a href="quamena/meno1.html">Klco</a>
          </li>
          <li>
            <a href="quamena/meno2.html">Cisar</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="flv.php?id_dom=HFX">HFX</a>
      </li>
      <li>
        <a href="flv.php?id_dom=PDT">PDT</a>
      </li>
      <li>
        <a href="flv.php?id_dom=RSH">RSH</a>
      </li>
      <li>
        <a href="flv.php?id_dom=BUR">BUR</a>
      </li>
      <li>
        <a href="suhrn.php?id_dom=SUHRN" style="color: #ea9b54">SUHRN</a>
      </li>
      <li>
        <a href="suhrn.php?id_dom=INCI" style="color: #ea9b54">INCI</a>
      </li>
      <li>
        <a href="suhrn.php?id_dom=JIRA" style="color: #ea9b54">JIRA</a>
      </li>
      <li>
        <a href="suhrn.php?id_dom=CHGT" style="color: #ea9b54">CHGT</a>
      </li>
      <li>
        <a href="flv.php?id_dom=TASK" style="color: #ea9b54">TASK</a>
      </li>
      <li>
        <a href="vrs.php" style="color: #ea9b54">VRS</a>
      </li>
    </ul>
  </li>
</ul>
</nav>

CSS：

nav {
display: inline-block;
position: fixed;
width: 100%;
text-align: center;
background-color: #303036;
vertical-align: top;
top: -1px;
opacity: 1;
transition: .3s;
}

nav:hover {
opacity: 1 !important;
transition: .3s;
}
/*Nadpis - nazov domainu/reportu */
span.nadpis a{
left: 0;
position: absolute;
text-decoration: none;
color: #FAFAC1;
background-color: #303036;
font-family: 'Helvetica Neue',sans-serif;
font-size: 30px;
font-weight: 700;
}

.nav a {
display: block;
background-color: #303036;
color: #fff;
text-decoration: none;
padding: .7em 1.7em;
text-transform: uppercase;
font-size: 85%;
letter-spacing: 3px;
position: relative;
}

.nav {
vertical-align: top;
display: inline-block;
width: 250px;
}

.nav li {
position: relative;
}

.nav > li {
display: inline-block;
}

.nav li:hover > a {
transition: .3s;
background-color: #2e86ab;
color: #8fc93a;
}

.nav ul {
 position: absolute;
white-space: nowrap;
z-index: 1;
left: -99999em;
border: 2px solid #81D4FA;
border-top: 1px solid #81D4FA;
}

.nav > li:hover > ul {
left: auto;
min-width: 100%;
}

.nav > li li:hover > ul {
left: 100%;
top: -1px;
}

.nav > li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
}

.nav li li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
right: 10px;
}
/* Prvy menu bar*/
.prve {
min-width: 100px;
border: 2px solid #81D4FA;
border-bottom: none;
border-top: none;
}
/* Druhy menu bar */
.druhe {
 min-width: 110px;
 border-right: 2px solid #81D4FA;
 }

.tretie {
right: 0;
}

1 个答案:

答案 0 :(得分：1)

检查此fiddle。我做的是，将你的nav显示为块。并以margin:auto为中心。然后在它旁边添加了文本栏。使它成为float并且margin-top我将它移动到正确的位置。 

<body>
  <!--MENU BAR!-->
  <nav>
    <span class="nadpis"><a href="javascript:history.go(0)" style="text-transform: uppercase;"><?php echo $id_dom; ?></a></span>
    <ul class="nav">
      <li class="prve">
        <a href="#">PSI</a>
        <ul>
          <li>
            <a href="flvmena/meno1.html">Simoncik</a>
          </li>
          <li>
            <a href="flvmena/meno2.html">Kodrla</a>
          </li>
          <li>
            <a href="flvmena/meno3.html">Vajs</a>
          </li>
          <li>
            <a href="flvmena/meno4.html">Hrebicek</a>
          </li>
          <li>
            <a href="flcmena/meno1.html">Bednarikova</a>
          </li>
          <li>
            <a href="flcmena/meno2.html">Dobrikova</a>
          </li>
          <li>
            <a href="flcmena/meno3.html">Duracka</a>
          </li>
          <li>
            <a href="quamena/meno1.html">Klco</a>
          </li>
          <li>
            <a href="quamena/meno2.html">Cisar</a>
          </li>
        </ul>
      </li><!--
   --><li class="druhe">
        <a href="#">&#9776;</a>
        <ul>
          <li>
            <a href="index.php">RPO</a>
          </li>
          <li>
            <a href="flv.php?id_dom=flv">FLV</a>
            <ul>
              <li>
                <a href="flvmena/meno1.html">Simoncik</a>
              </li>
              <li>
                <a href="flvmena/meno2.html">Kodrla</a>
              </li>
              <li>
                <a href="flvmena/meno3.html">Vajs</a>
              </li>
              <li>
                <a href="flvmena/meno4.html">Hrebicek</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="flv.php?id_dom=FLC">FLC</a>
            <ul>
              <li>
                <a href="flcmena/meno1.html">Bednarikova</a>
              </li>
              <li>
                <a href="flcmena/meno2.html">Dobrikova</a>
              </li>
              <li>
                <a href="flcmena/meno3.html">Duracka</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="flv.php?id_dom=QUA">QUA</a>
            <ul>
              <li>
                <a href="quamena/meno1.html">Klco</a>
              </li>
              <li>
                <a href="quamena/meno2.html">Cisar</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="flv.php?id_dom=HFX">HFX</a>
          </li>
          <li>
            <a href="flv.php?id_dom=PDT">PDT</a>
          </li>
          <li>
            <a href="flv.php?id_dom=RSH">RSH</a>
          </li>
          <li>
            <a href="flv.php?id_dom=BUR">BUR</a>
          </li>
          <li>
            <a href="suhrn.php?id_dom=SUHRN" style="color: #ea9b54">SUHRN</a>
          </li>
          <li>
            <a href="suhrn.php?id_dom=INCI" style="color: #ea9b54">INCI</a>
          </li>
          <li>
            <a href="suhrn.php?id_dom=JIRA" style="color: #ea9b54">JIRA</a>
          </li>
          <li>
            <a href="suhrn.php?id_dom=CHGT" style="color: #ea9b54">CHGT</a>
          </li>
          <li>
            <a href="flv.php?id_dom=TASK" style="color: #ea9b54">TASK</a>
          </li>
          <li>
            <a href="vrs.php" style="color: #ea9b54">VRS</a>
          </li>
        </ul>
      </li>
    </ul>
    <input type="text" class="tib" />
  </nav>


body,nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* menu*/
nav {
  display: inline-block;
  position: fixed;
  width: 100%;
  /* text-align: center; */
  background-color: #303036;
  vertical-align: top;
  top: -1px;
  opacity: 1;
  transition: .3s;
}
nav ul > li > a{
  text-align:center;
}
ul.nav{
  margin:auto;
}
nav:hover {
  opacity: 1 !important;
  transition: .3s;
}
/*Nadpis - nazov domainu/reportu */
span.nadpis a{
  left: 0;
  position: absolute;
  text-decoration: none;
  color: #FAFAC1;
  background-color: #303036;
  font-family: 'Helvetica Neue',sans-serif;
  font-size: 30px;
  font-weight: 700;
}

.nav a {
  display: block;
  background-color: #303036;
  color: #fff;
  text-decoration: none;
  padding: .7em 1.7em;
  text-transform: uppercase;
  font-size: 85%;
  letter-spacing: 3px;
  position: relative;
}

.nav {
  vertical-align: top;
  /* display: inline-block; */
  width: 250px;
}

.nav li {
  position: relative;
}

.nav > li {
  display: inline-block;
}

.nav li:hover > a {
  transition: .3s;
  background-color: #2e86ab;
  color: #8fc93a;
}

.nav ul {
  position: absolute;
  white-space: nowrap;
  z-index: 1;
  left: -99999em;
  border: 2px solid #81D4FA;
  border-top: 1px solid #81D4FA;
}

.nav > li:hover > ul {
  left: auto;
  min-width: 100%;
}

.nav > li li:hover > ul {
  left: 100%;
  top: -1px;
}

.nav > li:hover > a:first-child:nth-last-child(2):before {
  border: 5px solid transparent;
}

.nav li li:hover > a:first-child:nth-last-child(2):before {
  border: 5px solid transparent;
  right: 10px;
}
/* Prvy menu bar*/
.prve {
  min-width: 100px;
  border: 2px solid #81D4FA;
  border-bottom: none;
  border-top: none;
}
/* Druhy menu bar */
.druhe {
  min-width: 110px;
  border-right: 2px solid #81D4FA;
}
.tib{
  float:right;
  margin-top:-28px;
}
相关问题
最新问题