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

Question

I have two separate working 'objects'

A menu bar, working entirely in CSS. See it working here: http://jsbin.com/EMEraZu/1/edit?html,css,js,output

And I have a fancy CSS/Java slideshow here: http://jsbin.com/ijUW/1/edit?html,css,js,output

These work perfectly until I try to combine them together on one page, where upon the CSS mucks up.Now, every thumbnail on the slideshow is a list item (li) element, in my novice opinion, this is conflicting with the UL and LI elements in the menu bar. Is this the problem? I tried fixing it by creating a div tag for the menubar. But I've had no luck. Any suggestions?

I've copied the CSS and HTML below

 #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>

//* Above was Menubar code, it somehow conflicts with the gallery code, below,

#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>

Any ideas at all would be appreciated on why they are clashing.

Answer 1

i think your gallery css needs to be more specific to which elements to style, like you have done with the menu css by adding parents id. as there is no id with gallery css, its going to effect all li elements