Question

我试图使用HTML5和CSS3。无法将此菜单导航栏置于我希望响应的网站上。

＆＃13;

nav ul,
nav ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

#mainav,
#breadcrumb,
.sidebar nav {
  line-height: normal;
}

#mainav .drop::after,
#mainav li li .drop::after,
#breadcrumb li a::after,
.sidebar nav a::after {
  position: absolute;
  font-family: "FontAwesome";
  font-size: 15px;
  line-height: 15px;
}


/* Top Navigation */

#mainav {}

#mainav ul {}

#mainav ul ul {
  z-index: 9999;
  position: absolute;
  width: 160px;
  text-align: left;
}

#mainav ul ul ul {
  left: 160px;
  top: 0;
}

#mainav li {
  display: block;
  position: relative;
  float: left;
  margin: 0;
  padding: 10;
  text-transform: uppercase;
}

#mainav li:last-child {
  margin-right: 0;
}

#mainav li li {
  width: 100%;
  margin: 0;
  text-transform: none;
}

#mainav ul.clear {
  border: solid;
  border-width: 0 0 0 1px;
}

#mainav li a {
  display: block;
  padding: 20px;
  border: solid;
  border-width: 0 1px 1px 0;
  border-collapse: collapse;
}

#mainav li li a {
  border-width: 0 0 1px 0;
}

#mainav li li:first-child a,
#mainav li li:last-child a {
  border-width: 0 0 1px 0;
}

#mainav .drop {
  padding-left: 25px;
}

#mainav li li a,
#mainav li li .drop {
  display: block;
  margin: 0;
  padding: 10px 15px;
}

＆＃13;

<div class="wrapper row2">
  <nav id="mainav" class="hoc clear">
    <ul class="clear">
      <li class="active"><a href="index.html">Home</a></li>
      <li><a class="drop" href="#">Search properties</a>
        <ul>
          <li><a href="search.html">Search properties</a></li>
          <li><a href="tips.html">Tips for parents</a></li>
        </ul>
        <li><a class="drop" href="#">Owners</a>
          <ul>
            <li><a href="register.html">Register & FAQ</a></li>
            <li><a href="login.html">Login</a></li>
          </ul>
        </li>

        <li><a href="blog.html">Blog</a></li>
        <li><a href="about.html">About us</a></li>

    </ul>
  </nav>
</div>

＆＃13;

我添加了太多代码，系统在这里抱怨，所以我必须编辑最后几行。

Answer 1

只需添加此内容，它会将itemPrice置于ul元素中心：

nav

另外，我在子菜单的末尾交换了一个带有#mainav { text-align: center; } #mainav ul { display: inline-block; }标记的</li> - 订单错误。

</ul>

nav ul,
nav ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

#mainav,
#breadcrumb,
.sidebar nav {
  line-height: normal;
}

#mainav .drop::after,
#mainav li li .drop::after,
#breadcrumb li a::after,
.sidebar nav a::after {
  position: absolute;
  font-family: "FontAwesome";
  font-size: 15px;
  line-height: 15px;
}


/* Top Navigation */

#mainav {
text-align: center;
}

#mainav ul {
display: inline-block;
}

#mainav ul ul {
  z-index: 9999;
  position: absolute;
  width: 160px;
  text-align: left;
}

#mainav ul ul ul {
  left: 160px;
  top: 0;
}

#mainav li {
  display: block;
  position: relative;
  float: left;
  margin: 0;
  padding: 10;
  text-transform: uppercase;
}

#mainav li:last-child {
  margin-right: 0;
}

#mainav li li {
  width: 100%;
  margin: 0;
  text-transform: none;
}

#mainav ul.clear {
  border: solid;
  border-width: 0 0 0 1px;
}

#mainav li a {
  display: block;
  padding: 20px;
  border: solid;
  border-width: 0 1px 1px 0;
  border-collapse: collapse;
}

#mainav li li a {
  border-width: 0 0 1px 0;
}

#mainav li li:first-child a,
#mainav li li:last-child a {
  border-width: 0 0 1px 0;
}

#mainav .drop {
  padding-left: 25px;
}

#mainav li li a,
#mainav li li .drop {
  display: block;
  margin: 0;
  padding: 10px 15px;
}

您认为中心菜单导航栏很容易吗？

1 个答案: