0

したがって、これらのキーワードに関連するすべてのグーグル検索は、常にposition:fixed;. それは私がやりたいことではありませんが、大学に入学する Web デザイン愛好家として Web サイトを作成するビジネスを始めたことは少し恥ずかしいと言わざるを得ません。私が実現したいのは、Web サイトのナビゲーション バーの子メニューを他のコンテンツの上に表示することです。私が試してみましたposition:fixed;親アンカーは画面に追従しませんが、画面の特定の部分にカーソルを合わせると、ナビゲーション バーが表示されていなくても、子メニューはページの上部から 35 ピクセル離れますページに表示されません。私が望むのは、子メニューが他のすべてのコンテンツの上にあることだけです。はい、position:relative; z-index:99;メニューを試してみましたが、z 軸の上にとどまることはありませんでした。誰にもアイデアはありますか？以下に、ナビゲーション バーの CSS のスニペットを示します。

.menu{
    height:40px;
}
.menu li{
    list-style:none;
    float:left;
    height:40px;
}
.menu li a{
    display:block;
    padding:15px;/*t r b l*/
    line-height:30px;
    text-decoration:none;
    color:#F9F9F9;
    -webkit-transition:color .15s linear;
    -moz-transition:color .15s linear;
    -o-transition:color .15s linear;
    -ms-transition:color .15s linear;
    transition:color .15s linear;
}
.menu li:hover > a{
    color: #C00;
    background:rgba(38, 38, 38, 1);
}
.menu ul{
    font-weight:300;
    position:absolute;/*relative positioning will turn this into a vertical nav bar, and absolute positioning will hide behind the white section below*/
    opacity:0;
    width:150px;
    border-bottom:4px solid #C00;
    box-shadow:0 .9em .9em rgba(0,0,0,0.7);
    -webkit-transition:height .1s linear;
    -moz-transition:height .1s linear;
    -o-transition:height .1s linear;
    -ms-transition:height .1s linear;
    transition:height .1s linear;
}
.menu li:hover > ul{
    opacity:1;
    background:rgba(38, 38, 38, 1);
}
.menu ul li{
    height:0;
    -webkit-transition:height .1s linear;
    -moz-transition:height .1s linear;
    -o-transition:height .1s linear;
    -ms-transition:height .1s linear;
    transition:height .1s linear;
}
.menu li:hover > ul li{
    font-size:10px;
    width:190px;
    margin-left:-40px;
    background:rgba(38, 38, 38, 1);
    height:30px;
    border-bottom:rgba(46, 46, 46, 1) 1px solid;
    border-top:rgba(30, 30, 30, 1) 1px solid;
}
.menu ul li a{
    padding:0 0 0 10px;
    height:inherit;
    overflow:hidden;
}

コードがごちゃごちゃしていて、そのすべてを分析するのに時間がかかることは申し訳ありませんが、見た目ほど悪くはありません。質問や懸念がある場合は、ページで何が起こっているかを喜んで説明します.

4

1 に答える 1

0

質問で提供された Web ( http://aparturecreations.com/about-aparture.php ) では、質問で提供された Webの の直前に配置され<div>たクラスで、 を持っています。それを削除すると、すべて正常に動作します"bannerContent"<body>overlfow:hidden

.bannerContent {
  background: #D0D0D0;
  overflow: hidden;
  width: inherit;
  height: inherit;
  min-height: 200px;
}

する必要があります

.bannerContent {
   background: #D0D0D0;
   width: inherit;
   height: inherit;
   min-height: 200px;
}

編集:

この状況でグラデーションを維持したい場合の最も簡単な解決策は、<div>継承するのではなく、これで高さを修正することです

.bannerContent {
   background: #D0D0D0;
   width: inherit;
   height: 300px;
   min-height: 200px;
}
于 2013-07-08T02:13:36.753 に答える