| csrocker101 |
Aug 30th, 2007 1:33 PM |
Help with drop down menu, suckerfish, .css file
Hey everybody. I am relatively new to ASP but I am having a slight problem. I am making a site that sells Hookah. I have a hot link that has a picture and when you scroll over the picture, a drop down menu comes up with all the available choices for hookah. The links work fine but they are not formatted correctly. For instance when I scroll over the picture that says Hookah..the list comes up but looks like this:
"Traditional HookahExotic Hookah,
Modern Hookah,
Double Hose Hookah, etc"
There's more choices but I want to have the list inline. For example:
"Traditional Hookah
Exotic Hookah
Modern Hookah
Double Hose Hookah
etc
Here's my css code for the lists:
:
ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
z-index: 20;
}
li.level1 {
/* first level list items */
float: left;
position: relative;
display: table;
background: no-repeat right
center;
font-size: .8em;
padding-top: 5px;
width: 20%;
margin-bottom: 10px;
}
li.ListDivider { /* first level list item divider */
float: left;
position: relative;
display: table;
margin-right: 10px;
z-index: 200;
}
li ul { /* second level lists */
display: none;
position: absolute;
top: 1.2em;
left: 0;
background-color: #4d1083;
padding: 3px;
padding-top: 6px;
border-bottom: solid 1px #8c6ea7;
/*min-width:5em; width:auto !important;width:5em; Min-width hack*/
z-index: 200;
}
li.level2 { /* second level list items */
position: relative;
width: auto;
/*changed z-index: 200;*/
}
li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}
li:hover ul, li.over ul { /* lists nested under hovered list items */
display: inline;
}
Here is my Main.master file
:
<ul id="ctl00_MainMenu1_nav" class="style6"><li class="level1"><a class="MenuLink"><center>
<img alt="Hookahs" src="images/NavLinks/Hookaslinksv3.png" width="150" height="70" /></center></a><ul><li class="level2">
<a class="MenuLink" href="http://www.bluesmokehookah.com/Collection.aspx?id=58">
All Hookahs</a></li><li class="level2">
<a class="MenuLink" href="http://www.bluesmokehookah.com/Collection.aspx?id=7">
Exotic Hookahs</a></li><li class="level2">
<a class="MenuLink" href="http://www.bluesmokehookah.com/Collection.aspx?id=6">
<Modern Hookahs</a></li><li class="level2">
<a class="MenuLink" href="http://www.bluesmokehookah.com/Collection.aspx?id=10">
Traditional Hookahs</a></li><li class="level2">
<a class="MenuLink" href="http://www.bluesmokehookah.com/Collection.aspx?id=40">
Single Hose Hookahs</a></li><li class="level2">
<a class="MenuLink" href="http://www.bluesmokehookah.com/Collection.aspx?id=42">
Double Hose Hookahs</a></li><li class="level2">
<a class="MenuLink" href="http://www.bluesmokehookah.com/Collection.aspx?id=41">
Three and Four Hose Hookahs</a></li><li class="level2">
<a class="MenuLink" href="http://www.bluesmokehookah.com/Collection.aspx?id=63">
Rotating Hookahs</a></li></ul></li><li class="level1"><a class="MenuLink">
I've tried EVERYTHING and can't get it to format correctly! Any suggestions on how to fix this?? |
