Avatar of 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>

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?


Avatar of undefined
Last Comment

8/22/2022 - Mon
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
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

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