Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Your CSS is in a real mess I removed some of unnecessary things from there which caused the issues. </p> <p>your <strong>drop.css</strong>:</p> <pre> #nav { height: 39px; margin: 0; width: auto; } .mainmenu { background: url("../index_files/menu.jpg") repeat scroll 0 0 transparent; height: 39px; line-height: 30px; margin: 0; padding: 0; position: relative; width: 1024px; } #nav ul li, #nav ul li a { display: block; height: 39px; } #nav li { float: left; list-style: none outside none; margin: 0; padding: 0; position: relative; } #nav ul li ul { background-color: #F2EAD5; box-shadow: 3px 3px 3px #CC8930; color: #2A8AC6; float: none; font-family: "Arial"; font-size: 19px; margin-top: 8px; opacity: 0.9; text-align: center; } body.index #nav ul li.menu1 { width: 118px; } body.index #nav ul li.menu2 { width: 212px; } body.index #nav ul li.menu3 { width: 161px; } body.index #nav ul li.menu4 { width: 174px; } body.index #nav ul li.menu5 { width: 193px; } body.index #nav ul li.menu6 { width: 166px; } body.community #nav ul li ul { background-color: #AECEAB; } body.kids #container #nav ul li ul { background-color: #89BAB7; opacity: 0.8; } body.market #nav ul li ul { background-color: #FFD0CE; } body.sundays #nav ul li ul { background-color: #E7DAB2; } body.index #nav ul li ul { background-color: #E7DAB2; } body.contacts #nav ul li ul { background-color: #E7DAB2; } #nav ul li ul li a:link { text-decoration: none; } div#container div#nav div#specefic ul li ul#sundays li { width: 211px !important; } div#container div#nav div#specefic ul li ul#market li { width: 161px !important; } div#container div#nav div#specefic ul li ul#kids li { width: 174px !important; } div#container div#nav div#speceficul li ul#community li { width: 193px !important; } #nav ul ul { position: absolute; top: 30px; visibility: hidden; } #nav ul li:hover ul { visibility: visible; z-index: 9999; } #nav li:hover { opacity: 1; } #nav ul li:hover ul li a:hover { opacity: 1; } .clearFloat { clear: both; margin: 0; padding: 0; } #nav #holder ul li { display: inline; } </pre> <p>also in your html change the first <ul> to thats the class which I added so it doesn't clash with the sub menu (thats why you could see the menu image in there).</p> <p>Hope it helps</p> <p><strong>EXAMPLE 2</strong> to use images in <li></li>, don't put any image in </ul> and use this code... NB! this is only a sample!</p> <pre> .menu1 { background-position: 0 0; } .menu2 { background-position: 0 -16px; } .menu3 { background-position: 0 -32px; } .menu4 { background-position: 0 -49px; } .menu5 { background-position: 0 -64px; } .menu, .menu2, .menu3, .menu4, .menu5 { background-image: url("images/menuiconset.png"); background-repeat: no-repeat; height: 16px; width: 180px; } </pre> <p>if all buttons are the same size .. put height and width in .menuX if buttons are different size</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload