格式化CSS中的下拉菜单时出现多个问题

关于使用HTML和CSS制作下拉菜单样式的多个问题：

下面是菜单当前的屏幕截图。

相关HTML代码：

ul {
  list-style: none;
  /*padding: 0px;
	margin: 0px; these do nothing*/
  width: 500px;
  margin: auto;
}
ul li {
  display: block;
  position: relative;
  float: left;
}
li ul {
  display: none;
}
ul li a {
  /*display: inline;*/
  background: #636363;
  padding: 5px 10px 5px 10px;
  white-space: nowrap;
}
ul li a:hover {
  background: #383838;
}
li:hover ul {
  display: block;
  position: absolute;
}
li:hover li {
  float: none;
}
/*li:hover a {
	background: #636363;
	} this does nothing!*/
li:hover li a:hover {
  background: #383838;
}
#drop-nav li ul li {
  border-top: 5px;
  /*this does nothing!!*/
}

<nav>
  <ul id="drop-nav">
    <li><a href="index.html">Home</a>
    </li>
    <li><a href="about.html">About</a>
      <ul>
        <li><a href="best.html">Best</a>
        </li>
        <li><a href="process.html">Process</a>
        </li>
      </ul>
    </li>
    <li><a href="upcoming.html">Upcoming</a>
      <ul>
        <li><a href="winter.html">Winter 2014</a>
        </li>
        <li><a href="spring.html">Spring 2015</a>
        </li>
        <li><a href="summer.html">Summer 2015</a>
        </li>
        <li><a href="fall.html">Fall 2015</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

正如你所看到的，有一些问题。首先，子菜单显示在其父菜单的右侧。我尝试过更改与菜单相关的所有内容的位置属性，但似乎都不起作用。将li:hover ul设置为relative会导致一些非常bug的事情开始发生；菜单仍然出现在错误的位置，并在屏幕上快速跳转。

其次，子菜单相互重叠。我尝试过更改高度和显示属性，但没有成功。

第三，子菜单隐藏在图像库下。我不知道为什么。以下是与图片库相关的所有代码：

.aslider {
  margin: auto;
  width: 550px;
  display: inline-block;
  height: 300px;
  top: 15px;
}

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="a-slider/aslider.js"></script>
</head>
<!--skip irrelevant code-->
<div class="aslider" data-hide-controls>
  <div class="aslide" data-duration="5">
    <img src="images/pic1.jpg" width="550px" height="300px">
    <!--placeholder-->
  </div>
  <div class="aslide" data-duration="5">
    <img src="images/pic2.jpg" width="550px" height="300px">
    <!--placeholder-->
  </div>
</div>

当我将.aslider的显示属性更改为内联块时，这个问题就开始了，我需要这样做才能使它正确居中。问题可能就在那里，但我试着改变了一些事情，但没有找到任何解决方案。

第四，我需要将所有导航菜单和子菜单的宽度设置为相等。是的，我是一个完美主义者，这让我很恼火：（我试着在css的不同部分添加width属性，但找不到任何有效的东西。我不确定在哪里添加width特性，甚至不确定我是否应该使用它。

好吧，现在就到此为止。我会有任何能帮助我的人的孩子。我已经玩了好几天了，想弄清楚这些，但哪儿也没去！

抱歉发了这么长的帖子。

//编辑以下是页面的整个css：

html {
  background-image: url(images/background.jpg);
  background-attachment: fixed;
  color: #2ae926;
  font-size: 20px;
  font-family: sans-serif;
}
#banner {
  text-align: center;
}
#currentpage {
  text-align: center;
  padding-bottom: 10px;
}
a {
  color: #2ae926;
  text-decoration: none;
}
nav {
  height: 60px;
  font-family: source code pro black;
  text-align: center;
  font-size: 35px;
  background-color: #636363;
  width: 70%;
  border-radius: 10px;
  margin: auto;
  padding-top: 15px;
  margin-bottom: 20px;
}
nav a {
  border-style: outset;
  border-color: #424242;
  border-radius: 10px;
  color: #2ae926;
}
nav a:hover {
  border-style: inset;
}
nav li {
  padding-left: 10px;
  padding-right: 10px;
}
#b1 {
  background-color: #636363;
  width: 70%;
  margin: auto;
  text-align: center;
  margin-bottom: 25px;
  border-radius: 10px;
  height: 500px;
}
h1 {
  font-family: source code pro black;
  font-size: 35px;
}
#b2text {
  width: 90%;
  margin: auto;
  position: relative;
}
.aslider {
  margin: auto;
  width: 550px;
  display: inline-block;
  height: 300px;
  top: 15px;
}
/*#gumi {
	float: left;
	margin-left: 7.5%;
	margin-top: 10%;
	}*/
/* this puts the image where it needs to go but
								moves everything else to the right. fix!! */
footer {
  text-align: center;
  margin-top: 30px;
  background-color: #636363;
  width: 70%;
  border-radius: 10px;
  margin: auto;
  height: 25px;
  font-size: 15px;
}
footer a:hover {
  text-decoration: underline
}
pre {
  padding-top: 3px;
}
ul {
  list-style: none;
  /*padding: 0px;
	margin: 0px; these do nothing*/
  width: 500px;
  margin: auto;
}
ul li {
  display: block;
  position: relative;
  float: left;
}
li ul {
  display: none;
  padding-left: 0px;
  width: auto;
}
ul li a {
  display: inline-block;
  background: #636363;
  padding: 5px 10px 5px 10px;
  white-space: nowrap;
  width: 110px;
}
ul li a:hover {
  background: #383838;
}
li:hover ul {
  display: block;
  position: absolute;
  /*absolute*/
}
li:hover li {
  float: none;
}
/*li:hover a {
	background: #636363;
	}*/
li:hover li a:hover {
  background: #383838;
}
#drop-nav li ul li {
  border-top: 5px;
  /*this does nothing!!*/
}

http://fiddle.jshell.net/d2brbL2x/5/

添加

li ul {
    padding-left: 0;
    width: auto;
}

到您的代码。这是必要的，因为"ul"有一个标准的左填充值，这会导致子菜单显示在其父菜单的右侧。

编辑：宽度：auto是需要的，因为你给uls的宽度是500px，但我想你不想在子菜单中使用这个。

ul li a {
  display: inline-block;
  width: 90px;
}

使用此选项可以使所有子菜单的大小相同。您需要根据您的字体等调整宽度值。

请看一下小提琴，告诉我这是不是你想要的。

编辑：这里是调整后的代码：

   ul {
       width: 100%;
   }
   ul li a {
       width: 150px;
   }

   li ul {
       padding-left: 0;
       width: auto;
   }
   ul li ul li {
       padding-left: 0;
       padding-right: 0;
   }
   ul li ul li a {
     display: inline-block;
     width: 200px;
   }

为li:hover ul添加top和left定位
将margin-top添加到#drop-nav li ul li
我不认为我的小提琴有这样的问题
将width添加到ul li

注意-您还没有把所有的css都放在这里，所以您应该根据需要添加适当的属性值。这就是为什么我在上面的回答中没有提到任何具体的值。

检查我的小提琴

相关内容

最新更新

热门标签：