Question

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

Here是目前菜单的截图。

相关HTML代码：

＆＃13;

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!!*/
}

＆＃13;

<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>

＆＃13;

如您所见，存在一些问题。首先，子菜单显示在其父菜单的右侧。我尝试更改与菜单相关的所有内容的位置属性，似乎没有任何效果。设置li：hover ul to relative会导致一些非常错误的事情开始发生;菜单出现在错误的地方，并迅速跳到屏幕上。

其次，子菜单彼此重叠。我尝试过更改高度和显示属性无济于事。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

当我将.aslider的display属性更改为inline-block时，就开始出现此问题，为了使其正确居中，我需要这样做。这个问题可能就在那里，但我尝试过改变一些事情并找不到任何解决方案。

第四，我需要将所有导航菜单和子菜单的宽度设置为相等。是的，我是一个完美主义者，这让我烦恼:(我已经尝试在css的不同部分添加宽度属性，但无法找到任何有用的东西。我不知道在哪里添加width属性，或者即使我应该使用它。

我们，好的。这一切都是现在。我会有任何可以帮助我的人的宝宝。我已经玩弄了几天试图解决这些问题并且已经无处可去了！

对超长的帖子感到抱歉。

// EDIT 这是该页面的整个CSS：

＆＃13;

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!!*/
}

＆＃13;

Answer 1

为top

left

li:hover ul

将margin-top添加到#drop-nav li ul li
我在小提琴中看不到这样的问题
将width添加到ul li

注意 - 您还没有将所有css放在此处，因此您应该根据需要添加适当的属性值。这就是为什么我没有提到上述答案中的任何具体价值。

检查我的fiddle

Answer 2

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

添加

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

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

编辑：宽度：自动是必需的，因为你给你的宽度为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;
   }

在CSS中格式化下拉菜单的多个问题

2 个答案: