html - 使用多个无序 (UL) 列表和列表项 CSS/HTML

Question

我有两个独立的工作“对象”

一个菜单栏，完全在 CSS 中工作。 看到它在这里工作:http://jsbin.com/EMEraZu/1/edit?html,css,js,output

我这里有一个漂亮的 CSS/Java 幻灯片:http://jsbin.com/ijUW/1/edit?html,css,js,output

这些工作完美，直到我尝试将它们组合在一个页面上，CSS 搞砸了。现在，幻灯片上的每个缩略图都是一个列表项 (li) 元素，在我的新手看来，这与菜单栏中的 UL 和 LI 元素。这是问题吗？我尝试通过为菜单栏创建一个 div 标签来修复它。但我没有运气。有什么建议么？

我已经复制了下面的 CSS 和 HTML

 #menubar ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
#menubar ul li {
  font: 18px;
  font-family: latolight;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
#menubar ul li:hover {
    background: #555;
    color: #fff;
    font-family: latolight;
}
#menubar ul li ul {
  padding: 0;
  position: absolute;
  top: 43px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
#menubar ul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
#menubar ul li ul li:hover { background: #666; }

#menubar ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

<div id="menubar">
<ul>
  <li>Home</li>
  <li>Title
  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul></li>
  <li>
    Title2
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </li>
</ul>
</div>

//* 上面是菜单栏代码，它不知何故与下面的图库代码冲突，

#gallery{

    /* CSS3 Box Shadow */
    -moz-box-shadow:0 0 3px #AAAAAA;
    -webkit-box-shadow:0 0 3px #AAAAAA;
    box-shadow:0 0 3px #AAAAAA;

    /* CSS3 Rounded Corners */

    -moz-border-radius-bottomleft:4px;
    -webkit-border-bottom-left-radius:4px;
    border-bottom-left-radius:4px;

    -moz-border-radius-bottomright:4px;
    -webkit-border-bottom-right-radius:4px;
    border-bottom-right-radius:4px;

    border:1px solid white;

    background:url(img/panel.jpg) repeat-x bottom center #ffffff;

    /* The width */
    width:920px;
    overflow:hidden;
}

#slides{

    height:400px;

    /* jQuery willchange the width later on to the sum of the widths of all the slides. */
    width:920px;
    overflow:hidden;
}

.slide{
    float:left;
}

#menu{
    /* container for the thumbnails */
    height:90px;
}


li{
    /* Every thumbnail is a li element */
    width:120px;
    display:inline-block;
    list-style:none;
    height:90px;
    overflow:hidden;
}

li.inact:hover{
    /* The inactive state, highlighted on mouse over */
    background:url(img/pic_bg.png) repeat;
}

li.act,li.act:hover{
    /* The active state of the thumb */
    background:url(img/active_bg.png) no-repeat;
}

.fbar{
    /* The left-most vertical bar */
    width:2px;
    background:url(img/divider.png) no-repeat right;
}

li a{
    display:block;
    background:url(img/divider.png) no-repeat right;
    height:70px;
    padding-top:10px;
}

a img{
    border:none;
}

<div id="main">




  <div id="gallery">

    <div id="slides">

    <div class="slide"><a href="www.google.com"><img src="img/sample_slides/1.jpg" width="920" height="400" alt="side" /></a></div>
    <div class="slide"><a href="www.google.com"><img src="img/sample_slides/2.jpg" width="920" height="400" alt="side" /></a></div>
    <div class="slide"><a href="www.google.com"><img src="img/sample_slides/3.jpg" width="920" height="400" alt="side" /></a></div>
    <div class="slide"><a href="www.google.com" target="_blank"><img src="img/sample_slides/4.jpg" width="920" height="400" alt="side" /></a></div>

    </div>

    <div id="menu">

    <ul>
        <li class="fbar">&nbsp;</li><li class="menuItem"><a href=""><img src="img/thumb_1.png" alt="thumbnail" width="85" /></a></li><li class="menuItem"><a href=""><img src="img/thumb_2.png" alt="thumbnail" width="85" /></a></li><li class="menuItem"><a href=""><img src="img/thumb_3.png" alt="thumbnail" width="85" /></a></li><li class="menuItem"><a href=""><img src="img/thumb_4.png" alt="thumbnail" width="85" /></a></li>
    </ul>


    </div>

  </div>

</div>
</body>
</html>

任何关于它们为何发生冲突的想法都将不胜感激。

Answer 1

我认为您的画廊 CSS 需要更具体地针对要设置样式的元素，就像您通过添加父 ID 对菜单 CSS 所做的那样。由于 gallery css 没有 id，它会影响所有 li 元素