0

私は当初、結果が私のニーズに完全に適合する Chrome でナビゲーションを作成しました。その後、Mozilla Firefox では同じ結果が出力されないことがわかりました。[メンバー アクション] と [管理者関連] の下のドロップダウン メニューは、必要に応じて水平ではなく垂直に表示されます。しかし、私の最大の失望は、ドロップダウン メニューさえ表示されない Internet Explorer でナビゲーションをテストしたことです。以下のコードとあなたのフィードバックをチェックしてくれる人に本当に感謝します。ありがとう。

css の行の 1 つを変更して問題を解決しました。

ナビゲーション ul li {float: left; リストスタイル:なし; }

HTML 

<div id="navigationContainer"> 
<div id="navigation"> 
<ul>
<li class="borderleft"><a href="homepage.jsp">Home</a> </li>
<li><a href="Registration.jsp">Register</a> </li>
<li><a href="searchCar.jsp">Search cars</a></li>
<li><a href="DisplayAll.jsp">Display all cars</a></li> 
<li><a href="#">Member Actions</a>
<ul> <!-- Open drop down menu -->
<li class="bordertop"><a href="Login.jsp">Login</a></li> 
<li class="floatLeft"><a href="Member.jsp">Member Area</a></li>
<li><a href="ReserveCar.jsp">Reservation</a></li>

<li><a href="ContactUs.jsp">Contact us</a></li>
<li><a href="#">Admin Related</a>
<ul> 
<li class="bordertop"><a href="braking.html">Insert new car</a></li>
<li><a href="weather.html">Delete a car</a></li>
</ul> 
</li> 
</ul>
</div>
</div>

</BODY>
</HTML>

CSS

* {padding: 0%; margin 0%; } /* Overwrites the browser stylesheet */



#navigationContainer {background:url(images/navi.png); width:100%;position: relative; white-space:nowrap; word-spacing:0; } 

#navigation {width:1200px; height:65px; position: relative; font-family: Arial; margin: 2px auto; font-size: 125%; } 

#navigation ul { list-style-type: none; } 

#navigation ul li {float: left; position: relative; } 

#navigation ul li a { border-right: 2px solid #e9e9e9; padding: 20px; 
display: block; margin: 0 auto; text-align: center; color: black; text-decoration: none; } 

#navigation ul li a:hover { background: blue; color: white; } 

#navigation ul li ul { display: none; } 

#navigation ul li:hover ul {display: block; position: absolute;   } 

#navigation ul li ul li {float:left; position:relative; }

#navigation ul li:hover ul li a { background: #12aeef; color: white; position:relative; margin: 0px auto; border-bottom: 1px solid white; border-right: 1px solid white; width: 119px; }

#navigation ul li:hover ul li a:hover { background: blue;} 

.bordertop { border-top: 1px solid white; } 
.borderleft { border-left: 2px solid #e9e9e9;}
4

1 に答える 1

0

これを試してください http://jsfiddle.net/Vf3AJ/

例: http://www.cssnewbie.com/example/css-dropdown-menu/horizo​​ntal.html

EDITED 水平方向を垂直方向と読み間違えました。IE10、FF、Chrome でテスト済み

余談ですが、ビューアーの画面の幅によっては、水平メニューに深刻な問題が生じます。

CSS

nav {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
}
nav li {
    list-style: none;
    float: left;
}
nav li a {
    display: block;
    padding: 3px 8px;
    text-transform: uppercase;
    text-decoration: none;
    color: #999;
    font-weight: bold;
}
nav li a:hover {
    background: blue;
    color: white;
}
nav li ul {
    display: none;
}
nav li:hover ul, nav li.hover ul {
    position: absolute;
    display: inline;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
}
nav li:hover li, nav li.hover li {
    float: left;
}
nav li:hover li a, navbar li.hover li a {
    color: #000;
}
nav li li a:hover {
    color: white;
}

HTML

<div id="navigationContainer">
    <nav id="navigation">
        <ul>
            <li class="borderleft"><a href="homepage.jsp">Home</a> 
            </li>
            <li><a href="Registration.jsp">Register</a> 
            </li>
            <li><a href="searchCar.jsp">Search cars</a>

            </li>
            <li><a href="DisplayAll.jsp">Display all cars</a>

            </li>
            <li><a href="#">Member Actions</a>

                <ul>
                    <!-- Open drop down menu -->
                    <li class="bordertop"><a href="Login.jsp">Login</a>

                    </li>
                    <!-- A bordertop class is given to this listed element in order to style a top border for in in the external CSS file. -->
                    <li class="floatLeft"><a href="Member.jsp">Member Area</a>

                    </li>
                    <li><a href="ReserveCar.jsp">Reservation</a>

                    </li>
                </ul>
            </li>
            <li><a href="ContactUs.jsp">Contact us</a>

            </li>
            <li><a href="#">Admin Related</a>

                <ul>
                    <li class="bordertop"><a href="braking.html">Insert new car</a>

                    </li>
                    <li><a href="weather.html">Delete a car</a>

                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</div>
于 2013-04-01T14:21:11.320 に答える