2

（動作中のコードを反映するようにコードを更新したので、以下のコードが動作します）

私はサブメニューを配置しようと取り組んできました。記録のために、私はこの仕事をするために先週宿題をしました、しかし私は私の親子関係でどこかで混乱していると思います。

私がやろうとしているのは、ページの列にメニューを配置し、ホバーすると、その右側にサブメニューが表示されるようにすることです。問題は、メニューが表示されるのに、ページのサイズを変更すると、サブメニューがあちこちにジャンプすることです。私の相対的および絶対的な位置が問題のように見えますが、どこにあるのかわかりません

これが私のCSSコードです：

#col1
{
background-color:#000033;
width:15%;
height:100%;
float:left;
color:#FFF000;
font-family: bold;
font-size: 100%;
}


ul.nav li 
{
position:relative;
float:left;
width:100%;
}

ul.nav a
{
display: block;
background-color:#B2B2D9;
margin-right:3%;
margin-bottom:1%;
margin-left:1%;
text-decoration:none;
border-top-color:#FFFFFF;
border-right-color:#E6E6E6;
border-bottom-color:#FFFFFF;
border-left-color:#E6E6E6;
border-top-width: 3%;
border-right-width: 3%;
border-bottom-width: 3%;
border-left-width: 3%;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
padding: 2%;
}


ul.nav
{
position:relative;
list-style-type: none;
padding-left:0px;
line-height:1.5em;
}

ul.nav2 a
{
display: block;
background-color:#000033;
border:solid 3px black;
padding:5%; 
margin-right:0px;
margin-bottom:0%;
margin-left:0%;
text-decoration:none;
color:white;
border-top-color:#FFFFFF;    
border-right-color:#E6E6E6;
border-bottom-color:#FFFFFF;
border-left-color:#E6E6E6;
}


ul.nav2
{
position:absolute;
top:0;
left:100%;
display:none;
font-size:100%;
list-style-type: none;
width:8em;
line-height:1.5em;
float: none;
clear: none;
margin: 0px;
}

ul.nav2 li 
{
display:block;
margin-left:-2.8em;
width:100%;
line-height:1.3em;
}

これが私のHTMLとJavaScriptです。

<script>

$(document).ready(function () {
    $('.nav').hover(function (e) {
        $('.nav2').slideDown('normal');
    }, function () {
        $('.nav2').slideUp('normal');
    });
});

</script>
</head>

 <body>

<div id="banner">
<img src="images/banner.jpg" width="100%" alt="banner" />
</div>

<div id="wrapper">


<div id="col1">

<ul class="nav">
<li><a href="http://www.ahome.com">Home</a></li>
<li><a href="http://www.ab.com">About</a></li>

    <ul class="nav2">
  <li><a href="http://www.albio.com">Bio</a></li>
  <li><a href="http://www.acred.com">Credentials</a></li>
  <li><a href="http://www.aled.com">Education</a></li>
  </ul>

<li><a href="http://www.anew.com">New Listings</a></li>
<li><a href="http://www.afeat.com">Featured Home</a></li>
<li><a href="http://www.atow.com">Town Facts</a></li>
<li><a href="http://www.acme.com">Contact Me</a></li>
</ul>


</div>


<div id="main">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 

</div>

</div>
</body>
</html>

ご覧のとおり、私のメニューが問題です。誰かが私を正しい方向に向けさせることができますか？

4

1 に答える 1

2

この方法が必要になる場合があります。HTMLを変更してCSSを少し調整できれば、これを実現できます。

HTML

<ul class="nav">
    <li>
        <a href="#">Menu 1</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 2</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 3</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
</ul>

CSS

* {font-family: "Segoe UI", Tahoma;}
ul.nav {border-bottom: 1px solid #999;}
ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
ul.nav > li:hover ul {display: block;}
ul.nav > li ul li {display: block;} /* Vertical Menu */
ul.nav > li ul li {display: inline-block;} /* Horizontal Menu */

フィドル： http：
//jsfiddle.net/vMuxA/（垂直メニュー）
http：//jsfiddle.net/vMuxA/1/（水平メニュー）

于 2013-02-18T01:18:00.217 に答える