Question

有人可以帮助我使用顶部导航栏。我试图制作一个下降3级的下拉菜单。我已经有2个级别，而我的第三级已经搞砸了。我尝试以与2级相同的方式进行，但它不起作用。谢谢！

CSS的一部分：

     class func addNewAddressToProfile(_ values:String , completionHandler:@escaping (_ result:NSDictionary)->())
     {
        DispatchQueue.global(qos: DispatchQoS.QoSClass.userInitiated).async {

        let result = DownloadManager.downloadDataFromServer(NSString(format:"%@", values) as String, urlString: "https://abc.php") as NSDictionary

        DispatchQueue.main.async {
            completionHandler(result)
        }
       }
     }

    class func getProfileInformation(_ userID:String , completionHandler:@escaping (_ result:NSDictionary)->())
    {
        DispatchQueue.global(qos: DispatchQoS.QoSClass.userInitiated).async {

        let url = NSString(format: "https://www.zabrabox.com/api.php?rquest=get_customer_address&customer_id=%@",userID)
        let result = DownloadManager.downloadDataFromServerGetMethod(url as String) as NSDictionary
        DispatchQueue.main.async {
            completionHandler(result)
        }
       }
      }

Answer 1

根据我的经验：

<h3>标签应该只能直接包裹在文本周围或者可能是跨度。
您的<img>上有内联样式，您可以将其移至topNav.css
您的内容应该在正文中，包括<h1>
您应该只将<li>放在<ul>内，您可以将其他内容放入<li>
尽量不要使用<a href="#">来保存非链接内容
Float是一种完全有效的做事方式，但如果你学习了flexbox，它会更合乎逻辑，更强大，产生更整洁的结果，并在所有设备上做出更好的响应。

良好的CSS技巧是干净的HTML。

试试这个：https://jsbin.com/wahegoc/2/edit?html,css,output

Answer 2

这是您的解决方案，如果有效，请告诉我。

.topnav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  z-index: 10;
}

.topmenu {
  float: left;
  font-family: 'Lato', sans-serif;
}

.topmenu a {
  display: block;
  color: #424242;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #c0b283;
  color: white;
}

.dropdown:hover .dropbtn {
  background-color: #c0b283;
}

li.dropdown {
  display: inline-block;
  text-align: left;
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0px;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 10;
}
.dropdown-content .dropdown-content {
  left: 100%;
 position: absolute;
  top: 0;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content:hover {
  background-color: #f1f1f1
}

.dropdown:hover > .dropdown-content {
  display: block;
}
.dropdown > .dropdown-content a:hover +  .dropdown-content {
  display: block;
}
.content{
  margin-top:75px;
}

检查jsbin：https://jsbin.com/sefikaqiyo/edit?html,css,js,output

请悬停：内容然后悬停国家/地区示例

Answer 3

尝试使用div absolute定位的第三级：

top: 0;
left: 100%;

这将导致第三个菜单出现在第二个菜单的当前悬停元素的右侧。

以下是代码中的样子 - https://jsbin.com/cizoxagubu/1/edit?html,css,output

顶部水平导航栏，具有3级层次结构

3 个答案: