/    Sign up×
Community /Pin to ProfileBookmark

Trying To Create This Vertical List menu

Copy linkTweet thisAlerts:
Apr 28.2007

Hi All,

I am trying to create this specific vertical list.
[IMG]http://www.rio-p.com/gif/menu.gif[/IMG]
The challenge that I am having is trying to create the static sub menu BUT not the drop down like the usual drop down menu.

I have been trying to make it but so far nothing works ?

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@ray326Apr 28.2007 — trying to create the static sub menu BUT not the drop down like the usual drop down menu. [/QUOTE]Can you say that another way? I don't quite get it.
Copy linkTweet thisAlerts:
@sticks464Apr 28.2007 — Ray, I think this is what he is after. My css is not quiet right, it breaks in IE 5 & 5.5 and I can't get the hover background to completely cover the div from side to side. Maybe if you can clean it up we'll both learn something.
<style type="text/css">

<!--

body, html {

margin:0;

padding:0;

}

body {

margin:0;

padding:0;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

}

#nav {

width:170px;

background:red;

margin:10px 0 0 10px;;

}

.menu {

list-style:none;

margin:0;

padding:5px 0;

width:170px;

color:#ffffff;

}

.menu li {

display:block;

text-decoration:none;

width:170px;

margin:0;

padding:3px 0 0 5px;

color:#ffffff;

border:none;

}

.menu li a{

text-decoration:none;

margin:0;

color:#ffffff;

border:none;

}

.menu a:hover {

color:#000000;

background:#ffffff;

}


.menu li ul li { /* Sub Menu Styles*/


list-style:none;

margin:0;

width:100px;

}

.main {

/*padding-left:5px;*/

width:150px;

}

-->

</style>

</head>

<body>

<div id="nav">

<ul class="menu">

<li class="main"><script type= "text/javascript">

<!-- Begin

// Get today's current date.

var now = new Date();

// Array list of days.

var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');

// Array list of months.

var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');

// Calculate the number of the current day in the week.

var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();

// Calculate four digit year.

function fourdigits(number) {

return (number < 1000) ? number + 1900 : number;

}

// Join it all together

today = days[now.getDay()] + ", " +

months[now.getMonth()] + " " +

date + ", " +

(fourdigits(now.getYear())) ;

// Print out the data.

document.write(today);

// End -->

</script></li>

<li><a href="#">Home</a></li>

<li><a href="#">Company Profile</a></li>

<li class="main">Properties for Sale

<ul>

<li><a href="#">Sydney</a></li>

<li><a href="#">Melbourne</a></li>

<li><a href="#">Brisbane</a></li>

<li><a href="#">Bali, Indonesia</a></li>

<li><a href="#">Re-Sales</a></li>

</ul>

</li>

<li class="main">Commercial Properties

<ul>

<li><a href="#">For Sale</a></li>

<li><a href="#">For Lease</a></li>

</ul>

</li>

<li class="main">Location Maps

<ul>

<li><a href="#">Sydney</a></li>

<li><a href="#">Melbourne</a></li>

<li><a href="#">Bali</a></li>

</ul>

</li>

<li><a href="#">Property Management</a></li>

<li><a href="#">Migration</a></li>

<li><a href="#">Finance</a></li>

<li><a href="#">Lawyer/Solicitor</a></li>

<li><a href="#">Travel + Accomodations</a></li>

<li><a href="#">Calculators</a></li>

<li><a href="#">FAQ</a></li>

<li><a href="#">Contact Us</a></li>

<li><a href="#">Disclaimer</a></li>

</ul>

</div> [/QUOTE]
×

Success!

Help @Arch_Angel spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...