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元素

使用多个无序（UL）列表和列表项CSS / HTML

1 个答案: