Question

我创建了具有水平子菜单的响应式水平菜单。它工作正常，但面临的问题是子菜单直接出现在其父菜单下。我希望子菜单显示在页面的左侧，并且应该占用100％的页面宽度。

以下是FIDDLE链接：http://jsfiddle.net/Bangash/871no457/

HTML在下面给出

<div class='box' id='header'>
            <div class="box"><a href="/wb/" id="logo"></a></div>
                <div class='box' id='menu'>

                <label for="show-menu" class="show-menu">MENU</label>
<input type="checkbox" id="show-menu" role="button">
    <ul id="menu">

    <li>
        <a href="pages/about/approach.php">About IEC ￬</a>
        <ul class="hidden">
            <li><a href="pages/about/approach.php">THE IEC APPROACH</a></li>
            <li><a href="pages/about/key.php">Key Features</a></li>
            <li><a href="pages/about/commercial.php">Commercial Leases</a></li>
            <li><a href="pages/about/residential.php">Residential Leases</a></li>
            <li><a href="pages/about/oil.php">Oilfield Supply Base</a></li>
        </ul>
    </li>
    <li>
        <a href="pages/property/residential.php">Property ￬</a>
        <ul class="hidden">
            <li><a href="pages/property/residential.php">RESIDENTIAL PROPERTY</a></li>
            <li><a href="pages/property/commercial.php">COMMERCIAL PROPERTY</a></li>
            <li><a href="pages/property/case.php">CASE STUDIES</a></li>
        </ul>
    </li>
    <li><a href="pages/clients.php">Clients</a></li>
    <li>
        <a href="pages/lifestyle/sports.php">Lifestyle ￬</a>
        <ul class="hidden">
            <li><a href="pages/lifestyle/sports.php">SPORTS CENTRE</a></li>
            <li><a href="pages/lifestyle/dining.php">DINING</a></li>
            <li><a href="pages/lifestyle/power.php">POWER</a></li>
            <li><a href="pages/lifestyle/it.php">IT & COMMUNICATIONS</a></li>
            <li><a href="pages/lifestyle/safety.php">SAFETY & SECURITY</a></li>
            <li><a href="pages/lifestyle/medics.php">ONSITE MEDICS</a></li>
        </ul>
    </li>
</ul>   
      </div>
            </div>
            </div>

这是CSS

ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
clear: both;
}

/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
border-right:1px solid #ccc;
text-transform:uppercase;
}

/*Style for menu links*/
li a {
display:block;
min-width:200px;
height: 50px;
text-align: center;
line-height: 50px;
color: #282828;
background: #fff;
text-decoration: none;
}

/*Hover state for top level links*/
li:hover a {
background: #cce2be;
}

/*Style for dropdown links*/
li:hover ul a {
background: #eaf3e4;
color: #282828;
height: 40px;
line-height: 40px;
float:left;
position:relative !important;
left: 0;
right: 0;
clear: both;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #cce2be;
color: #282828;
left: 0;
right: 0;
}

/*Hide dropdown links until they are needed*/
li ul {
display: none;
min-width:100%;
clear: both;
margin-left: 0;
}

/*Make dropdown links horizontal*/
li ul li {
display: inline-block;
float: left;

}

/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 50px;
padding: 0 20px;
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: inline-block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "fsr";
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
float:right;
width:15%;
}

/*Hide checkbox*/
input[type=checkbox]{
display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}

Answer 1

没关系我已经解决了这个问题:) 您必须在媒体查询中相应地设置宽度。这是编辑。

/*Hide dropdown links until they are needed*/
li ul {
display: none;
min-width:114%;
clear: both;
margin-left: 0;
left: -14%;
background: #eaf3e4;
}

响应水平子菜单问题

1 个答案: