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。 如果有人可以帮助我,我将感激不尽。
答案 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)
<!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;
答案 2 :(得分:0)
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;