CSS3/HTML と jQuery を使用して独自のドロップダウン メニューを設計しています。私はいくつかの問題を抱えていますが、なぜ私が問題を抱えているのか理解できないようです.
http://johns-webdesign.com/portfolioV2/
ご覧のとおり、「ポートフォリオ」にカーソルを合わせると、右側に大きなギャップがあり、すべてが押し込まれます。なぜこれが起こっているのか理解できないようです。
jQuery コード:
<script type="text/javascript">
$(document).ready(function(){
$(".nav_link_port").mouseover(function(){$(".nav_link_temp").fadeIn('slow')});
$(".nav_link_temp").mouseout(function(){$(".nav_link_temp").fadeIn('slow')});
$(".nav_link_temp").mouseout(function(){$(".nav_link_temp").fadeOut('slow')});
});
</script>
HTML コード:
<div id="nav">
<a href="#" class="nav_link">Home</a>
<a href="#" class="nav_link">About</a>
<a href="#" class="nav_link_port">Portfolio</a>
<a href="#" class="nav_link_temp">Templates</a>
<a href="#" class="nav_link">Contact</a>
</div>
CSS:
.nav_link {
display: block;
float:left;
font-family: 'Open Sans';
font-size: 16px;
text-transform: uppercase;
background-color: #f7a70e;
color: #fff;
margin-right:5px;
text-decoration:none;
padding:15px;
position:relative;
z-index:100;
-webkit-transition: background 0.15s linear;
-moz-transition: background 0.15s linear;
-ms-transition: background 0.51s linear;
-o-transition: background 0.15s linear;
transition: background 0.15s linear;
}
.nav_link_port {
display: block;
float:left;
font-family: 'Open Sans';
font-size: 16px;
text-transform: uppercase;
background-color: #f7a70e;
color: #fff;
margin-right:5px;
text-decoration:none;
padding:15px;
position:relative;
z-index:101;
-webkit-transition: background 0.15s linear;
-moz-transition: background 0.15s linear;
-ms-transition: background 0.51s linear;
-o-transition: background 0.15s linear;
transition: background 0.15s linear;
}
.nav_link_temp {
display:none;
float:left;
font-family: 'Open Sans';
font-size: 16px;
text-transform: uppercase;
background-color: #f7a70e;
color: #fff;
margin-right:5px;
text-decoration:none;
padding:15px;
position:relative;
z-index:102;
top:52px;
left:-120px;
-webkit-transition: background 0.15s linear;
-moz-transition: background 0.15s linear;
-ms-transition: background 0.51s linear;
-o-transition: background 0.15s linear;
transition: background 0.15s linear;
}
.nav_link:hover {
background-color: #4f69a3;
}
.nav_link_port:hover,.nav_link_temp:hover {
background-color: #4f69a3;
}
CSS が乱雑であることはわかっていますが、修正できます。これは、ナビをテストするための簡単なコードでした。