0
그래서 CSS에서 탐색 기능을 설계하고 있습니다. 나는 그것이 한 쌍에 드롭 다운 메뉴와 고정 된 탐색 싶어요. 상단 탐색 또는 드롭 다운을 얻을 수 있지만 둘 다 할 수는 없습니다. 누구든지 어떤 제안이 있습니까?고정 탐색 (드롭 다운 포함)
CSS : (제대로 연결)
body {margin: 0; font-family: 'SF Comic Script';}
.topnav-brand {
float: left;
margin-left: 30px;
padding: 15px 15px;
font-size: 24px;
line-height: 20px;
height: 24px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.topnav-brand:hover,
.topnav-brand:focus {
text-decoration: none;
color: #5e5e5e;
background-color: transparent;
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #7a003d;
background-image: -webkit-linear-gradient(top, #ad0057 0%, #7a003d 100%);
background-image: -o-linear-gradient(top, #ad0057 0%, #7a003d 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#ad0057), to(#7a003d));
background-image: linear-gradient(to bottom, #ad0057 0%, #7a003d 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffad0057', endColorstr='#ff7a003d', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border-radius: 2px;
position: fixed;
top: 0;
width: 100%;
}
ul.topnav li {
float: left;
}
ul.topnav li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover, .dropdown:hover .dropbtn {
background-color: #470024;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
background-color: #470024;
top: 100%;
}
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {color: #7a003d; background-color: #ffffff;
background-image: -webkit-linear-gradient(top, #f2f2f2 0%, #ffffff 100%);
background-image: -o-linear-gradient(top, #f2f2f2 0%, #ffffff 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#ffffff));
background-image: linear-gradient(to bottom, #f2f2f2 0%, #ffffff 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffffffff', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border-radius: 2px;}
.dropdown:hover .dropdown-content {
display: block;
}
HTML
<ul class="topnav">
<a class="topnav-brand">Computer Services Unit</a>
<li><a href="#home">Infrastructure</a></li>
<li class="dropdown"><a href="#news" class="dropbtn">Classroom & Collaborative Services</a>
<div class="dropdown-content">
<a href="#">Mobile</a>
<a href="#">Network</a>
<a href="#">Link 3</a>
</div>
</li>
<li><a href="#contact">Tech Shop</a></li>
<li><a href="#about">Application & Web Development</a></li>
<li><a href="#about">Business Analysis & Prohect Management</a></li>
</ul>
감사는 HTML에서 잘 작동합니다. 내 기회는 당신이 telerik에서 경험 한 것입니다. 드롭 다운을 잘라서 볼 수 없으므로 이제는 테마를 telerik에 추가 할 때 가로입니다. – komfrajerem