使用多個無序（UL）列表和列表項CSS/HTML

一個菜單欄，完全在CSS中工作。看到它在這裏工作：http://jsbin.com/EMEraZu/1/edit?html,css,js,output

而且我在這裏有一個奇特的CSS/Java的幻燈片：http://jsbin.com/ijUW/1/edit?html,css,js,output

這些工作完全直到我試圖把它們一個頁面，在CSS的渣土up.Now上結合在一起，幻燈片上的每個縮略圖都是一個列表項（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>

任何想法都將不勝感激爲什麼他們衝突。

來源

2013-08-22 Tomi

你在CSS中以'ul'，'li'的形式處理列表。這些屬性將應用於頁面上的所有'ul'和'li'元素。爲他們提供ID或類（如果它們出現多次）以標識它們獨有的屬性。 –

我認爲你的畫廊CSS需要更具體到哪些元素風格，就像你已經通過添加父母身份證與菜單CSS一樣。因爲沒有圖庫CSS的id，它將影響所有li元素

來源

2013-08-22 16:09:23

使用多個無序（UL）列表和列表項CSS/HTML

回答

相關問題