Javascript 如何更改下拉列表的样式_Javascript_Css_Html

Javascript 如何更改下拉列表的样式

javascript css html

Javascript 如何更改下拉列表的样式,javascript,css,html,Javascript,Css,Html,你好。我有一个一分为二的导航。一个在右边，一个在左边。我想更改右侧下拉列表的位置，以便在此处显示导航的所有内容是我的代码 <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <title>Tanauan L

你好。我有一个一分为二的导航。一个在右边，一个在左边。我想更改右侧下拉列表的位置，以便在此处显示导航的所有内容是我的代码

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Tanauan LGU </title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<header>
    <img src="estate_banner.png" id="logo">
</header>
<nav>
<div id="menu">
  <ul>
    <li><a href="#">item1</a> </li>
    <li><a href="#">item1</a>
         <ul>
           <li><a href="#">item1</a> </li>
           <li><a href="#">item1</a> </li>
           <li><a href="#">item1</a> </li>
         </ul>
    </li>
    <li><a href="#">item1</a> </li>
    <li><a href="#">item1</a>
         <ul>
          <li><a href="#">item1</a> </li>
          <li><a href="#">item1</a> </li>
          <li><a href="#">item1</a> </li>
        </ul>
    </li>
    <li class="last"><a href="#">Welcome Admin</a>
         <ul>
          <li><a href="#">Subitem One</a></li>
          <li><a href="#">Subitem Two</a></li>
          <li><a href="#">Subitem Three</a> </li>
        </ul>      
    </li>
  </ul>
 </div>
</nav>
<body marginheight="0">
</body >
</html>

CSS:
 header{
  height:80px;
  width:100%;
  background: -webkit-linear-gradient(160deg,white, orange); /* For Safari 5.1 to 6.0  */
  background: -o-linear-gradient(180deg,white, orange); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(180deg,white, orange); /* For Firefox 3.6 to 15 */
  background: linear-gradient(180deg,white, orange); /* Standard syntax (must be last) */   }
#logo{margin-top:13px;}
#menu {
  background:#000;
  width:100%;
  height:40px;
  border-radius: 3px;
  float:left;
}
#menu ul ul {
  display: none;
}
#menu ul li:hover > ul {
  display: block;
}
#menu ul {
  padding: 0px;
  border-radius: 5px;
  list-style: none;
  margin:0;
  position: relative;
  display: block;
}
#menu ul:after {
  content:"";
  clear: both;
  display: block;
}
#menu ul li {
  float: left;
}
#menu ul li:hover {
  color:#fff;
}
#menu ul li:hover a {
  background:#fff;
  color: #000;
}
#menu ul li a {
  display: block;
  padding:0 10px;
  color: #FFF;
  text-decoration: none;
  line-height:40px;
}
#menu ul ul {
  background: #fff;
  padding:0;
  position: absolute;
  top: 40px;
  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
}
#menu ul ul li {
  float: none;
  position: relative;
}
#menu ul ul li a {
  padding: 15px 40px;
  color: #fff;
  width:150px;
  height:50px;
}
#menu ul ul li a:hover {
  background: #000;
  color:#fff;
}
 #menu ul li.last {
   float:right;
}

HTML:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Tanauan LGU </title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<header>
    <img src="estate_banner.png" id="logo">
</header>
<nav>
<div id="menu">
  <ul>
    <li><a href="#">item1</a> </li>
    <li><a href="#">item1</a>
         <ul>
           <li><a href="#">item1</a> </li>
           <li><a href="#">item1</a> </li>
           <li><a href="#">item1</a> </li>
         </ul>
    </li>
    <li><a href="#">item1</a> </li>
    <li><a href="#">item1</a>
         <ul>
          <li><a href="#">item1</a> </li>
          <li><a href="#">item1</a> </li>
          <li><a href="#">item1</a> </li>
        </ul>
    </li>
    <li class="last"><a href="#">Welcome Admin</a>
         <ul>
          <li><a href="#">Subitem One</a></li>
          <li><a href="#">Subitem Two</a></li>
          <li><a href="#">Subitem Three</a> </li>
        </ul>      
    </li>
  </ul>
 </div>
</nav>
<body marginheight="0">
</body >
</html>

CSS:
 header{
  height:80px;
  width:100%;
  background: -webkit-linear-gradient(160deg,white, orange); /* For Safari 5.1 to 6.0  */
  background: -o-linear-gradient(180deg,white, orange); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(180deg,white, orange); /* For Firefox 3.6 to 15 */
  background: linear-gradient(180deg,white, orange); /* Standard syntax (must be last) */   }
#logo{margin-top:13px;}
#menu {
  background:#000;
  width:100%;
  height:40px;
  border-radius: 3px;
  float:left;
}
#menu ul ul {
  display: none;
}
#menu ul li:hover > ul {
  display: block;
}
#menu ul {
  padding: 0px;
  border-radius: 5px;
  list-style: none;
  margin:0;
  position: relative;
  display: block;
}
#menu ul:after {
  content:"";
  clear: both;
  display: block;
}
#menu ul li {
  float: left;
}
#menu ul li:hover {
  color:#fff;
}
#menu ul li:hover a {
  background:#fff;
  color: #000;
}
#menu ul li a {
  display: block;
  padding:0 10px;
  color: #FFF;
  text-decoration: none;
  line-height:40px;
}
#menu ul ul {
  background: #fff;
  padding:0;
  position: absolute;
  top: 40px;
  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
}
#menu ul ul li {
  float: none;
  position: relative;
}
#menu ul ul li a {
  padding: 15px 40px;
  color: #fff;
  width:150px;
  height:50px;
}
#menu ul ul li a:hover {
  background: #000;
  color:#fff;
}
 #menu ul li.last {
   float:right;
}


塔纳昂LGU

























CSS:
标题{
高度：80px；
宽度：100%；
背景：-webkit线性梯度（160度，白色，橙色）；/*用于Safari 5.1至6.0*/
背景：-o型线性梯度（180度，白色，橙色）；/*用于Opera 11.1至12.0*/
背景：-moz线性渐变（180度，白色，橙色）；/*适用于Firefox 3.6至15*/
背景：线性渐变（180度，白色，橙色）；/*标准语法（必须是最后一个）*/}
#徽标{页边距顶部：13px；}
#菜单{
背景：#000；
宽度：100%；
高度：40px；
边界半径：3px；
浮动：左；
}
#菜单{
显示：无；
}
#菜单ul li：悬停>ul{
显示：块；
}
#菜单ul{
填充：0px；
边界半径：5px；
列表样式：无；
保证金：0；
位置：相对位置；
显示：块；
}
#菜单ul：之后{
内容：“；
明确：两者皆有；
显示：块；
}
#菜单ulli{
浮动：左；
}
#菜单：悬停{
颜色：#fff；
}
#菜单ul li：将鼠标悬停在a上{
背景：#fff；
颜色：#000；
}
#菜单ulli a{
显示：块；
填充：0 10px；
颜色：#FFF；
文字装饰：无；
线高：40px；
}
#菜单{
背景：#fff；
填充：0；
位置：绝对位置；
顶部：40px；
盒子阴影：0px 0px 9px rgba（0,0,0,0.15）；
}
#菜单ul-li{
浮动：无；
位置：相对位置；
}
#菜单ul li a{
填充：15px 40px；
颜色：#fff；
宽度：150px；
高度：50px；
}
#菜单ul li a：悬停{
背景：#000；
颜色：#fff；
}
#最后的菜单{
浮动：对；
}

更新的小提琴：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Tanauan LGU </title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<header>
    <img src="estate_banner.png" id="logo">
</header>
<nav>
<div id="menu">
  <ul>
    <li><a href="#">item1</a> </li>
    <li><a href="#">item1</a>
         <ul>
           <li><a href="#">item1</a> </li>
           <li><a href="#">item1</a> </li>
           <li><a href="#">item1</a> </li>
         </ul>
    </li>
    <li><a href="#">item1</a> </li>
    <li><a href="#">item1</a>
         <ul>
          <li><a href="#">item1</a> </li>
          <li><a href="#">item1</a> </li>
          <li><a href="#">item1</a> </li>
        </ul>
    </li>
    <li class="last"><a href="#">Welcome Admin</a>
         <ul>
          <li><a href="#">Subitem One</a></li>
          <li><a href="#">Subitem Two</a></li>
          <li><a href="#">Subitem Three</a> </li>
        </ul>      
    </li>
  </ul>
 </div>
</nav>
<body marginheight="0">
</body >
</html>

CSS:
 header{
  height:80px;
  width:100%;
  background: -webkit-linear-gradient(160deg,white, orange); /* For Safari 5.1 to 6.0  */
  background: -o-linear-gradient(180deg,white, orange); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(180deg,white, orange); /* For Firefox 3.6 to 15 */
  background: linear-gradient(180deg,white, orange); /* Standard syntax (must be last) */   }
#logo{margin-top:13px;}
#menu {
  background:#000;
  width:100%;
  height:40px;
  border-radius: 3px;
  float:left;
}
#menu ul ul {
  display: none;
}
#menu ul li:hover > ul {
  display: block;
}
#menu ul {
  padding: 0px;
  border-radius: 5px;
  list-style: none;
  margin:0;
  position: relative;
  display: block;
}
#menu ul:after {
  content:"";
  clear: both;
  display: block;
}
#menu ul li {
  float: left;
}
#menu ul li:hover {
  color:#fff;
}
#menu ul li:hover a {
  background:#fff;
  color: #000;
}
#menu ul li a {
  display: block;
  padding:0 10px;
  color: #FFF;
  text-decoration: none;
  line-height:40px;
}
#menu ul ul {
  background: #fff;
  padding:0;
  position: absolute;
  top: 40px;
  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
}
#menu ul ul li {
  float: none;
  position: relative;
}
#menu ul ul li a {
  padding: 15px 40px;
  color: #fff;
  width:150px;
  height:50px;
}
#menu ul ul li a:hover {
  background: #000;
  color:#fff;
}
 #menu ul li.last {
   float:right;
}

在左侧下拉列表中添加了

left:0

，在右侧下拉列表中添加了

right:0

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Tanauan LGU </title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<header>
    <img src="estate_banner.png" id="logo">
</header>
<nav>
<div id="menu">
  <ul>
    <li><a href="#">item1</a> </li>
    <li><a href="#">item1</a>
         <ul>
           <li><a href="#">item1</a> </li>
           <li><a href="#">item1</a> </li>
           <li><a href="#">item1</a> </li>
         </ul>
    </li>
    <li><a href="#">item1</a> </li>
    <li><a href="#">item1</a>
         <ul>
          <li><a href="#">item1</a> </li>
          <li><a href="#">item1</a> </li>
          <li><a href="#">item1</a> </li>
        </ul>
    </li>
    <li class="last"><a href="#">Welcome Admin</a>
         <ul>
          <li><a href="#">Subitem One</a></li>
          <li><a href="#">Subitem Two</a></li>
          <li><a href="#">Subitem Three</a> </li>
        </ul>      
    </li>
  </ul>
 </div>
</nav>
<body marginheight="0">
</body >
</html>

CSS:
 header{
  height:80px;
  width:100%;
  background: -webkit-linear-gradient(160deg,white, orange); /* For Safari 5.1 to 6.0  */
  background: -o-linear-gradient(180deg,white, orange); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(180deg,white, orange); /* For Firefox 3.6 to 15 */
  background: linear-gradient(180deg,white, orange); /* Standard syntax (must be last) */   }
#logo{margin-top:13px;}
#menu {
  background:#000;
  width:100%;
  height:40px;
  border-radius: 3px;
  float:left;
}
#menu ul ul {
  display: none;
}
#menu ul li:hover > ul {
  display: block;
}
#menu ul {
  padding: 0px;
  border-radius: 5px;
  list-style: none;
  margin:0;
  position: relative;
  display: block;
}
#menu ul:after {
  content:"";
  clear: both;
  display: block;
}
#menu ul li {
  float: left;
}
#menu ul li:hover {
  color:#fff;
}
#menu ul li:hover a {
  background:#fff;
  color: #000;
}
#menu ul li a {
  display: block;
  padding:0 10px;
  color: #FFF;
  text-decoration: none;
  line-height:40px;
}
#menu ul ul {
  background: #fff;
  padding:0;
  position: absolute;
  top: 40px;
  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
}
#menu ul ul li {
  float: none;
  position: relative;
}
#menu ul ul li a {
  padding: 15px 40px;
  color: #fff;
  width:150px;
  height:50px;
}
#menu ul ul li a:hover {
  background: #000;
  color:#fff;
}
 #menu ul li.last {
   float:right;
}

HTML:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Tanauan LGU </title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<header>
    <img src="estate_banner.png" id="logo">
</header>
<nav>
<div id="menu">
  <ul>
    <li><a href="#">item1</a> </li>
    <li><a href="#">item1</a>
         <ul>
           <li><a href="#">item1</a> </li>
           <li><a href="#">item1</a> </li>
           <li><a href="#">item1</a> </li>
         </ul>
    </li>
    <li><a href="#">item1</a> </li>
    <li><a href="#">item1</a>
         <ul>
          <li><a href="#">item1</a> </li>
          <li><a href="#">item1</a> </li>
          <li><a href="#">item1</a> </li>
        </ul>
    </li>
    <li class="last"><a href="#">Welcome Admin</a>
         <ul>
          <li><a href="#">Subitem One</a></li>
          <li><a href="#">Subitem Two</a></li>
          <li><a href="#">Subitem Three</a> </li>
        </ul>      
    </li>
  </ul>
 </div>
</nav>
<body marginheight="0">
</body >
</html>

CSS:
 header{
  height:80px;
  width:100%;
  background: -webkit-linear-gradient(160deg,white, orange); /* For Safari 5.1 to 6.0  */
  background: -o-linear-gradient(180deg,white, orange); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(180deg,white, orange); /* For Firefox 3.6 to 15 */
  background: linear-gradient(180deg,white, orange); /* Standard syntax (must be last) */   }
#logo{margin-top:13px;}
#menu {
  background:#000;
  width:100%;
  height:40px;
  border-radius: 3px;
  float:left;
}
#menu ul ul {
  display: none;
}
#menu ul li:hover > ul {
  display: block;
}
#menu ul {
  padding: 0px;
  border-radius: 5px;
  list-style: none;
  margin:0;
  position: relative;
  display: block;
}
#menu ul:after {
  content:"";
  clear: both;
  display: block;
}
#menu ul li {
  float: left;
}
#menu ul li:hover {
  color:#fff;
}
#menu ul li:hover a {
  background:#fff;
  color: #000;
}
#menu ul li a {
  display: block;
  padding:0 10px;
  color: #FFF;
  text-decoration: none;
  line-height:40px;
}
#menu ul ul {
  background: #fff;
  padding:0;
  position: absolute;
  top: 40px;
  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
}
#menu ul ul li {
  float: none;
  position: relative;
}
#menu ul ul li a {
  padding: 15px 40px;
  color: #fff;
  width:150px;
  height:50px;
}
#menu ul ul li a:hover {
  background: #000;
  color:#fff;
}
 #menu ul li.last {
   float:right;
}

在开始正文标记之前有一个关闭的导航标记。请解决这个问题，以便我们知道开始导航标签应该在哪里。