-1

子レベルが1つある水平メニューに取り組んでおり、これも水平に表示する必要があります。以下は、水平メニューのサブメニューのコードです。私はそれに取り組んできましたが、私はそれに特定の問題に直面していません。親メニューを左に揃えて、divの凝視位置からほぼ開始するようにします#nav-wrapper。

次に、親メニューのすぐ下に子メニューを表示します。子メニューをmeusの左端から表示します。

たとえば、この場合、親メニューラッパーdiv#nav-wrapperの幅は1000pxであり、クラスに1000pxを指定すると#mainnav li ul、メイン領域にメニューが表示されます。親メニューの最初の要素の開始位置から開始するように子メニューを調整するにはどうすればよいですか？

第三に、親メニューにカーソルを合わせたとき、または親メニューがアクティブな場合は、親メニューを別の色で高度に赤と言う必要があります。

ここに画像の説明を入力してください

私はそれを機能させようとしましたが、今のところ私は望ましい結果が得られていません。

<html>
<head>
<title></title>
<style>
#nav-wrapper
{
position: relative;
background-color:white;
height:30px;
width:1000px;
background-color:#f5f5f5;
}
#nav-wrapper ul {
    color: #242320;
    list-style-type: none;
    font-size: .8em;
    line-height: 30px;
    font-weight: bold;
    font-family:Tahoma;
}
#mainnav li {
    float: left;
    position: relative;
}
#mainnav li a:link, #mainnav li a:visited {
    line-height: 30px;
    font-weight: bold;
    font-size: 1.2em;
    text-decoration: none;
    color: #242320;
    padding: 5px 0px;
    margin: 0px 0px 0px 0px;
}
#mainnav li a:active {
    line-height: 30px;
    font-weight: bold;
    font-size: 1.2em;
    text-decoration: none;
    color: #242320;
    background-color:red;
    padding: 5px 0px;
    margin: 0px 0px 0px 0px;
}
#mainnav li ul {
    left: 0px;
    min-height: 30px;
}
#mainnav li a:hover {
color: #3b541e;
border-bottom: solid 0px #3b541e;
}
#mainnav li ul {
  position: absolute;
  display: none;
  left: 0px;
  top: 30px;
  padding: 0px 0px 0px 5px;
  margin: 0px;
  background-color: gray;
  min-height: 30px;
  width: 1000px;
  float: left;
}

#mainnav li a:link, #mainnav li a:visited {
  line-height: 30px;
  font-weight: bold;
  font-size: 1.2em;
  text-decoration: none;
  color: #242320;
  padding: 1px 0px;
  margin: 0px 0px 0px 35px;
}

#mainnav ul li ul li a:link, #mainnav ul li ul li a:visited {
font-size: 1.2em;
color: #b1bba5;
margin: 0px 25px;
padding: 12px 0px 12px 0px;
line-height: 30px;
font-weight: bold;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
$('#nav-wrapper').on('hover', 'li', function () {
    $(this).closest('ul').find('li').removeClass('active');
    $(this).addClass('active');
    return false;
});

$('#nav-wrapper ul li').hover(function() {
    $('ul', this).show();
}, function() {
    $('#nav-wrapper ul', this).hide();
});
    });

</script>
</head>
<body>
    <div id="nav-wrapper">
        <ul id="mainnav">
        <li><a href="#">Home</a></li>
        <li><a href="#About</a></li>
        <li><a  href="#">Services</a>
            <ul>
              <li><a  href="#">Graphic Design</a></li>
               <li><a  href="#">Web Design</a></li>
              <li><a  href="#">Multimedia</a></li>
              <li><a  href="#">Exhibitions</a></li>
               <li><a  href="#">Trade Marketing</a></li>
            </ul>
        </li>
        <li><a  href="#">Work</a></li>
        <li><a  href="#">Clients</a></li>
        <li><a  href="#">Blog</a></li>
        <li><a  href="#">Contact</a></li>
        </ul>
    </div>
</body>
4

2 に答える 2

2

これはあなたが持っているものです。

http://jsfiddle.net/ZvW9T/1/

次回は自分でjsFiddleを作成してください。答えが簡単になります。

閉じていないアンカーにエラーがあることに注意してください：<li><a href="#About</a></li>である必要があります<li><a href="#About"></a></li>。

最初の質問がわかりません。左側に親メニューが表示されています。

2番目の質問については、ルールposition: relativeから削除してください。#mainnav li

#mainnav li {
    float: left;
    /* position: relative; */
}

（デモを参照：http：//jsfiddle.net/ZvW9T/2/）

3番目の質問については、すでにjQueryを使用しています。それが目的の方法である場合は、javascriptを使用して簡単に実現できます。

ただし、cssとjavascriptを組み合わせてcssを生成すると、コードに少し混乱が生じます。ウェブ上のいくつかのウォークスルーの1つ、 Google CSSドロップダウンメニューに従って、純粋なCSSでページを再考することをお勧めします。

通常、サブメニューは水平ではなく垂直であり（2列の垂直値のように混在している場合もあります）、ほとんどの場合、ページの先頭からではなく、親メニュータブから開始することに注意してください...

于 2012-12-31T08:45:45.907 に答える
0

これを試していただけますか

http://jsfiddle.net/ZXVLb/

#mainnav li a:link, #mainnav li a:visited margin:0 35px 0 0;

#mainnav li ul left position

#nav-wrapper margin:0 0 0 35px;
于 2012-12-31T09:10:21.080 に答える