Avatar of doctorbill
doctorbill
Flag for United Kingdom of Great Britain and Northern Ireland asked on

css and php menu

I am using the lavalamp css menu on one of my sites

It uses  the <li> and <ul> tags

The problem is as follows:

The menu is working perfectly well at the moment but I am trying to introduce a sub-list into one area (Bold Italic below):

Menu php code:

<li><a href="">Support</a>
                <ul class="subs">
                    <li><a href="SupportTickets.php">Tickets</a></li>                     <li><a href="searchindexSupportTickets.php">Search:Tickets</a></li>                     <li><a href="searchindexSupportTicketsEdits.php">Search:TicketsEdits</a></li>                     <li><a href="searchindexSupportTicketsStatus.php">Search:TicketsStatus</a></li>                     <li><a href="TicketStatus_AllStatusSearch.php">Monitor</a></li>                     <li><a href="AllMetrics.php">Ticket Metrics</a></li>                <li><a href="">N Central</a></li>                <li><a href="">N Central Reports CSV Import</a><ul>
      <li>Sub Site 1</li>
      <li>Sub Site 2</li>
    </ul
</li>       
  </ul>                

Open in new window

The "N Central Reports CSV Import" shows up perfectly well but the sub-sites do not show at all

Below is the CSS:

#nav,#nav ul {
    list-style: none outside none;
    margin: 0;     padding: 0; } #nav {     background: url('menu_bg.png') no-repeat scroll 0 0 transparent;     clear: both;     font-size: 10px;     height: 58px;     padding: 0 0 0 9px;     position: relative;     width: 957px; } #nav ul {     background-color: #222;     border:1px solid #222;     border-radius: 0 5px 5px 5px;     border-width: 0 1px 1px;     box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);     left: -9999px;     overflow: hidden;     position: absolute;     top: -9999px;     z-index: 2;     -moz-transform: scaleY(0);     -ms-transform: scaleY(0);     -o-transform: scaleY(0);     -webkit-transform: scaleY(0);     transform: scaleY(0);     /*-moz-transform-origin: 0 0;     -ms-transform-origin: 0 0;     -o-transform-origin: 0 0;     -webkit-transform-origin: 0 0;     transform-origin: 0 0;     -moz-transition: -moz-transform 0.1s linear;     -ms-transition: -ms-transform 0.1s linear;     -o-transition: -o-transform 0.1s linear;     -webkit-transition: -webkit-transform 0.1s linear;     transition: transform 0.1s linear;*/ } #nav li {     background: url('menu_line.png') no-repeat scroll right 5px transparent;     float: left;     position: relative; } #nav li a {     color: #FFFFFF;     display: block;     float: left;     font-weight: normal;     height:30px;     padding: 23px 20px 0;     position: relative;     text-decoration: none;     text-shadow: 1px 1px 1px #000000; } #nav li:hover > a {     color: #00B4FF; } #nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {     background: none repeat scroll 0 0 #121212;     outline: 0 none; } #nav li:hover ul.subs {     left: 0;     top: 53px;     width: 180px;     -moz-transform: scaleY(1);     -ms-transform: scaleY(1);     -o-transform: scaleY(1);     -webkit-transform: scaleY(1);     transform: scaleY(1); } #nav ul li {     background: none;     width: 100%; } #nav ul li a {     float: none; } #nav ul li:hover > a {     background-color: #121212;     color: #00B4FF; } #lavalamp {     background: url('lavalamp.png') no-repeat scroll 0 0 transparent;     height: 16px;     left: 13px;     position: absolute;     top: 0px;     width: 64px;     -moz-transition: all 300ms ease;     -ms-transition: all 300ms ease;     -o-transition: all 300ms ease;     -webkit-transition: all 300ms ease;     transition: all 300ms ease; } #lavalamp:hover {     -moz-transition-duration: 3000s;     -ms-transition-duration: 3000s;     -o-transition-duration: 3000s;     -webkit-transition-duration: 3000s;     transition-duration: 3000s; } #nav li:nth-of-type(1):hover ~ #lavalamp {     left: 13px; } #nav li:nth-of-type(2):hover ~ #lavalamp {     left: 80px; } #nav li:nth-of-type(3):hover ~ #lavalamp {     left: 150px; } #nav li:nth-of-type(4):hover ~ #lavalamp {     left: 225px; } #nav li:nth-of-type(5):hover ~ #lavalamp {     left: 310px; } #nav li:nth-of-type(6):hover ~ #lavalamp {     left: 380px; } #nav li:nth-of-type(7):hover ~ #lavalamp {     left: 450px; } #nav li:nth-of-type(8):hover ~ #lavalamp {     left: 540px; }

Open in new window

Any ideas please?

CSSPHP

Avatar of undefined
Last Comment
doctorbill

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Scott Fell

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
doctorbill

ASKER
Thanks so much for the prompt reply
Your help has saved me hundreds of hours of internet surfing.
fblack61