2

垂直メニューの使用方法と垂直メニューバーを試しました。jqueryまたはjavascriptのみを使用していません。htmlとcssのみを使用しています。この垂直メニューにマウスを合わせると、正しく機能しません。助けてください。

コードは次のとおりです。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical menu</title>
<style type="text/css">
.headerouter1{clear:both;}
.headerinner1{ margin:0 auto; width:990px;}
.menustart{ background:url(images/menustart.png) no-repeat; width:16px; height:40px; float:left;}
.menumiddle{background:url(images/menumiddle.png) repeat-x; width:900px; height:40px; float:left; }
.menumiddle ul li{ float:left; font-family:Arial, Helvetica, sans-serif; padding:15px 20px 0px 20px;font-size:14px; background:url(images/menudivider.png) no-repeat;}
.menumiddle ul li a{text-decoration:none; font-family:Arial, Helvetica, sans-serif;padding:15px 20px 0 20px;color:#FFFFFF;}
.menumiddle ul li a:hover{ color:#000;}
.menuend{ background:url(images/menuend.png) no-repeat; width:15px; height:40px;float:left;}
.menumiddle ul{ margin:0px; }
.menumiddle ul li{ list-style:none; float:left; }
.menumiddle ul li a{ text-decoration:none;}
.menumiddle ul li a:hover{ }
.menumiddle ul li a.active{ }
.menumiddle ul li ul{display: none;}
.menumiddle ul li:hover ul{ margin-top:6px;position:absolute;width:195px;display:block;padding:15px 0px 0px 0px;background:#fff;  margin-left:-10px;border-bottom:2px solid #000;border-left:2px solid #000;border-right:2px solid #000;}
.menumiddle ul li:hover ul li a{float:left;clear:both;width:185px;font:bold 12px arial;color:#000;background:none; padding:0px 5px 4px 5px; border-bottom:1px solid #fafafa; border-radius:15px;margin-left:-20px; }
.menumiddle ul li:hover ul li a:hover{ color:#009cff;}
</style>
</head>

<body>
<div class="headerouter1">
<div class="headerinner1 ">

<div class="menustart"></div>
        <div class="menumiddle">
            <ul>
            <li><a href="#">Home</a>
            <ul style="list-style:none;">
            <li><a href-"#">sdsd</a></li>
            <li><a href-"#">sdsd</a></li>
                        <li><a href-"#">sdsd</a></li>
                        <li><a href-"#">sdsd</a></li>
                        <li><a href-"#">sdsd</a></li>
            </ul></li>
            <li><a href="#">Home</a>
            <ul style="list-style:none;">
            <li><a href-"#">sdsd</a></li>
                        <li><a href-"#">sdsd</a></li>
                        <li><a href-"#">sdsd</a></li>
                        <li><a href-"#">sdsd</a></li>
            </ul></li>
            </li>

<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>
<div class="menuend"></div>

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

2 に答える 2

1

Raghuは、 http：//jsfiddle.net/K6dvs/のように、ホバーすると垂直ドロップダウンメニューが下にスライドするようなものが必要ですか。

.menumiddle > ul{height:40px; overflow:hidden;}

そして、フィドルで見るいくつかのパディングを変更します。

于 2012-12-07T09:31:53.533 に答える
0

あなたのCSSは非常に貧弱に書かれています。要素を1回だけリストし、その中ですべてのプロパティを定義する必要があります。また、HTMLアンカーを作成するときは、-の代わりに=を使用します。

<a href="#">sdsd</a>

HTML5で達成しようとしていることの基本は次のとおりです。

<!DOCTYPE html>
<html>
    <head>
        <title></title>

        <style type="text/css">
            .menumiddle ul {list-style: none; padding: 0px; font-family:Arial, Helvetica, sans-serif;}
            .menumiddle li a {text-decoration: none;}
            .menumiddle li a:hover {text-decoration: underline;}
        </style>


        <meta charset="UTF-8">
    </head>
    <body>
        <div class="menumiddle">
            <ul>
                <li><a href="page1.html">Page 1</a></li>
                <li><a href="page2.html">Page 2</a></li>
                <li><a href="page3.html">Page 3</a></li>
            </ul>
        </div>
    </body>
</html>

デフォルトでは、リスト要素は互いに下に配置されます（ブロック）。これを水平リストに変更する場合は、次のCSSステートメントを追加します。

.middlemenu li {display: inline;}

floatを使用する必要はありません。リスト内の要素を配置するときにいつでも残します。

于 2012-12-07T09:47:35.313 に答える