Question

美好的一天。我的导航分为两部分。一个在右边，一个在左边。我想更改右侧下拉列表的位置，以便导航器的所有内容都显示在我的代码中

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

Answer 1

更新了小提琴：http://jsfiddle.net/lotusgodkk/GCu2D/113/

在左下拉列表中添加了left:0，在右下拉列表中添加了right:0。

HTML：

<header>
 <img src="estate_banner.png" id="logo" />
</header>
<nav>
 <div id="menu">
    <ul class="leftul">
        <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 class="rightul">
                <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>

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);
}
.rightul {
  right:0;
 }
.leftul>ul {
  left:0;
}
#menu ul ul li {
  float: none;
  position: relative;
}
#menu ul ul li a {
 padding: 15px 40px;
 color: #fff;
 width:150px;
 heigh:50px;
}
#menu ul ul li a:hover {
 background: #000;
 color:#fff;
}
#menu ul li.last {
 float:right;
}

如何改变下拉列表的样式

1 个答案: