Andrin Spitzer
Mitglied
Guten tag
ich habe mir eine Navigation gebaut mit denn dazugehörigen Buttons, bei diesen Buttons wird ein border eingefahren wen man darüber fährt, das klappt so weit auch aber ich kriege es nicht hin das der border immer schön unter Button erscheint wen man die Fenster-gösse verändert.
hier mein code
ich hoffe ihr könnt mir helfen liebe grüsse
ich habe mir eine Navigation gebaut mit denn dazugehörigen Buttons, bei diesen Buttons wird ein border eingefahren wen man darüber fährt, das klappt so weit auch aber ich kriege es nicht hin das der border immer schön unter Button erscheint wen man die Fenster-gösse verändert.
hier mein code
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DeskBuilder</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/nav-style.css">
</head>
<body>
<div id="nav">
<div id="logo">
</div>
<div class="nav">
<ul>
<li class="n1"><a href="#">Shop</a></li>
<li class="n2"><a href="#">Team</a></li>
<li class="n3"><a href="#">Service</a></li>
<li class="quebec"> </li>
</ul>
</div>
</div>
</body>
CSS:
#nav {
position: absolute;
top: 0px;
height: 3.75em;
left: 0px;
right: 0px;
background: rgba(255,255,255,0.8);
-webkit-box-shadow: 0px 0px 6px -1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 6px -1px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 6px -1px rgba(0, 0, 0, 0.5);
z-index: 10000;
}
.nav {
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0%;
padding: 18px;
}
.nav-button {
margin-right: 25px;
font-family: "Segoe UI", "微軟正黑體", "Microsoft JhengHei", "Arial";
font-size: 16px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 21px;
cursor: pointer;
}
.nav-button:hover {
border-bottom: 3px solid black;
}
#logo {
position: absolute;
top: 0px;
bottom: 0px;
right: 85%;
left: 0px;
}
ul {
position: absolute;
overflow: hidden;
top: -8px;
left: -5px;
right: 0;
}
li {
list-style: none outside;
position: relative;
z-index: 1;
float: left;
border-bottom: 2px solid transparent;
padding: 0 20px 0 0;
left: 9%;
}
li a {
position: relative;
top: 5px;
display: block;
margin: -5px 0 0;
border-bottom: 16px solid transparent;
padding: 10px 0;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-family: "Segoe UI", "微軟正黑體", "Microsoft JhengHei", "Arial";
color: black;
}
.n1 { width: 80px; }
.n2 { width: 57px; }
.n3 {
width: 69px;
padding-right: 0 !important;
}
.quebec {
position: absolute;
bottom: 0;
left: 0;
z-index: 3;
margin: 0;
border: 0;
width: 5px;
height: 2px;
padding: 0;
overflow: hidden;
text-indent: -9999em;
background: rgba(0, 0, 0, 0.5);
-webkit-transition-property: left, width;
-moz-transition-property: left, width;
-ms-transition-property: left, width;
-o-transition-property: left, width;
transition-property: left, width;
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
-ms-transition-duration: .5s;
-o-transition-duration: .5s;
transition-duration: .5s;
pointer-events: none;
}
.n1:hover ~ li.quebec { left: 12.5%; width: 80px; }
.n2:hover ~ li.quebec { left: 21.8%; width: 80px; }
.n3:hover ~ li.quebec { left: 31%; width: 80px; }ich hoffe ihr könnt mir helfen liebe grüsse
