Link to home
Start Free TrialLog in
Avatar of doctorbill
doctorbillFlag 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>
</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?

Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of doctorbill


Thanks so much for the prompt reply