Advertisement

06.02.2008 at 08:47AM PDT, ID: 23450237 | Points: 500
[x]
Attachment Details

reduce size of menu box

Asked by ragha81 in Hypertext Markup Language (HTML), Cascading Style Sheets (CSS)

Tags:

please see my code.. I need to modify this code to accomplish the following

1) Need to reduce the size of menu box to half.

2) I need a line above and below the menu boxes.

3) The menu itemns from the menu box should not go beyond the botton line.

4) The leftmost menubox should be moved one position right..

Thanks in advanceStart Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
		<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
		<head>
		 
		 
		<style type="text/css">
		#info {position:relative;}
		p.bold {padding-left:10px; color:#c00;}
		a.linkup {position:relative;}
		a.buttonup {position:absolute; top:200px; left:450px; border:0;}
		a.buttonup img {border:0;}
		.gleft {float:left; margin:25px 0 10px 0;}
		.gright {float:right; margin:25px 5px 10px 0;}
		.grc {margin:20px 0 0 10px;}
		 
		 
		
		 
		.menu {width:745px; height:32px; font-size:0.85em; position:relative; z-index:100;}
		/* hack to correct IE5.5 faulty box model */
		* html .menu {width:746px; w\idth:745px;}
		/* remove all the bullets, borders and padding from the default list styling */
		.menu ul {padding:0;margin:0;list-style-type:none;}
		.menu ul ul {width:149px;}
		/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
		.menu li {float:left;width:149px;position:relative;}
		/* style the links for the top level */
		.menu a, .menu a:visited {display:block;font-size:11px;text-decoration:none; color:#fff; width:138px; height:30px; border:1px solid #000; border-width:1px 0 1px 1px; background:#758279; padding-left:10px; line-height:29px;}
		/* a hack so that IE5.5 faulty box model is corrected */
		* html .menu a, * html .menu a:visited {width:149px; w\idth:138px;}
		 
		/* style the second level background */
		.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#d4d8bd url(http://www.cssplay.co.uk/graphics/drop.gif) bottom right no-repeat;}
		/* style the second level hover */
		.menu ul ul a.drop:hover{background:#c9ba65 url(http://www.cssplay.co.uk/graphics/drop.gif) bottom right no-repeat;}
		.menu ul ul :hover > a.drop {background:#c9ba65 url(http://www.cssplay.co.uk/graphics/drop.gif) bottom right no-repeat;}
		/* style the third level background */
		.menu ul ul ul a, .menu ul ul ul a:visited {background:#e2dfa8;}
		/* style the third level hover */
		.menu ul ul ul a:hover {background:#b2ab9b;}
		 
		 
		/* hide the sub levels and give them a positon absolute so that they take up no room */
		.menu ul ul {visibility:hidden;position:absolute;height:0;top:31px;left:0; width:149px;border-top:1px solid #000;}
		/* another hack for IE5.5 */
		* html .menu ul ul {top:30px;t\op:31px;}
		 
		/* position the third level flyout menu */
		.menu ul ul ul{left:149px; top:-1px; width:149px;}
		 
		/* position the third level flyout menu for a left flyout */
		.menu ul ul ul.left {left:-149px;}
		 
		/* style the table so that it takes no ppart in the layout - required for IE to work */
		.menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}
		 
		/* style the second level links */
		.menu ul ul a, .menu ul ul a:visited {background:#d4d8bd; color:#000; height:auto; line-height:1em; padding:5px 10px; width:128px;border-width:0 1px 1px 1px;}
		/* yet another hack for IE5.5 */
		* html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;}
		 
		/* style the top level hover */
		.menu a:hover, .menu ul ul a:hover{color:#fff; background:#949e7c;}
		.menu :hover > a, .menu ul ul :hover > a {color:#fff;background:#949e7c;}
		 
		/* make the second level visible when hover on first level list OR link */
		.menu ul li:hover ul,
		.menu ul a:hover ul{visibility:visible; }
		/* keep the third level hidden when you hover on first level list OR link */
		.menu ul :hover ul ul{visibility:hidden;}
		/* make the third level visible when you hover over second level list OR link */
		.menu ul :hover ul :hover ul{ visibility:visible;}
		 
		</style>
		</head>
		 
		<div id="midlink">
		                        <ul id="main_menu">
		                        
		 
		                        </ul>
		                        </div>
		                        
		 
		 
		 
		<div class="menu">
		 
		<ul>
		<li><a href="../menu/index.html">DEMOS<!--[if IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		        <ul>
		 
		        <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars advertising page</a></li>
		        <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text around images</a></li>
		        <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
		        <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
		        <li><a class="drop" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click with no borders<!--[if IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		                <ul>
		 
		                        <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
		                        <li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li>
		                        <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
		                </ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		        </li>
		        <li><a class="drop" href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing<!--[if IE 7]><!--></a><!--<![endif]-->
		 
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		                <ul>
		                        <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
		                        <li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li>
		                        <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
		                </ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		        </li>
		 
		        <li><a class="drop" href="../menu/old_master.html" title="Image Map for detailed information">image map for detailed information<!--[if IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		                <ul>
		                        <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
		                        <li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li>
		                        <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
		                </ul>
		 
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		        </li>
		        <li><a href="../menu/bodies.html" title="fun with background images">fun with background images</a></li>
		        <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
		        <li><a href="../menu/em_images.html" title="em size images compared">em image sizes compared</a></li>
		        </ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		 
		<li><a href="../boxes/index.html">BOXES<!--[if IE 7]><!--></a><!--<![endif]-->
		 
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		        <ul>
		        <li><a href="spies.html" title="a coded list of spies">a coded list of spies</a></li>
		        <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
		        <li><a href="expand.html" title="an enlarging unordered list">enlarging unordered list</a></li>
		        <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
		        <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
		 
		        <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
		        <li><a href="circles.html" title="circular links">circular links</a></li>
		        </ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
		<li><a href="../mozilla/index.html">MOZILLA<!--[if IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		        <ul>
		        <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
		 
		        <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
		        <li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
		        <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
		        <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">I can build a rainbow with transparent borders</a></li>
		        <li><a href="../mozilla/snooker.html" title="Snooker cue">a snooker cue using border art</a></li>
		        <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
		 
		        <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
		        <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
		        </ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
		 
		 
		                
		 
		 
		</div>
[+][-]06.02.2008 at 10:32AM PDT, ID: 21693825

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 14-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]06.02.2008 at 01:40PM PDT, ID: 21695486

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 14-day free trial to view this Expert Comment or ask the Experts your question.

 
[+][-]06.02.2008 at 02:21PM PDT, ID: 21695772

Often, when Experts are collaborating with members who have asked questions, they will request additional information about the problem. Askers respond with an author comment like this one.

Start your 14-day free trial to view this Author Comment or ask the Experts your question.

 
[+][-]06.02.2008 at 03:09PM PDT, ID: 21696116

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 14-day free trial to view this Expert Comment or ask the Experts your question.

 
 
Loading Advertisement...
20081112-EE-VQP-43 / EE_QW_2_20070628