如何添加子菜单？

时间：2018-04-13 10:02:26

标签： html css

HTML 

<nav class="main_nav justify-self-end">
        <ul class="nav_items">
            <li class="active"><a href="index"><span>asd</span></a></li>
            <li><a href="uslugi"><span>asd</span></a></li>
            <li><a href="proekti"><span>asdf</span></a></li>
            <li><a href="zanas"><span>asd</span></a></li>
            <li><a href="porachka"><span>asd</span></a></li>
            <li><a href="kontakti"><span>asd</span></a></li>
        </ul>
    </nav>

如何将子菜单添加到菜单“ASDF”???我试过但它看起来很难看。 我尝试但是破坏了我的整个网站。 我的系统只是设计不是一些cms

这里的css代码可以帮助你

.main_nav {
  margin-right: -3px;
  height: 100%;
  flex-basis: 200%;
  text-align: right;
}

.nav_items {
  height: 100%;
}

.nav_items li {
  display: inline-block;
  margin-left: 35px;
  height: 100%;
}

.nav_items li a {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: #0b1033;
  letter-spacing: 3.5px;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 14px;
  padding-right: 10px;
}

.nav_items li.active {
  background: #ff4200;
}

.nav_items li.active a {
  color: #FFFFFF;
}

.nav_items li:hover {
  background: #ff4200;
}

.nav_items li:hover a {
  color: #FFFFFF;
}
<nav class="main_nav justify-self-end">
  <ul class="nav_items">
    <li class="active"><a href="index"><span>asd</span></a></li>
    <li><a href="uslugi"><span>asd</span></a></li>
    <li><a href="proekti"><span>asdf</span></a></li>
    <li><a href="zanas"><span>asd</span></a></li>
    <li><a href="porachka"><span>asd</span></a></li>
    <li><a href="kontakti"><span>asd</span></a></li>
  </ul>
</nav>

这是我的代码我想添加子菜单正常lookin。 如果有人可以帮助我，我将感激不尽。

3 个答案:

答案 0 :(得分：2)

这应该可以正常使用，您需要根据您的要求添加样式。这是一个基于悬停下拉列表的CSS。你需要为onclick下拉列表实现js / Jquery 

.main_nav {
  margin-right: -3px;
  height: 100%;
  flex-basis: 200%;
  text-align: right;
}

.nav_items {
  height: 100%;
}

.nav_items li {
  display: inline-block;
  margin-left: 35px;
  height: 100%;
}

.nav_items li a {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: #0b1033;
  letter-spacing: 3.5px;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 14px;
  padding-right: 10px;
}

.nav_items li.active {
  background: #ff4200;
}

.nav_items li.active a {
  color: #FFFFFF;
}

.nav_items li:hover {
  background: #ff4200;
}

.nav_items li:hover a {
  color: #FFFFFF;
}

.has_drop {
  position: relative
}

.drop_down {
  position: absolute;
  width: 100%;
  top: 100%;
  height: auto;
  padding:0px;
  margin:0;
  left:0;
  display:none;
}

.drop_down li {
  width: 100%;
  display: block;
  padding: 6px 12px;
  margin:0
}

.has_drop:hover .drop_down {
  display:block;
 }
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <nav class="main_nav justify-self-end">
    <ul class="nav_items">
      <li class="active"><a href="index"><span>asd</span></a></li>
      <li><a href="uslugi"><span>asd</span></a></li>
      <li class="has_drop">
        <a href="proekti"><span>asdf</span></a>
        <ul class="drop_down">
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
        </ul>
      </li>
      <li><a href="zanas"><span>asd</span></a></li>
      <li><a href="porachka"><span>asd</span></a></li>
      <li><a href="kontakti"><span>asd</span></a></li>
    </ul>
  </nav>

</body>

</html>

答案 1 :(得分：0)

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
    background-color: #000000;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #000000;
}
</style>
</head>
<body>



<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>



</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

＆＃13;
＆＃13; 
body{ font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";}
	.main_nav {
  margin-right: -3px;
  height: 100%;
  flex-basis: 200%;
 /* text-align: right;*/
		background: #ff4200;
		display: table;
		
}

.nav_items {
  height: 100%;
}

.nav_items li {
  display: inline-block;
  margin-left: 35px;
  height: 100%;
}

.nav_items li a {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: #0b1033;
  letter-spacing: 3.5px;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 14px;
  padding-right: 10px;
	text-decoration: none;

}

.nav_items li.active {
  background: #ff4200;
}

.nav_items li.active a {
  color: #FFFFFF;
}

.nav_items li:hover {
  background: #ff4200;
}

.nav_items li:hover a {
  color: #FFFFFF;
}

.has_drop {
  position: relative
}

.drop_down {
  position: absolute;
  width: 150px;
  top: 100%;
  height: auto;
  padding:10px;
  left:0;
  display:none;
background: #cccccc;
	font-size: 12px;
}

.drop_down li {
  width: 100%;
  display: block;
  padding: 8px 0px;
  margin:0;
	border-bottom: 1px solid #ddd;
}
/*.drop_down li:hover { background: #f3f3f3;}*/

.has_drop:hover .drop_down {
  display:block;
 }
＆＃13; 
<nav class="main_nav justify-self-end">
    <ul class="nav_items">
      <li class="active"><a href="index"><span>asd</span></a></li>
      <li><a href="uslugi"><span>asd</span></a></li>
      <li class="has_drop">
        <a href="proekti"><span>asdf</span></a>
        <ul class="drop_down">
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
        </ul>
      </li>
      <li><a href="zanas"><span>asd</span></a></li>
      <li><a href="porachka"><span>asd</span></a></li>
      <li><a href="kontakti"><span>asd</span></a></li>
    </ul>
  </nav>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题