Question

我在下拉菜单中遇到了一个非常大的问题，我使用了Css和HTML。

我所面临的问题是我需要导航的背景宽度为100％的ontainer但是当我增加水平菜单时它转移到下一行

你能帮忙吗

body{

  margin: 0;
  padding: 0;
  font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 87.5%;

}

.container{

  width: 70%;
  margin: 0 auto;
  clear: both;
  border:10px solid #0171bd;
}

.nav ul ul {
  display: none;
}

.nav ul li:hover > ul {
    display: block;
}

.nav ul {
  background: #efefef; 
  background: linear-gradient(top, #0077bb 0%, #0171bd 100%);  
  background: -moz-linear-gradient(top, #0077bb 0%, #0171bd 100%); 
  background: -webkit-linear-gradient(top, #0077bb 0%,#0171bd 100%); 
  box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
  padding: 0 20px;
  border-radius: 10px;  
  list-style: none;
  position: relative;
  display: inline-table;

}
.nav ul:after {
    content: ""; clear: both; display: block;
}

.nav ul li {
  float: left;
}
.nav ul li:hover {
    background: #bee6ff;
    background: linear-gradient(top, #bee6ff 0%, #7dcdff 40%);
    background: -moz-linear-gradient(top, #bee6ff 0%, #ffffff 50%);
    background: -webkit-linear-gradient(top, #bee6ff 0%,#7dcdff 40%);
  }
.nav ul li:hover a {
      color: #363636;

    }

.nav ul li a {
    display: block; padding: 20px 12px;
    color: #ffffff; text-decoration: none;
  }

  .nav ul ul {
  background: #bee6ff;
  background: linear-gradient(top, #bee6ff 0%, #7dcdff 40%);
  background: -moz-linear-gradient(top, #bee6ff 0%, #ffffff 50%);
  background: -webkit-linear-gradient(top, #bee6ff 0%,#7dcdff 40%);

  border-radius: 0px; 
  padding: 0;
  position: absolute; top: 100%;
}
  .nav ul ul li {
    float: none; 
    border-top: 1px solid #6cbdef;
    border-bottom: 1px solid #6cbdef;
    position: relative;
  }
    .nav ul ul li a {
      padding: 15px 10px;
      color: #fff;

    } 
      .nav ul ul li a:hover {
        background: #0075bb;
        color:#FFF;
      }
      .nav ul ul ul {
  position: absolute; left: 100%; top:0;
}

HTML代码如下所示

<div class="container">
            <div class="nav">
                <ul>
                    <li>
                    <a href="#">Home</a></li>
                    <li>
                    <a href="#">Site Settings</a>
                    <ul>
                        <li><a href="meta-tags.php">Add Meta Tags</a></li>
                        <li><a href="page-title.php">Add Page Title</a></li>
                    </ul>
                    </li>
                    <li><a href="#">User Managment</a></li>
                    <li>
                    <a href="#">Upload Images</a>
                    <ul>
                        <li><a href="#">Upload Slider Image</a></li>
                        <li><a href="#">Upload Ads Image</a></li>
                    </ul>
                    </li>
                    <li><a href="#">Content Managment</a></li>
                    <li>
                    <a href="#">Devotees</a>
                    <ul>
                        <li><a href="#">Add Devotee</a></li>
                        <li><a href="#">Edit Devotee</a></li>
                        </ul>
                    </li>
                    <li>
                    <a href="#">News</a>
                    <ul>
                        <li><a href="#">Add News</a></li>
                        <li><a href="#">Edit News</a></li>
                        </ul>
                    </li>
                    <li>
                    <a href="#">Donation</a>
                    <ul>
                        <li><a href="#">View Request</a></li>
                        <li><a href="#">Approve Request</a></li>
                        </ul>
                    </li>
                    <li>
                    <a href="#">Blogs</a>
                    <ul>
                        <li><a href="#">Add Blog</a></li>
                        <li><a href="#">Edit Blog</a></li>
                        </ul>
                    </li>

                </ul>
            </div>
        </div>

Answer 1

这是same

的答案

.nav ul ul {
  width: auto;
}

Answer 2

请检查一次

＆＃13;

body{

  margin: 0;
  padding: 0;
  font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 87.5%;

}

.container{

  width: 70%;
  margin: 0 auto;
  clear: both;
  border:10px solid #0171bd;
}

.nav ul ul {
  display: none;
}

.nav ul li:hover > ul {
    display: block;
}

.nav ul {
  background: #efefef; 
  background: linear-gradient(top, #0077bb 0%, #0171bd 100%);  
  background: -moz-linear-gradient(top, #0077bb 0%, #0171bd 100%); 
  background: -webkit-linear-gradient(top, #0077bb 0%,#0171bd 100%); 
  box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
  padding: 0 20px;
  border-radius: 10px;  
  list-style: none;
  position: relative;

}
#nav > ul{display: table;}
.nav ul:after {
    content: ""; clear: both; display: block;
}

.nav > ul > li {
  display: table-cell;
}
.nav ul li:hover {
    background: #bee6ff;
    background: linear-gradient(top, #bee6ff 0%, #7dcdff 40%);
    background: -moz-linear-gradient(top, #bee6ff 0%, #ffffff 50%);
    background: -webkit-linear-gradient(top, #bee6ff 0%,#7dcdff 40%);
  }
.nav ul li:hover a {
      color: #363636;

    }

.nav ul li a {
    display: block; padding: 20px 12px;
    color: #ffffff; text-decoration: none;
  }

  .nav ul ul {
  background: #bee6ff;
  background: linear-gradient(top, #bee6ff 0%, #7dcdff 40%);
  background: -moz-linear-gradient(top, #bee6ff 0%, #ffffff 50%);
  background: -webkit-linear-gradient(top, #bee6ff 0%,#7dcdff 40%);

  border-radius: 0px; 
  padding: 0;
  position: absolute; top: 100%;
}
  .nav ul ul li {
    float: none; 
    border-top: 1px solid #6cbdef;
    border-bottom: 1px solid #6cbdef;
    position: relative;
  }
    .nav ul ul li a {
      padding: 15px 10px;
      color: #fff;

    } 
      .nav ul ul li a:hover {
        background: #0075bb;
        color:#FFF;
      }
      .nav ul ul ul {
  position: absolute; left: 100%; top:0;
}
@media only screen 
and (max-width : 992px) {
/* Styles */
    .nav ul{
        font-size: 12px;
        padding: 0 5px;
    }
     .nav > ul > li > a{
         padding: 10px 5px !important;
}

＆＃13;

<div class="container">
            <div class="nav">
                <ul>
                    <li>
                    <a href="#">Home</a></li>
                    <li>
                    <a href="#">Site Settings</a>
                    <ul>
                        <li><a href="meta-tags.php">Add Meta Tags</a></li>
                        <li><a href="page-title.php">Add Page Title</a></li>
                    </ul>
                    </li>
                    <li><a href="#">User Managment</a></li>
                    <li>
                    <a href="#">Upload Images</a>
                    <ul>
                        <li><a href="#">Upload Slider Image</a></li>
                        <li><a href="#">Upload Ads Image</a></li>
                    </ul>
                    </li>
                    <li><a href="#">Content Managment</a></li>
                    <li>
                    <a href="#">Devotees</a>
                    <ul>
                        <li><a href="#">Add Devotee</a></li>
                        <li><a href="#">Edit Devotee</a></li>
                        </ul>
                    </li>
                    <li>
                    <a href="#">News</a>
                    <ul>
                        <li><a href="#">Add News</a></li>
                        <li><a href="#">Edit News</a></li>
                        </ul>
                    </li>
                    <li>
                    <a href="#">Donation</a>
                    <ul>
                        <li><a href="#">View Request</a></li>
                        <li><a href="#">Approve Request</a></li>
                        </ul>
                    </li>
                    <li>
                    <a href="#">Blogs</a>
                    <ul>
                        <li><a href="#">Add Blog</a></li>
                        <li><a href="#">Edit Blog</a></li>
                        </ul>
                    </li>

                </ul>
            </div>
        </div>

＆＃13;

您可以使用媒体查询减少较低版本的字体大小。

CSS Drop Down问题

2 个答案: