时间戳

首页 > 解决方案 > 下拉菜单添加混乱

html - 下拉菜单添加混乱

问题描述

我正用头撞墙，试图将下拉菜单添加到现有菜单栏，并且似乎无法在不搞砸现有菜单的情况下使其正确排列，任何人都可以在我的菜单中添加一个下拉菜单，所以我可以看到我错过了什么？我相信我没有得到这个位置：绝对/相对正确或者可能是填充？

这是我的代码：

html {
    display: table;
    margin: auto;
    text-align: center;
}

body {
    display: table-cell;
    vertical-align: middle;
    max-width: max-content;
    margin: auto;
}
td {
    background-color: #FFF;
    border:1px solid black;
    padding: 5px;
}
table {
    background-color: #FFF;
    width: 100%;
    border-collapse: collapse;
}
h1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

hr {
    border: none;
    border-top: 1px solid #CCCCCC;
    height: 1px;
    margin-bottom: 25px;
}
#styletwo {
    position: relative;
    display: block;
    height: 24px;
    font-size: 11px;
    font-weight: bold;
    background: transparent url(bgOFF.gif) repeat-x top left;
    font-family: Arial,Verdana,Helvitica,sans-serif;
    width: 715px;
}

#styletwo ul {
    position: absolute;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    width: 715px;
}

#styletwo ul li {
     display: block;
     float: left;
     margin: 0 1px 0 0;
}

#styletwo ul li a {
     display: block;
     float: left;
     color: #000;
     text-decoration: none;
     padding: 6px 20px 0 20px;
     height: 24px;
}

#styletwo ul li a:hover, #styletwo ul li a.current {
     color: #fff;
     background: transparent url(bgON.gif) repeat-x top left;
}
.center {
    margin: auto;
    width: 60%;
    padding: 10px;
}
input[type=text] {
    width: 100%;
#    padding: 12px 20px;
#    margin: 8px 0;
    box-sizing: border-box;
}
input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<title>Title </title> 
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
</head>
<body align = "center"> 
<a href='index.php'> <img src='images/simplesmdrlogo.jpg'>  </a>
<div id="menucase" align="center">
  <div id="styletwo">
    <ul>
      <li><a href='results.php'>Search All</a></li>
      <li><a href='user.php'>Extensions</a></li>
      <li><a href='accountcodelist.php'>Account Codes</a></li>
      <li><a href='trunk.php'>Trunks</a></li>
      <li><a href='pbx.php'>PBX Configuration</a></li>
      <li><a href='#'>Help </a>
    </ul>
  </div>
</div>

标签： htmlcssmenudropdown

解决方案

想通了，没有将我创建的新下拉类放在正确的条目中。

推荐阅读