如何获得全宽（屏幕）下拉菜单

时间：2017-04-16 10:25:25

标签： css

尝试获取全宽下拉菜单，但现在它占用了父元素的整个宽度。在这种情况下，列表项。

有人可以帮我解决这个问题。最重要的是，这个下拉菜单也应该是响应式的。请不要使用JavaScript和其他JavaScript框架，只能使用纯CSS。

https://codepen.io/anon/pen/dWoMoJ 

html, 
body {
	width: 100%;
}

body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	font-size: 16px;
	color: #666;
	background: transparent;
}

.navbar-links {
		max-width: 700px;
		text-align: center;
		margin: 0 auto;
	}

.links-to li {
		display: inline-block;
		min-width: 150px;
		text-align: center;
    position: relative;
		margin-left: -5px;
		color: #828282;
		margin-top: -16px;
	}
	.links-to li .main-links {
		display: block;
		padding-top: 20px;
		padding-bottom: 20px;
		border: 1px solid green;
		overflow: hidden;
	}
	.links-to li a:hover {
		color: #eb0028;
		cursor: pointer;
	}

#navbar-dropdown-toggle{
    position: absolute;
}

.dropdown-label-navbar {
	  height: 100%;
	  width: 100%;
	  display: block;
	  position: absolute;
	  background: red;
    top: 0;
    left: 0;
}

	.entire-block {
		width: 500px;
		height: 150px;
		position: relative;
		display: block;
		margin: 0 auto;
		padding: 0;
		margin-top: 10px;
	}

	.dropdown-menu {
		width: 100%;
		opacity: 0;
		background: white;
		position: absolute;
		margin: 0;
		padding: 0;
		left: 0;
		right: 0;
		border: 1px solid red;
		max-height: 20px;
    box-sizing: border-box;
		overflow: hidden;
	}

	.navbar-dropdown:checked ~ .dropdown-menu {
		display: block;
		transition: max-height 1s;
		max-height: 300px;
		opacity: 1.0;
	}
<div class="navbar-links" id="menu">
            <ul class="links-to">
                <li class="main-nav">
                    <a href="#99" class="main-links">Home</a>
                </li>

                <li class="main-nav">
                    <a href="#99" class="main-links">Shoes</a>
                </li>

                <li class="main-nav">
                    <input id="navbar-dropdown-toggle" type="checkbox" class="navbar-dropdown"/>
                    <label class="dropdown-label-navbar" id="checkboxNavbar" for="navbar-dropdown-toggle"></label>

                    <a href="#99" class="main-links">Store</a>
                    <ul class="dropdown-menu" id="checkboxDropdown">
                        <div class="entire-block">
                            <div class="dropdown-image-block">
                            </div>
                            <li class="list-of-dropdown">
                                <div class="dropdown-list"><a href="#99">Apple</a></div>
                                <div class="dropdown-list"><a href="#99">Banana</a></div>
                                <div class="dropdown-list"><a href="#99">Christus</a></div>
                            </li>
                        </div>
                    </ul>
                </li>
            </ul>
        </div>

3 个答案:

答案 0 :(得分：1)

我会更改下拉菜单的样式：

＆＃13;
＆＃13; 
.navbar-links {
		max-width: 700px;
		text-align: center;
		margin: 0 auto;
	}

.links-to li {
		display: inline-block;
		min-width: 150px;
		text-align: center;
    position: relative;
		margin-left: -5px;
		color: #828282;
		margin-top: -16px;
	}
	.links-to li .main-links {
		display: block;
		padding-top: 20px;
		padding-bottom: 20px;
		border: 1px solid green;
		overflow: hidden;
	}
	.links-to li a:hover {
		color: #eb0028;
		cursor: pointer;
	}

#navbar-dropdown-toggle{
    position: absolute;
}

.dropdown-label-navbar {
	  height: 100%;
	  width: 100%;
	  display: block;
	  position: absolute;
	  background: red;
    top: 0;
    left: 0;
}

	.entire-block {
		width: 500px;
		height: 150px;
		position: relative;
		display: block;
		margin: 0 auto;
		padding: 0;
		margin-top: 10px;
	}

	.dropdown-menu {
		width: 300%;
		opacity: 0;
		background: white;
		position: absolute;
		margin: 0;
		padding: 0;
		left: 0;
		right: 0;
		border: 1px solid red;
		max-height: 20px;
    box-sizing: border-box;
		overflow: hidden;
	}

	.navbar-dropdown:checked ~ .dropdown-menu {
        margin-left: -200%;
		display: block;
		transition: max-height 1s;
		max-height: 300px;
		opacity: 1.0;
	}
＆＃13; 
<div class="navbar-links" id="menu">
            <ul class="links-to">
                <li class="main-nav">
                    <a href="#99" class="main-links">Home</a>
                </li>

                <li class="main-nav">
                    <a href="#99" class="main-links">Shoes</a>
                </li>

                <li class="main-nav">
                    <input id="navbar-dropdown-toggle" type="checkbox" class="navbar-dropdown"/>
                    <label class="dropdown-label-navbar" id="checkboxNavbar" for="navbar-dropdown-toggle"></label>

                    <a href="#99" class="main-links">Store</a>
                    <ul class="dropdown-menu" id="checkboxDropdown">
                        <div class="entire-block">
                            <div class="dropdown-image-block">
                            </div>
                            <li class="list-of-dropdown">
                                <div class="dropdown-list"><a href="#99">Apple</a></div>
                                <div class="dropdown-list"><a href="#99">Banana</a></div>
                                <div class="dropdown-list"><a href="#99">Christus</a></div>
                            </li>
                        </div>
                    </ul>
                </li>
            </ul>
        </div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

基本问题是你的<li>相对定位，因此后嗣的任何绝对定位都与父母相关。 会做这样的事情： https://codepen.io/23b/pen/VbLpZe?editors=1100

另一种解决方案是将下拉列表放在<li>容器altogther之外。

答案 2 :(得分：1)

全宽下拉菜单！

试试这个

＆＃13;
＆＃13; 
/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
body {
  background: #212121;
  font-size: 22px;
  line-height: 32px;
  color: #ffffff;
  word-wrap: break-word !important;
  font-family: 'Open Sans', sans-serif;
}

h1 {
  font-size: 60px;
  text-align: center;
  color: #FFF;
}

h3 {
  font-size: 30px;
  text-align: center;
  color: #FFF;
}

h3 a {
  color: #FFF;
}

a {
  color: #FFF;
}

h1 {
  margin-top: 100px;
  text-align: center;
  font-size: 60px;
  font-family: 'Bree Serif', 'serif';
}

#container {
  margin: 0 auto;
}

p {
  text-align: center;
}

nav {
  margin: 50px 0;
  background-color: gray;
}

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

nav ul li {
  display: inline-block;
  background-color: gray;
}

nav a {
  display: block;
  padding: 0 10px;
  color: #FFF;
  font-size: 20px;
  line-height: 60px;
  text-decoration: none;
}

nav a:hover {
  background-color: #000000;
}


/* Hide Dropdowns by Default */

nav ul ul {
  display: none;
  position: absolute;
  top: 60px;
  /* the height of the main nav */
}


/* Display Dropdowns on Hover */

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


/* Fisrt Tier Dropdown */

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


/* Second, Third and more Tiers	*/

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


/* Change this in order to change the Dropdown symbol */

li>a:after {
  content: ' +';
}

li>a:only-child:after {
  content: '';
}
＆＃13; 
<div id="container">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">WordPress</a>
        <!-- First Tier Drop Down -->
        <ul>
          <li><a href="#">Themes</a></li>
          <li><a href="#">Plugins</a></li>
          <li><a href="#">Tutorials</a></li>
        </ul>
      </li>
      <li><a href="#">Web Design</a>
        <!-- First Tier Drop Down -->
        <ul>
          <li><a href="#">Resources</a></li>
          <li><a href="#">Links</a></li>
          <li><a href="#">Tutorials</a>
            <!-- Second Tier Drop Down -->
            <ul>
              <li><a href="#">HTML/CSS</a></li>
              <li><a href="#">jQuery</a></li>
              <li><a href="#">Other</a>
                <!-- Third Tier Drop Down -->
                <ul>
                  <li><a href="#">Stuff</a></li>
                  <li><a href="#">Things</a></li>
                  <li><a href="#">Other Stuff</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Graphic Design</a></li>
      <li><a href="#">Inspiration</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
  <h1>Pure CSS Drop Down Menu</h1>
  <p> A simple dropdown navigation menu made with CSS Only. Dropdowns are marked with a plus sign ( + )</p>
  <p>Read tutorial</p>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题