Question

如果之前有人问过并回答过，请道歉。我有一个下拉菜单，可以在chrome和Firefox中完美运行，但在IE中，下拉框位于我正在徘徊的右侧，我无法将它放在下面。如果有人能解释如何解决这个问题，我将不胜感激。

示例网站是： https://www.imac-repairs.co.uk/test/menu.html

CSS

 body {
    font-size:22px;
    line-height: 32px;
    margin: 0;
    padding: 0;
    word-wrap:break-word !important;
    background-image:url("image/a.jpeg");
    }

#icon {
    height:15px;
    width:15px; 
}

#container {
    margin: 0 auto;
    max-width: 890px;
}

p {
    text-align: center;
}

.toggle,
[id^=drop] {
    display: none;
}

nav { 
    margin:0;
    padding: 0;
}

nav:after {
    content:"";
    display:table;
    clear:both;
}

nav ul {
    float: left;
    padding:0;
    margin:0;
    list-style: none;
    position: relative;
    }

nav ul li {
    margin: 0px;
    display: inline-block;
    float: left;
    text-align:center;
    }

nav a {

    padding:5px 25px;   
    color:#FFF;
    font-size:17px;
    text-decoration:none;
    text-align:center;
}

nav ul li ul li:hover{
    background:gray;
}

nav ul li ul li a{
    color:black;
    font-size:17px;
}

nav ul li ul a:hover {
    background: gray;       
}

nav a:hover { 
    background-color: gray;   
}

nav ul ul {
    display: none;
    position: absolute; 
    top: 30px; 
    font-size:17px;
    background:white;
    opacity:0.9;
    border-radius:3px;
}

nav ul li:hover > ul {
    display:inherit;
}

nav ul ul li {
    width:140px;
    float:none;
    display:list-item;
    position: relative;
}

nav ul ul ul li {
    position: relative;
    top:-60px;
    left:170px; 
}

HTML 的

<html>
<head>
<title>
    Responsive dropdown menu
</title>
<link href="navbar.css" rel="stylesheet" type="text/css">
</head>
<body>
        <nav>
         <label for="drop" class="toggle">Menu</label>
        <input type="checkbox" id="drop" />
            <ul class="menu">
                <li><a href="#">Menu 1</a></li>
                <li>
                    <!-- First Tier Drop Down -->
                    <label for="drop-1" class="toggle">Menu 2</label>
                    <a href="#">Menu 2 <img src="image/icon.png" id="icon" /></a>
                    <input type="checkbox" id="drop-1"/>
                    <ul>
                        <li><a href="#">Menu 2.1</a></li>
                        <li><a href="#">Menu 2.2</a></li>
                        <li><a href="#">Menu 2.3</a></li>
                         <li><a href="#">Menu 2.4</a></li>
                        <li><a href="#">Menu 2.5</a></li>

                    </ul> 

                </li>
                <!-- End of First Tier Drop Down -->
                <li>                
                <!-- Second Tier Drop Down -->
                <label for="drop-2" class="toggle">Menu 3</label>
                <a href="#">Menu 3 <img src="image/icon.png" id="icon" /></a>
                <input type="checkbox" id="drop-2"/>
                <ul>
                    <li><a href="#">Menu 3.1</a></li>
                    <li><a href="#">Menu 3.2</a></li>
                    <li><a href="#">Menu 3.3</a></li>
                    <li><a href="#">Menu 3.4</a></li>                   

                </ul>
                </li>
                <!-- End of Second Tier Drop Down -->
                <li>

                <!-- Third Tier Drop Down -->
                <label for="drop-2" class="toggle">Menu 4</label>
                <a href="#">Menu 4 <img src="image/icon.png" id="icon" /></a>
                <input type="checkbox" id="drop-2"/>
                <ul>
                    <li><a href="#">Menu 4.1</a></li>
                    <li><a href="#">Menu 4.2</a></li>
                    <li><a href="#">Menu 4.3</a></li>
                    <li><a href="#">Menu 4.4</a></li>
                    <li><a href="#">Menu 4.5</a></li>
                    <li><a href="#">Menu 4.6</a></li>

                </ul>
                </li>
                <!-- End of third Tier Drop Down -->
                <li>
                <!-- Fourth Tier Drop Down -->
                <label for="drop-2" class="toggle">Menu 5</label>
                <a href="#">Menu 5 <img src="image/icon.png" id="icon" /></a>
                <input type="checkbox" id="drop-2"/>
                <ul>
                    <li><a href="#">Menu 5.1</a></li>
                    <li><a href="#">Menu 5.2</a></li>
                    <li><a href="#">Menu 5.3</a></li>          

                </ul>
                </li>
                <!-- End of fourth Tier Drop Down -->
                <li>
                <!-- Fifth Tier Drop Down -->
                <label for="drop-2" class="toggle">Menu 6</label>
                <a href="#">Menu 6 <img src="image/icon.png" id="icon" /></a>
                <input type="checkbox" id="drop-2"/>
                <ul>
                    <li><a href="#">Menu 6.1</a></li>
                    <li><a href="#">Menu 6.2</a></li>
                    <li><a href="#">Menu 6.3</a></li>
                    <li><a href="#">Menu 6.4</a></li>
                    <li><a href="#">Menu 6.5</a></li>
                    <li><a href="#">Menu 6.6</a></li>

                </ul>
                </li>
                <!-- End of Fifth Tier Drop Down -->
                <li><a href="#">Menu 7</a></li>
                <li><a href="#">Menu 8</a></li>
                <li><a href="#">Menu 9</a></li>
            </ul>
        </nav>

</body>
</html>

Answer 1

将position: relative;添加到li，将left: 0添加到子ul：

nav ul li {
    margin: 0px;
    display: inline-block;
    float: left;
    text-align:center;
    position: relative;
    }

nav a {

    padding:5px 25px;   
    color:#FFF;
    font-size:17px;
    text-decoration:none;
    text-align:center;
}

nav ul li ul li:hover{
    background:gray;
}

nav ul li ul li a{
    color:black;
    font-size:17px;
}

nav ul li ul a:hover {
    background: gray;       
}

nav a:hover { 
    background-color: gray;   
}

nav ul ul {
    display: none;
    position: absolute; 
    top: 30px; 
    font-size:17px;
    background:white;
    opacity:0.9;
    left: 0;
    border-radius:3px;
}

nav ul li:hover > ul {
    display:inherit;
}

nav ul ul li {
    width:140px;
    float:none;
    display:list-item;
    position: relative;
}

nav ul ul ul li {
    position: relative;
    top:-60px;
    left:170px; 
}

它看起来并不完全一样，你可以看到：

<强> IE：

<强>铬：

但它大部分都适用。

下拉菜单未在IE

1 个答案: