1 reply [Last post]
plotan
plotan's picture
Offline
newbie
Sweden
Last seen: 8 years 25 weeks ago
Sweden
Timezone: GMT+1
Joined: 2014-02-11
Posts: 1
Points: 2

Hi,

I´m trying to get the menu option from the code below to show a preselected menu option 'Menu List 2:1' when the page is loaded to show current page.
How do I do that?
Been trying for several hours now and want to but this behibd me.

THX

Mattias

<!DOCTYPE html>
<html>
<head>
  <title>Menu example</title>
<style type='text/css'>
.wrapper {
     width:100%;
     height:30px;
     background:grey;
     margin: 0 0 0 0; 
     z-index: 10;
     position: absolute;
     right: 0; 
     top: 0;
 }
 .menu-holder ul {
     margin: 0px 0 0px 0px;
     padding: 0;
     list-style-type: none;
 }
 .menu-holder ul li {
     position: relative;
     float: left;
     padding: 0px 0px 0 0px;
     margin: 0px 0px 100px 0px;
     border-left: 1px dotted white;
     line-height: 0px;
 }
 .menu-holder > ul > li:hover > a {
     background-color: #025179;
 }
 .menu-holder ul li:hover ul {
     display: block;
 }
 .menu-holder ul li a {
     font-family: Verdana, sans-serif;
     font-size: 12px;
     //font-weight: bold;
     display: block;
     color: white;
     text-decoration: none;
     padding: 15px 10px 15px 10px;
     -webkit-border-radius: 5px 5px 0px 0px;
     border-radius: 5px 5px 0px 0px;
 }
 .menu-holder ul li a.active {
     //font-family: Verdana, sans-serif;
     //font-size: 12px;
     //font-weight: bold;
     //display: inherit;
     //color: white; 
     background: blue;
     //text-decoration: none;
     //padding: 15px 10px 15px 10px;
     -webkit-border-radius: 0px 0px 0px 0px;
     border-radius: 0px 0px 0px 0px;
 }
 .menu-holder ul li ul {
     float: none;
     display: none;
     position: absolute;
margin:0;     top: 30px;padding:0;
     left: 10;
     white-space: nowrap;font-size:0;
 }
 .menu-holder ul li ul:hover {
     display: block;
 }
 .menu-holder ul li ul li {
     position: static;
     float: none;
     display: inline-block;
     padding:0;
     margin:0px;font-size:14px;
     background-color: #025179;
 }
 
 .menu-holder ul li ul li a {
     display:block;
     margin: 0 0px 0 0px;
     padding: 0 10px;
     line-height:30px;
     font-weight: normal;
     -webkit-border-radius: 0;
     border-radius: 0;
     font-size:12px;
 }
.menu-holder ul li ul li a.OnLoad {
       display: block;
       visibility:visible;
       margin: 0 0px 0 0px;
       padding: 0 10px;
       background: blue;
       line-height:30px;
       font-weight: normal;
       -webkit-border-radius: 0px 0px 5px 5px;
       border-radius: 0px 0px 5px 5px;
       font-size:12px;
       z-index: 1000;
}
 .menu-holder ul li ul li:first-of-type {
     -webkit-border-radius: 0px 0px 0px 5px;
     border-radius: 0px 0px 0px 5px;
 }
 .menu-holder ul li ul li:last-of-type {
     -webkit-border-radius: 0px 5px 5px 0px;
     border-radius: 0px 5px 5px 0px;
 }
 .menu-holder ul li:first-of-type {
     border-left: none;
 }
</style>
</head>
<body>
 <div class="wrapper">
    <div class="menu-holder">
        <ul>
            <li><a href="#">Menu list 1</a>
            </li>
            <li><a class="active" href="#">Menu list 2</a>
                <ul>
                    <li><a class="OnLoad" href="menu7.asp?id=1">Menu list 2:1</a></li>
                    <li><a href="#">Menu list 2:2</a>                    </li>
                </ul>
 
            </li>
            <li><a href="#">Menu list 3</a>
			<ul>
                    	<li><a href="menu7.asp?id=1">Menu list 3:1</a>
                    	</li>
                    	<li><a href="#">Menu list 3:2</a>
                    	</li>
                </ul>
            </li>
            <li><a href="#">Menu list 3</a>
            </li>
        </ul>
</div>
    <!-- menu-holder end -->
</div>
 
</body>
 
 
</html>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi plotan, .menu-holder ul

Hi plotan,

.menu-holder ul li:nth-child(2) ul{
  display: list-item;
}

This may also help: CSS current page nav link highlight